Boost AI Search & Filter (aka PFS)

Version 0

• Find the file bc-sf-filter.js

• Find the var bcSfFilterTemplate variable.

• Add {{discountNinjaDataTags}} where the data tags should be placed

• And add the collection badge class where the collection badge should be displayed

• And <span class="la-dn-price">…</span> around the price section (if present), typically {{itemPrice}}

• Add this function before the BCSfFilter.prototype.buildProductGridItem function.

  • IMPORTANT: prices will be multiplied by 100

  • Avoid this by making the following change in the function: change var pricesAreCents = false; to var pricesAreCents = true;

• Before the end of each of the BCSfFilter.prototype.buildProductGridItem function, add the following code:

//Discount Ninja integration       
itemHtml = itemHtml.replace(/{{discountNinjaDataTags}}/g, buildDiscountNinjaDataTags(data));

Version 1

HTML Template

See V2

JavaScript

• Find the file boost-pfs-filter.js

• Find the var boostPFSTemplate variable.

• Add {{discountNinjaDataTags}} where the data tags should be placed

• And add the collection badge class where the collection badge should be displayed

• And <span class="la-dn-price">…</span> around the price section (if present), typically {{itemPrice}}

Mark price section

• Add this function before the compileTemplate functions.

• Before the end of each of the compileTemplate functions for the gridView (ProductListItem.prototype.compileTemplate) and the listView (ProductGridItem.prototype.compileTemplate), add the following code:

//Discount Ninja integration       
itemHtml = itemHtml.replace(/{{discountNinjaDataTags}}/g, buildDiscountNinjaDataTags(data));

Add tags to HTML

Version 2

HTML Template

• Find the file boost-pfs-filter-html.liquid

• Find the productGridItemHtml and productListItemHtml sections

• Add {{discountNinjaDataTags}} where the data tags should be placed

• And add the collection badge class where the collection badge should be displayed

• And <span class="la-dn-price">…</span> around the price section (if present), typically {{itemPrice}}

Mark product price and tags

JavaScript

• Find the file boost-pfs-filter.js

• Add this function before the compileTemplate functions. (under “BUILD PRODUCT LIST”)

• Before the end of each of the compileTemplate functions for the gridView (ProductListItem.prototype.compileTemplate) and the listView (ProductGridItem.prototype.compileTemplate), add the following code:

//Discount Ninja integration       
itemHtml = itemHtml.replace(/{{discountNinjaDataTags}}/g, buildDiscountNinjaDataTags(data));

Add tags to HTML

• Find the end of the Filter.prototype.afterRender function

• Add the following code:

//Discount Ninja integration 
document.dispatchEvent(new CustomEvent('la:dn:collection:productsadded'));

Dispatch event

QuickView

• Find the product.boost-pfs-quickview.liquid file

• Add the following to the div with class boost-pfs-quickview-right product-details:

data-la-dn-product-handle="{{ product.handle }}" data-la-dn-product-quickview

• Add the following to the div with class boost-pfs-quickview-price

limoniapps-discountninja-productprice limoniapps-discountninja-productprice-dynamic

• Below the block add the product banner

Search suggestions

Currently not supported. No template in Liquid files.

Version 3

With Version 3 the app doesn’t add any assets to the theme so we’ll have to use the CSS selectors approach.

• Go to Discount ninja > Settings > Dynamic pricing > Theme Configuration and enable Mix mode:

Mixed mode

• It’ll unlock the second tab ‘ Live Theme ‘, go to this tab and enable ‘Custom’ option for Collection pages

Custom mode of PLP

• Now go to Collection page and enable ‘Custom CSS selector’ and add the following classes:

  • Price (desktop) : [[WRAP]].boost-sd__product-price-wrapper, .boost-sd__suggestion-queries-item-price

  • Card: .boost-sd__product-item, .boost-sd__suggestion-queries-item

  • Handle: [[HANDLE:href]]a.boost-sd__product-link

CSS selectors

BuildDataTags function

//Discount Ninja integration
function buildDiscountNinjaDataTags(data) {
    function buildTags(tags) {
      try {
        if (typeof tags === 'undefined' || tags === null) return '';
        
        if (typeof tags === 'string') {
            return tags ? tags.replace(/"/g, """) : '';
        }
        else if (Array.isArray(tags)) {
            return tags.join(',').replace(/"/g, """);
        }
        else {
            console.error('Boost PFS buildTags failed, unexpected data type of tags', e);
            return '';
        }
      }
      catch(e) {
          console.error('Boost PFS buildTags failed', e);
          return '';
      }  
    }
  
    try {
        var pricesAreCents = false;
        var pricesMultiplicator = pricesAreCents ? 1 : 100;    
        var discountNinjaItemHandle = data.handle;
        var discountNinjaItemCollectionHandles = '';
        var discountNinjaItemCollectionIds = '';
        if (data.collections && data.collections.length > 0) {
          for (var i = 0; i < data.collections.length; i++) {
              discountNinjaItemCollectionHandles += data.collections[i].handle + ","; 
              discountNinjaItemCollectionIds += data.collections[i].id + ","; 
          }
        }
        var discountNinjaItemAvailable = data.available;
        var firstAvailableVariant = null;
        for (var i = 0; i < data.variants.length; i++) {
            var variant = data.variants[i];
            if (variant.available) {
               firstAvailableVariant = variant;
               break;
            }
        }
        if (firstAvailableVariant === null) firstAvailableVariant = data.variants[0];
        var discountNinjaItemPrice = firstAvailableVariant && firstAvailableVariant.price > 0 ? firstAvailableVariant.price * pricesMultiplicator : 0;
        var discountNinjaItemCompareAtPrice = firstAvailableVariant && firstAvailableVariant.compare_at_price > 0 ? firstAvailableVariant.compare_at_price * pricesMultiplicator : 0;
        var discountNinjaItemPriceVaries = data.price_min != data.price_max;
        var discountNinjaItemPriceMin = data.price_min ? data.price_min * pricesMultiplicator : 0;
        var discountNinjaItemTags = buildTags(data.tags);
        return 'data-limoniapps-discountninja-product-handle="' + discountNinjaItemHandle + '" data-limoniapps-discountninja-product-collections="' + discountNinjaItemCollectionHandles + '" data-limoniapps-discountninja-product-collectionids="' + discountNinjaItemCollectionIds + '" data-limoniapps-discountninja-product-available="' + discountNinjaItemAvailable + '" data-limoniapps-discountninja-product-price="' + discountNinjaItemPrice + '" data-limoniapps-discountninja-product-compareatprice="' + discountNinjaItemCompareAtPrice + '" data-limoniapps-discountninja-product-pricevaries="' + discountNinjaItemPriceVaries + '" data-limoniapps-discountninja-product-pricemin="' + discountNinjaItemPriceMin + '" data-limoniapps-discountninja-product-tags="' + discountNinjaItemTags + '"';
    }
    catch(e) {
    	console.error('Boost PFS buildDiscountNinjaDataTags failed', e);
        return '';
    }
}