Wholesaler - Installation

The following step-by-step guide was made considering you have the brand new version of Wholesaler, which allows you to create 3 different levels of Wholesale customers as well as 3 levels of wholesale discounts meant to be given to their respective Wholesale customers.

If you don't have the new version of it, please contact us at support@microapps.com, so that we can update your snippets before you start updating your theme with this new step-by-step guide.

 

Step 1 - Enabling accounts

First things first: before starting digging into the the liquid files, we have to make sure your store has accounts (customer login) enabled, so we will be able to know if we're showing products to a wholesaler customer, to a retail customer or just to a visitor.

Go to your store Admin, click on Settings and then on Checkout

 ⇒ 

Scroll down to the Customer Accounts section and then select either Accounts are required or Accounts are optional

 

Note: your wholesale customers must be logged in to your store in order to see the wholesale prices, so do not select Accounts are disabled
 

Step 2 - Editing your theme

Now we must add the Wholesaler snippets (wholesaler-variant-select.liquid and wholesaler-product-price.liquid are created when you install Wholesaler) to your theme in the right places, so that the application is able to select the right variants, depending on the role the current user plays on your store, that is, retailer or wholesaler. 

When you mark a variant as wholesaleable, for each wholesale level (small, medium or big), Wholesaler creates another one with the tail (Small/Medium/Big wholesale) with the price corresponding to the price you set in your Wholesaler admin area 

Now go to your theme editor (Themes ⇒ ... ⇒ Edit HTML/CSS)

⇒ 

In most cases we will edit the files theme.liquid, product.liquid and collection.liquid but for some themes, there will be other files that must also be edited in order to achieve the result.

If you don't find any of the files mentioned in this step-by-step installation guide, a good approach is to look for files like product-thumbnail.liquid, product-loop.liquid and product-form.liquid (keep in mind that the theme developers are free enough to build a theme with files named the way they prefer)

 

Step 3 - Selecting the proper variant

Now we have to select the proper variants, that is, hide the wholesale variant from retail customers. Between the cases A and B, pick the one that most describes your needs: 

A)My theme has a default select box

In this case, open theme.liquid file.

If your theme has the default select box for choosing the product:

new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, [ ... ] });

Add the following snippet to the end of the previous line (create a new line prior to the previous snippet to keep your theme good looking):

{% include 'wholesaler-variant-select' %}

Besides adding this new line, replace {{ product | json }} for filterVariants({{ product | json }}), keeping in mind that {{ product | json }} may differ from theme to theme.

After this step, we expect you to have something like:

{% include 'wholesaler-variant-select' %}
new Shopify.OptionSelectors("product-select", { product: filterVariants({{ product | json }}), [ ... ] });  
For some themes, this line of code is located somewhere else - a good bet is product.liquid

Save your file:

A)My theme doesn't a default select box 

Since there are a lot of different ways of providing choices for variants in a theme, the main point of this part of the tutorial, as we mentioned several times, is to prevent your customers from seeing the wholesale variants. As an example, we will consider your store has radio buttons to select the variants instead of select boxes.

Please open product.liquid and look for a snippet that looks like the following:

 

<form action="/cart/add" method="post">
  ...
  <ul>
    {% for variant in product.variants %}
      <li>
        <input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" />
        <label for="radio_{{variant.id}}">{{ variant.price | money_with_currency }} - {{ variant.title }}</label>
      </li>
    {% endfor %}
  </ul>
  ...
</form> 

Considering the previous snippet, after adding some liquid if-else blocks (bold text below), you should have something like:

<form action="/cart/add" method="post">
  ...
  <ul>
    {% for variant in product.variants %}
      {% assign customer_level = customer.metafields.Wholesaler.level | default: "0" | plus: "0" %}
      {% assign variant_level = variant.metafields.Wholesaler.level | default: "0" | slice: 0,1 | plus: "0" %}
      {% if customer_level > 0 %}
        {% if customer_level == variant_level %}

          <li>
            <input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" />
            <label for="radio_{{variant.id}}">{{ variant.price | money_with_currency }} - {{ variant.title }}</label>
          </li>
        {% endif %}
      {% elsif variant_level == 0 %}
        <li>
          <input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" />
          <label for="radio_{{variant.id}}">{{ variant.price | money_with_currency }} - {{ variant.title }}</label>
      {% endif %}
    {% endfor %}

  </ul>
  ...
</form>
Please notice that your theme may differ from this example, so adapt it according to your needs.

Save your file:

 

Step 4 - Displaying the proper price

Like the previous step, everything done in this step may differ from store to store, so as a more generical step, open all files that should be related to products, and therefore, where there should be prices displayed.

In each of the files you opened look for the following snippets:

{{ product.price | money }} 
{{ variant.price | money }}

And then replace them for the following snippet 

{% include 'wholesaler-product-price' %} 
Notice that this snippet contains all the logic necessary to select the correct price according to the role your customer plays on your store (retailer or wholesaler)
Was this article helpful?
0 out of 1 found this helpful
Have more questions? Submit a request

Comments

  • Avatar
    Jean-Guy de la Mercerie

    it is unclear if you have to do change manually in the liquid files, or if the app is doing it for you.

  • Avatar
    Milan Balaban

    We have to adapt the theme files to the app. Or you do it via our guide. We will try to make it more clear.