Developer guide

General Installation Flow

The installation process can vary wildly between themes, so there isn't a set of steps to install Wholesaler. Rather, those are a general guideline about how to do it and why. Remember than the ultimate goal is for every price in the shop to be the one provided by Wholesaler when a client is logged in as a wholesaler, and that the checkout redirect to the correct one. As such, there can be other steps to take (or there might be less steps needed). In any case, remember you can always reach support@microapps.com for support!

1. Create a new account in the shop.
2. In the Shopify admin, go to Applications => Wholesaler, then to Customer tab. Assign yourself a wholesaler discount group. As a recomendation, create a new discount group called "test_vip" or similar with a global 99% discount. You can check here about discount groups https://support.microapps.com/hc/en-us/articles/201502482-What-are-the-different-Discount-Groups-types-. This way it is easy to spot the changed prices while installing and testing.
3. Create a duplicate of the theme, and append [MA] to the name so we can know which theme is ours.
4. Add the checkout script to theme.liquid if there is an AJAX cart, or to cart.liquid if there isn't. Check that the cart has the correct pricing, update correctly, and if you click on checkout you have the correct prices
5. Go to collection_template.liquid and find the piece of code that output the price of the collection item. Use the ws-item-price snippet detailed below to output the correct price.
6. Repeat the same with featured items
7. Repeat the same with search
8. Once that's done, search the line of code that output {{ json | product }} and add the {% include 'ws-product-script' %} just after the closing <script> tag. Check the associated snippet and question below for more info.
9. If the price outputted in the product page isn't correct after that.

FAQ

Q: When I click on checkout, the checkout doesn't have the correct prices
A: Try putting this event handler in the checkout button: onclick="wholesaler.createCheckout(event)". This should happen automatically, but sometimes the theme doesn't recognized the added event handler so we have to put it by hand.

Q: Sometimes, WS scripts output a 0 price or a 'usage of include is not allowed in this context'. What to do?
A: There might be 3 solutions to this:
1. Check that Wholesaler snippets are installed. If they are not (happens sometimes), you can install them IN THE PUBLISHED THEME by going to Wholesaler admin, then to "How to use the app" and clicking on the Reinstall snippets button.
2. Theoretically the liquid tag 'include' is deprecated, but in practice lots of themes still use it. Our snippets have been updated with render. In this case, instead of using "include" to include the snippets, just put render (e.g instead of {% include 'ws-cart-total-price' %}, use {% render 'ws-cart-total-price' %}). If you do that, make sure that the actual script (for example, ws-cart-total-price.liquid) also uses render inside it
3. It might happen that there are other variable already called like ours and is making a conflict. This shouldn't happen when using render, however, in case it does just go to the affect script and put "ws_" as namespace for our variables (e.g change price to ws_price)
Q: Prices on the cart doesn't update, in fact the cart does nothing. Help!
A: Open the developer console. If you see an error like "$ is not defined", go to ws-checkout-script.liquid and add this just after line 5: <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>. Themes have JQuery usually, but they might use and outdated version or patched version. With this, we ensure we load JQuery for our scripts.

Q: When I put the ws-product-script.liquid, I got a lot of errors/the theme refuse to work/it does nothing.
A: ws-product-script.liquid works by identifying a certain element present in lots of stores, a script tag with id="ProductJson-{{section.id}}". This script usually just output {{ product | json }}, but in some cases, it might be more difficult. To solve it:

1. Identify the id or data-* of the element that is outputting product information. It usually is id="VariantsJson-{{section.id}}", data-product-template or data-json-product. Once you identify it, note its structure, as the objective is to replicate it with Wholesaler data.
2. Go to ws-product-script and change line 12 so productScriptSelector is the appropriate identifier for a querySelector (i.e., '#VariantsJson-' + sectionId, or '[data-product-template]')
3. In line 38, change the finding method from getElementById to querySelector
4a. In the case of a variant, you just need to output the variants by using JSON.stringify(product.variants) instead of JSON.stringify(product)
4b. If the json outputted has a complex structure, the fix is still relatively simple. Change line 40 so it is:

 ```
 var originalData = JSON.parse(productScript.innerHTML)
 productScript.innerHTML = JSON.stringify({ ...originalData, product: product })
 ```

Useful snippets

Check if a client is a wholesaler or not. We use not_wholesaler because it is an easier condition to check in the theme (e.g. {% if not_wholesaler %} <<discount code>> {% endif %} ). You can use this in the theme.liquid, at the top of the file, so it propogates to all other includes. However, if the theme uses {% render %} instead of {% includes %} you will need to use it on the specific file you need the variable not_wholesaler, as a {% render %} tag will NOT inject the variable in the snippet it loads until explicitly noted:

{% assign not_wholesaler = true %}
{% for tag in customer.tags %}
 {% if tag contains 'ws_group:'%}
 {% assign not_wholesaler = false %}
 {% endif %}
{% endfor %}

Get the Wholesaler item price of an item, line_item or a cart. Remember to change "item" to whatever it is called (product, current_variant...):

// Get the price of a single item
{% if not_wholesaler %}
{% assign price = item.price | plus: 0 %}
{% else %}
{% capture price_string %}{% include 'ws-item-price', item: item %}{% endcapture %}
{% assign price = price_string | plus: 0 %}
{% endif %}

// Same as before, but with the line price.
{% if not_wholesaler %}
{% assign line_price = item.line_price | plus: 0 %}
{% else %}
{% capture line_price_string %}{% include 'ws-item-line-price', item: item %}{% endcapture %}
{% assign line_price = line_price_string | plus: 0 %}
{% endif %}

// Same as before, but with the cart price
{% if not_wholesaler %}
{% assign total_price = cart.total_price | plus: 0 %}
{% else %}
{% capture total_price_string %}{% include 'ws-cart-total-price' %}{% endcapture %}
{% assign total_price = total_price_string | plus: 0 %}
{% endif %}

Enable the wholesaler checkout. If the theme includes a AJAX cart, you will need to include it on the theme.liquid file. Otherwise, it can be on used on cart.liquid:

{% include 'ws-checkout-script' %}

Change the json data in the page to that of wholesaler and force an update event so it shows correct pricing:

{% include 'ws-product-script' %}

In case the checkout script automatic detection doesn't work, you'll have to add this manual event handler in the checkout button:

{% unless not_wholesaler %}onclick="wholesaler.createCheckout(event)"{% endunless %}