Share this guide with your developer team to ensure Sublytics code remains in tact throughout any other site changes.
In this Article
Checkout
The sublytics app uses JavaScript to automatically redirect the customer to the sublytics checkout page.
We listen for clicks on the checkout buttons, and if the checkout is activated and only allowed products are present in the cart, we will do an api call to our servers to generate the cart, and redirect the customer.
Here is the JS file that is used https://demo.sublytics.com/shopify_app/script?shop=vriodemo.myshopify.com.
*Buy now button: In the buy now button is use on a product page, we check if present on page load and we replace it with our buy now button.
Theme modifications:
To make this more efficient we have a snippet that can be loaded directly into the layout/theme.liquid in order to load our JS file on every page. (When not present in theme.liquid, we have a scriptTag setup with shopify to load our script)
The snippet is called snippets/sublytics_app_theme.liquid and can be created automatically from the sublytics app admin page, under Theme Files setup > Update the theme files.
Code to include our snippet (in theme.liquid):
1 {% comment %} ######SUBLYTICS######{% endcomment %}
2 {% include 'sublytics_app_theme' %}
3 {% comment %} ######SUBLYTICS######{% endcomment %}Product Page
In order to be able to use our custom product templates. We need a sub-template setup on the product template: <div class='sub-template'></div>.
When syncing items from sublytics to Shopify, we automatically edit the Shopify product template (in order to apply that).
Theme modifications:
We created a new product template templates/product.sub-product.liquid for that, based on the current templates present. This one includes sections/sub-product-template.liquid and snippets/sub-product-form.liquid. The last one if where the .sub-template div was added.
Price Updating:
If you also want to automatically change the price displayed when changing the offer within one of the template, you can add a class sub-template-price on each element controlling the price, and the JS script will update when change the offer.
Custom Template - to show Offers information on a Shopify product page
It is also possible to implement your own template. When syncing an item to Shopify, we setup custom metafields on the Shopify products under global.offers. You can then use those metafields on your product page to display the offers options available for this product.
Example to go over the offers:
1 {% for o in product.metafields.global.offers.data %}
2 {{ o.id }}
3 {{ o.price }}
4 {% endfor %}
Data structure:
1{
2 "onetime": Array of the onetime offers ids,
3 "recurring": Array of recurring offers ids,
4 "data": Array of the offers with
5 "id" : offer id
6 "title": offer title
7 "type": offer type (onetime or recurring)
8 "price": offer price
9 "discounts": Array of the discounts quantities setup for that offer
10 "id": discount id
11 "name": discount name
12 "type": discount type (percentage or flat)
13 "value": discount value
14 "weight": discount quantity
15 ]
16 }]
17 }
Data example:
1{
2 "onetime": [3],
3 "recurring": [1, 2],
4 "data": [{
5 "id": 1,
6 "title": "Offer title",
7 "type": "recurring"
8 "price": "12.00",
9 "discounts": [{
10 "id": 21,
11 "name": "discount 1",
12 "type": "percentage",
13 "value": 20,
14 "weight":
15 ]
16 }]
17}
In order to select the right offer when redirecting to the checkout, you need to pass a specific property called _offer_id along with the item when adding the product to the cart.
An solution would be to have a field named properties[_offer_id] in your product page form.
Cart Page
You need to make some updates to your cart template in order to show the right Sublytics information (offer name and price). This is mainly required if you have several offers associated with the same item in your Sublytics setup.
Automated Setup
You can use the Generate the cart template button available on the Sublytics App to generate a new cart template based on of the sections/cart-template.liquid one. You should then have a new section created called sections/sub-cart-template.liquid and you just have to modify your cart template to include that instead of the cart-template file.
In templates/cart.liquid replace {% section 'cart-template' %} with {% section 'sub-cart-template' %}.
Manual Setup
If you are using a different cart template or want to customize it, you can modify your cart manually.
The sublytics product template uses extra items fields to pass more information when adding a product to the cart. You can use that to to update you cart template.
The fields setup on the cart item are:
_offer_id_offer_price_offer_name
Here is an example of how to use those properties
1. {% assign total_price = 0 %}
2{%- for item in cart.items -%}
3 {% assign item_title = item.product.title %}
4 {% assign item_price = item.total_price %}
5 {% for p in item.properties %}
6 {% if p.first == "_offer_price" %}
7 {% assign item_price = p.last | times : 100 %}
8 {% endif %} 9 {% if p.last =="_offer_name" %}
10 {% assign item_title = p.last %}
11 {% endif %} 12 {% endfor %}
13 {% assign item_line_price = item_price | times : item.quantity %}
14 {% assign total_price = total_price | plus: item_line_price %}
15{%- end -%}
It sets up some new variables in your template:
-
item_title : the offer title
-
item_price : for the offer price
-
item_line_price : item_price * quantity
-
total_price : the total price of your cart.
You can then use those values where you need in the cart template.
In you also need to hide those extra properties from the template, you can refer to this documentation - 
Cart API reference
Customer portal
For the customer portal, the sublytics app uses the following app proxy: /a/_sub_.
To load it up for a specific you need to pass some custom parameters to that url. We have setup a snippet to help you do that. The snippet is called snippets/customer_token.liquid and can be created automatically from the sublytics app admin page, under Theme Files setup > Update the theme files.
You can then use it this way to generate the portal link:
"/a/_sub_/account?{% include 'customer_token' %}"