Example Theme Integration

Please follow the steps shown in this article to carry out the theme integration process according to the Wholesale Pricing Discount subscription plan.

Before you start integrating a theme, it's a good idea to make a backup copy so that you can discard your changes and start again if you need to. Checkout the steps to create backup here.

Don't forget to save the file on each step and test the changes on the storefront.

Theme Integration for the Basic version

Theme.liquid File

Copy the code snippet given below and paste it just above the </body> tag. Our app add this code through automation if you already opened our app once.

<!-- 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 -->

Product.liquid File

As we can see from the below screenshot, there are two different sections available under the product.liquid file.

Step 1: Open the product-template section where you will see the pricing variables. Please include following lines at the very top of your file.

{%- include 'wcp_discount' with product -%}
{%- assign current_variant = product.selected_or_first_available_variant -%}
{% include 'wcp_variant' with current_variant %}

Step 2: Find theme default variables responsible for prices and replace theme with our app variables as shown in the below image.

In this example theme, we have only two variables that requires the replacement there may be more variables in your theme. Check for each variable and replace them with the related app variable. You can find variable list here.

Step 3: Our app requires to redirect the customer on the cart page and checkout from there to validate the cart and calculate final discounts. For this reason, if your product page has the Buy Now button, please hide it with the code given below.

{% if section.settings.enable_payment_button %}
    {% unless customer.tags contains p_discount_tag or customer.tags contains v_discount_tag %} 
        {{ form | payment_button }}        
    {% endunless %}
{% endif %}

Step 4: Paste the lines given below under the theme default JSON snippet as shown in the screenshot. These lines are useful to fetch discounted prices and use them on the areas controlled by JavaScript.

{% unless product == empty %}
  <script type='application/json' class='wcp_json wcp_json_{{ product.id }}' id='wcp_json_{{ product.id }}' > 
      {% render 'wcp_product_json' with product %}
  </script>
{% endunless %}

Step 5: Use a JavaScript code to find the discounted prices from the JSON in the previous step to handle the variant selection feature. Usually, this works through the _onSelectChange function under the theme.js file. You can use below given example code and modify it according to your needs and variable names.

var WCP_JSON=[];
        if($(".wcp_json").length){    
            WCP_JSON=JSON.parse($(".wcp_json")[0].innerText);
            $.each(WCP_JSON.variants, function( index, value ) {
                if(variant.id == value.id){
                   variant.price = value.price;  
                   variant.compare_at_price = value.compare_at_price;       
                    return false;
                }
            });      
        }

Step 6: Under product.liquid, there is one more section product-recommendations. Please open it and you can observe that this section includes product-card-grid which in turn includes the product-price-listing where there is no more further pricing related includes available. So please add all three lines on the top of the product-price-listing file and replace pricing variables with the app variables.

{%- include 'wcp_discount' with product -%}
{%- assign current_variant = product.selected_or_first_available_variant -%}
{% include 'wcp_variant' with current_variant %}

Collection.liquid File

If you open Search.liquid file, it includes the collection-template section.

Now, please open the collection-template section file, which includes product-card-grid and product-card-list liquid snippet files. This both files include the product-price-listing file where we made change in our previous steps.

Search.liquid File

If you open Search.liquid file, it includes the product-card-list which in turn includes the product-price-listing where we already made changes.

Cart.liquid File

If you open the cart.liquid, it includes the cart-template section as shown in the screenshot below. There may be different section names depending on the theme.

Step 1: Open the cart-template section and find the for loop on the cart line items. Paste below given lines exactly under the for loop.

{% include 'wcp_discount' with item.product %} 
{%- include 'wcp_variant' with item.variant -%} 
{% include 'wcp_vd_discount' with item %} 
{% assign  wcp_custom_final_Price = item.final_price  %} 
{% if wcp_v_price < wcp_custom_final_Price %}
{% assign wcp_line_price = wcp_v_price | floor | minus: 0 | times: item.quantity %}
{% else %}
{% assign wcp_line_price = wcp_custom_final_Price | floor | minus: 0 | times: item.quantity %}
{% assign wcp_v_price = wcp_custom_final_Price %}
{% endif %}
{% assign wcp_total_price = wcp_total_price | plus: wcp_line_price %}		

            

Step 2: Find theme default variables and replace them with respective app variables.

Step 3: Search for the cart subtotal portion and add following classes and elements to it. Our app replaces the div automatically, however, please do this step if no replacement found.

<div class="cart-subtotal">
    <span class="cart-subtotal__title">{{ 'cart.general.subtotal' | t }}</span>
    <span class="cart-subtotal__price" data-cart-subtotal>
        <span class="wcp-original-cart-total">{{ cart.total_price | money}}</span>
        <span class="wcp-cart-total"></span>
        <div class="additional-notes">
            <span class="wcp-minimums-note"></span>
            <span class="wcp-extra-note "></span>
        </div>
    </span>
</div>

Step 4: Please note, our app works with Shopify Draft Order API hence the additional payment buttons work after the checkout been made through our app. Please hide the additional payment buttons on the cart page through the JavaScript code. Please replace the additional-checkout-buttons class with the class name in your theme.

<script>
    var v = setInterval(function()
    {
        if(typeof window.wcp_data != 'undefined' && typeof window.wcp_data.discounted_hash != 'undefined')
        {
            if((window.wcp_data.discounted_hash.discount_value || window.wcp_data.discounted_hash.shipping) && $('.additional-checkout-buttons').children(':visible').length > 0)
            {
                $('.additional-checkout-buttons').html("Other payment options are available at checkout");
                clearInterval(v);
            }   
        }  
        
    },500);                                 
</script>

Theme Integration for the Professional version

The professional version only includes the code for the net terms. Please put the below given lines under the checkout button code or on your desired place in the appropriate cart-template. Please modify the layout and styling according to your theme to match the UI.

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

Theme Integration for the Enterprise version

The enterprise version integration renders the volume discount (quantity break) tables and appropriate messages on the product page and the cart page.

Product.liquid

Please open appropriate product-template and put few extra lines of code and variables with all those changes for the basic and professional version.

Step 1: Include below lines under the basic integration.

{% include 'wcp_vd_table_change' with product %}
{% include 'wcp_variant' with current_variant %}

{% include 'wcp_vd_product' with product %} 
{% include 'wcp_variant' with current_variant %}

Step 2: Copy and paste the div on the place where you want to show the volume discount table. Generally, it should be added just above where the product form ends.

<div>
    <b>
        {% unless wcp_vd_HTML_table == '' or  wcp_vd_HTML_table == blank %}
            <br><span>{{shop.metafields.wcp_net.VDTableNote}}<br/></span>
        {% endunless %}
    </b>
    <div class-data='{{wcp_vd_HTML_table}}' id='wcp_vd_table' style ='margin-top :20px;'>{{wcp_vd_HTML_table}}</div>             
</div> 

Step 4: Add the given script just before the product template schema start.

    {% unless wcp_vd_HTML_table == '' %}
    <script type='application/json' class='wcp_vd_table' id='wcp_vd_table_{{ product.id }}' > 
      {{- wcp_vd_HTML_table_tmp -}}
    </script>
    {% endunless %}
    
    {% unless wcp_vd_HTML_table == '' %}
    <script id='vdtable' type='text/x-handlebars-template'>
    <table>
    <tr>
    <th>Quantity</th>
    <th>Discount</th>
    <th>Price</th>
    </tr>
    {% raw %}
    {{#each vdtable}}
        <tr>
            <td>{{Qty}}</td>
            <td>{{Discount}}</td>
            <td>{{Price}}</td>
          </tr>
    {{/each}}
    {% endraw %}
    </table>   
    </script>
    <script>
      if(typeof Handlebars === 'undefined'){
         var head = document.getElementsByTagName('head')[0];
        script = document.createElement('script');
        script.onload = function() { };
        script.type = 'text/javascript';
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js';
        head.appendChild(script);
      }  
    </script>    
    {% endunless %}

Step 5: Include necessary javascript lines in the _onSelectChange function of the theme.js file exactly below the code added to display discounted price on the variant variant.

if (document.getElementsByClassName('wcp_vd_table').length != 0 && document.getElementById('vdtable') != null) {

              var source = document.getElementById('vdtable').innerHTML;
              var template = Handlebars.compile(source);
              if (document.getElementsByClassName('wcp_vd_table')[0] != undefined && document.getElementsByClassName('wcp_vd_table')[0].innerText != '') {
                var context = JSON.parse(document.getElementsByClassName('wcp_vd_table')[0].innerText);
                var vdtable = [];
                vdtable['vdtable'] = context['wpd_' + variant.id];
                vdtable['vdtable'].forEach(function (arrayItem) {
                  arrayItem.Price = arrayItem.Price.replace(/<\/?span[^>]*>/g, '');
                });
                var html = template(vdtable);

                document.getElementById('wcp_vd_table').innerHTML = html;
              }
              else {
                document.getElementById('wcp_vd_table').innerHTML = '';
              }

            }

Cart.liquid

Step 1: Open the appropriate cart-template and include volume discount files under the lines included for basic theme integration.

{% include 'wcp_vd_discount' with item %}

Step 2: Add the variable on the place to display the buy more message under the line item.

{{NextDiscountHtml}}