BDR Integration Steps

Follow the instructions to integrate a theme with BDR

For All templates that include Price variable

• Add the below code to the templates where you find price variable

data-wpd-product-handle="{{ product.handle }}"         
data-wpd-variant-id="{{ product.selected_or_first_available_variant.id }}"         
data-wpd-variant-price="{{ product.selected_or_first_available_variant.price }}"        
data-wpd-variant-compare-at-price="{{ product.selected_or_first_available_variant.compare_at_price }}"
data-wpd-product-collection-ids="{% assign wpdProductCollectionIds = product.collections | map:'id' %}{{ wpdProductCollectionIds | join:',' }}"        
data-wpd-product-id="{{ product.id }}"

For example: <span class="price-item price-item--regular" data-wpd-product-handle="{{ product.handle }}" data-wpd-variant-id="{{ product.selected_or_first_available_variant.id }}" data-wpd-variant-price="{{ product.selected_or_first_available_variant.price }}" data-wpd-variant-compare-at-price="{{product.selected_or_first_available_variant.compare_at_price }}" data-wpd-product-collection-ids="{{ wpdProductCollectionIds | join:',' }}" data-wpd-product-id="{{ product.id }}"> {{ money_price }} </span>

• To hide the compare at price element and sale badge/label add the below attribute into the class

data-wpd-hide

For example, <s class="data-wpd-hide price-item price-item--regular"> {{ compare_at_price | money }} </s>

• To show the Volume Discount table on the product page add the below div before {% endform %} tag

<div id='wcp_vd_table'></div>

• For Javascript (require only if variant change functionality is not working on any area) add the below code into JS file

try{
this.classList.remove("wpd-processed");
this.setAttribute("data-wpd-variant-compare-at-price",variant.compare_at_price == null ? "":variant.compare_at_price);
this.setAttribute("data-wpd-variant-price",variant.price);
this.setAttribute("data-wpd-variant-id",variant.id);
this.setAttribute("data-wpd-product-handle",window.wpdExtensionIsProductPage.handle);
}catch(e){}

• Add the code below if the price element is replaced with an HTML tag

data-wpd-product-handle="+window.wpdExtensionIsProductPage.handle+" 
data-wpd-variant-id="+ newVariant.id +"

---

Cart Page

• For a single variant price

data-wpd-cart-variant-id="{{ line_item.variant.id }}"                                
data-wpd-cart-item="{{ line_item.key }}"

For example:

<div class="product-option" data-wpd-cart-variant-id="{{ item.variant.id }}" data-wpd-cart-item="{{ item.key }}"> {{ item.original_price | money }} </div>

• For line price

data-wpd-cart-variant-id="{{ line_item.variant.id }}"   
data-wpd-cart-item="{{ line_item.key }}"                                
data-wpd-cart-line-price

For example:

<span class="price price--end" data-wpd-cart-variant-id="{{ line_item.variant.id }}" data-wpd-cart-item="{{ line_item.key }}" data-wpd-cart-line-price>{{ item.original_line_price | money }} </span>

• Add the below code where the cart.total_price variable is located

<span class="wcp-original-cart-total"></span>
<span class="wcp-cart-total"></span>
<div class="additional-notes">
<span class="wcp-minimums-note"></span>
<span class="wcp-extra-note "></span>
</div>{% render "wcp_multi_currency_msg" %} 

• Add the net order button code like below

{% if customer.tags contains 'wpdnet' %}
{% if shop.metafields.wcp_net.isNetEnabled == 'true' or shop.metafields.wcp_net.isNetEnabled == '1' %}
<div style="margin-top:30px;display:none" id="wpdNetContainer">
<p>{{shop.metafields.wcp_net.netCartMsg}}</p>
<button id="wcp-30-open" class="button"> {{shop.metafields.wcp_net.netBtnMsg}}</button>
</div>
{% endif %}
{% endif %}

• Currency converter and comma logic for cart total

{% assign wcp_wholesale_customer = false %}
{% if shop.metafields.wcp_status.wcp_status != 'disabled' and customer %}
{% assign active_discounts = shop.metafields.wcp_active_discounts.wcp_active_discounts %}
{% assign active_discounts_array = active_discounts | split: ',' %}
{% assign customer_tags = blank %}
{% for tag in customer.tags %}
{% assign tempTag = tag | downcase %}
{% assign customer_tags = customer_tags | prepend:tempTag %}
{% unless forloop.last %}
{% assign customer_tags = customer_tags | prepend:','  %}
{% endunless %}
{% endfor %}
{% assign customer_tags = customer_tags | split:',' %}
{% assign active_discounts = active_discounts | downcase %}
{% for discount_key in active_discounts_array %}
{% assign key_split = discount_key | split: '-' %}
{% assign key_split_length = key_split | size %}
{% if key_split_length > 2 %}
{% assign removeable_key = key_split.last | prepend: '-' %}
{% assign wcp_customer_tag = discount_key | remove_last: removeable_key %}
{% else %}
{% assign wcp_customer_tag = key_split[0] %}
{% endif %}
{% assign wcp_customer_tag = wcp_customer_tag | downcase %}
{% if customer_tags contains wcp_customer_tag %}
{% assign wcp_wholesale_customer = true %}
{% endif %}
{% endfor %}
{% endif %}
{% if wcp_wholesale_customer == true %}
  <script>
    document.addEventListener('DOMContentLoaded', function(){
      var intver = setInterval(function(){
        if(window.wcp_data == undefined || window.wcp_data.discounted_hash == undefined) {return;}
            if(document.querySelector('.wcp-minimums-note').innerHTML != ""){
              document.querySelectorAll('.wcp-cart-total').forEach(function (element) {
                  element.style.display="none";
              });
            
              document.querySelectorAll('.wcp-original-cart-total').forEach(function (element) {
                      element.innerHTML= wpdFormatePrice(parseFloat(window.wcp_data.discounted_hash.Without_Formatted_original_total) * 100);
                  }); 
              document.querySelectorAll('.wcp-net-cart-total').forEach(function (element) {
                       element.innerHTML= wpdFormatePrice(parseFloat(window.wcp_data.discounted_hash.wcp_total) * 100);                    
                  });
              document.querySelectorAll('.wcp-cart-total').forEach(function (element) {
                      element.innerHTML= wpdFormatePrice(parseFloat(window.wcp_data.discounted_hash.wcp_total) * 100);       
                  });
              clearInterval(intver); 
            }else{   
              if(document.querySelector('.wcp-cart-total').getAttribute('wcp') == ""){          
                  document.querySelectorAll('.wcp-cart-total').forEach(function (element) {
                      element.getAttribute('wcp',document.querySelector('.wcp-cart-total').innerHTML.replace('$',""));
                  });        		
                  document.querySelectorAll('.wcp-cart-total').forEach(function (element) {
                       element.innerHTML= wpdFormatePrice(parseFloat(window.wcp_data.discounted_hash.wcp_total) * 100);         
                  });
                  document.querySelectorAll('.wcp-original-cart-total').forEach(function (element) {
                      element.innerHTML= wpdFormatePrice(parseFloat(window.wcp_data.discounted_hash.Without_Formatted_original_total) * 100);
                  });        		         
                clearInterval(intver);                          
              }
            }
            
      },2500);  
      }, false);
</script>	
{% endif %}

If a cart reload script is required please add it as you do for liquid integration

If the Volume Discount message is not displaying on the cart page check the single variant price available if not include it as you do for liquid integration

---

For Cart Drawer

• For single variant price

data-wpd-cart-drawer-product-handle="{{ item.product.handle }}"                                 
data-wpd-cart-drawer-variant-id="{{ item.variant.id }}"                                 
data-wpd-cart-drawer-variant-price="{{ item.variant.price }}"                                
data-wpd-cart-drawer-variant-compare-at-price="{{ item.variant.compare_at_price }}"                                
data-wpd-cart-drawer-product-collection-ids="{% assign wpdProductCollectionIds = item.product.collections | map:'id' %}{{ wpdProductCollectionIds | join:',' }}"                                
data-wpd-cart-drawer-product-id="{{ item.product.id }}"                               
data-wpd-cart-drawer-item="{{ item.key }}"                                
data-wpd-cart-drawer-quantity="{{ item.quantity }}"

For example: <div class="product-option" data-wpd-cart-drawer-product-handle="{{ item.product.handle }}" data-wpd-cart-drawer-variant-id="{{ item.variant.id }}" data-wpd-cart-drawer-variant-price="{{ item.variant.price }}" data-wpd-cart-drawer-variant-compare-at-price="{{ item.variant.compare_at_price }}" data-wpd-cart-drawer-product-collection-ids="

{{ wpdProductCollectionIds | join:',' }}" data-wpd-cart-drawer-product-id="{{ item.product.id }}" data-wpd-cart-drawer-item="{{ item.key }}" data-wpd-cart-drawer-quantity="{{ item.quantity }}">{{ item.original_price | money }} </div>

• For line price

data-wpd-cart-drawer-product-handle="{{ line_item.product.handle }}"                                  
data-wpd-cart-drawer-variant-id="{{ line_item.variant.id }}"                                   
data-wpd-cart-drawer-variant-price="{{ line_item.variant.price }}"                                  
data-wpd-cart-drawer-variant-compare-at-price="{{ line_item.variant.compare_at_price }}"                                  
data-wpd-cart-drawer-product-collection-ids="{% assign wpdProductCollectionIds = line_item.product.collections | map:'id' %}{{ wpdProductCollectionIds | join:',' }}"                                  
data-wpd-cart-drawer-product-id="{{ line_item.product.id }}"                                  
data-wpd-cart-drawer-line-price                                  
data-wpd-cart-drawer-item="{{ line_item.key }}"                          
data-wpd-cart-drawer-quantity="{{ line_item.quantity }}"

For example: <span class="price price--end" data-wpd-cart-drawer-product-handle="{{ line_item.product.handle }}" data-wpd-cart-drawer-variant-id="{{ line_item.variant.id }}" data-wpd-cart-drawer-variant-price="{{ line_item.variant.price }}" data-wpd-cart-drawer-variant-compare-at-price="{{ line_item.variant.compare_at_price }}" data-wpd-cart-drawer-product-collection-ids="

{{ wpdProductCollectionIds | join:',' }}" data-wpd-cart-drawer-product-id="{{ line_item.product.id }}" data-wpd-cart-drawer-line-price data-wpd-cart-drawer-item="{{ line_item.key }}" data-wpd-cart-drawer-quantity="{{ line_item.quantity }}">{{ item.original_line_price | money }} </span>

• Add the below attribute in the cart drawer total

data-wpd-cart-total

For example: <span class="h5" data-wpd-cart-total>{{- cart.total_price | money_with_currency -}} </span>

• If the cart page and cart drawer prices arrive from the same template put the drawer code in if the condition as shown below

For example: {% if wpddrawer == true %}

data-wpd-cart-drawer-product-handle="{{ line_item.product.handle }}" data-wpd-cart-drawer-variant-id="{{ line_item.variant.id }}" data-wpd-cart-drawer-variant-price="{{ line_item.variant.price }}"

data-wpd-cart-drawer-variant-compare-at-price="{{ line_item.variant.compare_at_price }}"

data-wpd-cart-drawer-product-collection-ids="

{{ wpdProductCollectionIds | join:',' }}"

data-wpd-cart-drawer-product-id="{{ line_item.product.id }}"

data-wpd-cart-drawer-line-price

data-wpd-cart-drawer-item="{{ line_item.key }}"

data-wpd-cart-drawer-quantity="{{ line_item.quantity }}" {% endif %} then cart page code

• If the line price is not coming in the cart drawer file need to include a hidden input tag as shown below

For example: <input type="hidden" data-wpd-cart-drawer-product-handle="{{ item.product.handle }}"

data-wpd-cart-drawer-variant-id="{{ item.variant.id }}"

data-wpd-cart-drawer-variant-price="{{ item.variant.price }}"

data-wpd-cart-drawer-variant-compare-at-price="{{ item.variant.compare_at_price }}"

data-wpd-cart-drawer-product-collection-ids="

{{ wpdProductCollectionIds | join:',' }}"

data-wpd-cart-drawer-product-id="{{ item.product.id }}"

data-wpd-cart-drawer-line-price

data-wpd-cart-drawer-item="{{ item.key }}"

data-wpd-cart-drawer-quantity="{{ item.quantity }}" />

---

Comment old Liquid code in the theme.liquid file

{% comment %}
<!-- WPD Start -->
{% if customer.tags.size > 0 and template != 'cart' %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
  let checkoutbtninterval = setInterval(function(){
  var x=document.querySelectorAll("input[name='checkout'], button[name='checkout'], input[name='goto_pp'], button[name='goto_pp'], input[name='goto_gc'], button[name='goto_gc'], [href$='checkout']");
  var WPD_RedirectToCart = function(e) {
    e.stopPropagation();
    e.preventDefault();
    window.location = '/cart';
  };
  for (var i = 0; i < x.length; i++) {
    x[i].addEventListener('click', WPD_RedirectToCart, false);
  }
  },500)
  });
</script>
{% endif %}

{% if customer.tags.size > 0 and template == 'cart' %}
{% include 'wcp_cart' %}
{% endif %}

<!-- WPD End -->
{% endcomment %}