Integration

The goal of the integration is to show discounted prices and collection badges on collection pages that are managed by Smart Product Filter & Search.

Skills required

This article assumes you are comfortable making changes to your theme's files. If that is not the case, please reach out to support to request help.

This integration requires technical skills. Specifically, the person implementing this integration must understand HTML, Liquid, and JavaScript.

Steps

The steps to take are different for each shop.

This is because the template for the collection page product will differ from shop to shop.

Apply the classes and data attributes as documented here. The steps below explain how the classes and data attributes can typically be implemented.

Step 1: Locate the relevant file

Depending on the version of the app, the file you need to modify may vary.

Typically the name of the file you are looking for is boost-pfs-filter.js

Step 2: Change the template

The file contains JavaScript that builds the HTML that renders a collection page product.

Step 2a: Price

You'll want to add the limoniapps-discountninja-productprice class to the price section (typically in the buildPricefunction).

Step 2b: Data tags

Add the data tags using the following syntax to the template declared in the boostPFSTemplate function:

data-limoniapps-discountninja-product-handle="{{itemHandle}}" data-limoniapps-discountninja-product-collections="{{itemCollections}}" data-limoniapps-discountninja-product-available="{{itemAvailable}}" data-limoniapps-discountninja-product-price="{{itemPrice}}" data-limoniapps-discountninja-product-compareatprice="{{itemCompareAtPriceMax}}" data-limoniapps-discountninja-product-pricevaries="{{itemPriceVaries}}" data-limoniapps-discountninja-product-pricemin="{{itemPriceMin}}" data-limoniapps-discountninja-product-tags="{{itemTags}}"

Step 2c: Collection badge

Optionally, add a marker for the area where the collection badge can be displayed. This is typically placed on the image of the collection product. Add the following class: limoniapps-discountninja-collectionbadge.

Step 3: Declare the variables

In the prepareShopifyData function add the following before the return data; statement at the end:

//Buid the collectionHandles variable used by Discount Ninja
data.collectionHandles = data.collections == null ? '' : data.collections.map(function(collection) { return collection.handle }).join(',');

Step 4: Replace the variables

In the compileTemplate function, add the following before the return itemHtml; statement at the end:

// Replace variables used by Discount Ninja
itemHtml = itemHtml.replace(/{{itemHandle}}/g, data.handle);
itemHtml = itemHtml.replace(/{{itemCollections}}/g, data.collectionHandles);
itemHtml = itemHtml.replace(/{{itemAvailable}}/g, data.available);
itemHtml = itemHtml.replace(/{{itemPrice}}/g, data.price_min * 100);
itemHtml = itemHtml.replace(/{{itemCompareAtPriceMax}}/g, (data.compare_at_price_max || data.price_min) * 100);      
itemHtml = itemHtml.replace(/{{itemPriceVaries}}/g, data.price_varies);
itemHtml = itemHtml.replace(/{{itemPriceMin}}/g, data.price_min * 100);
itemHtml = itemHtml.replace(/{{itemTags}}/g, data.tags);