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 placedAnd 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;
tovar pricesAreCents = true;
Before the end of each of the
BCSfFilter.prototype.buildProductGridItem
function, add the following code:
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 placedAnd 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
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:
Version 2
HTML Template
Find the file
boost-pfs-filter-html.liquid
Find the
productGridItemHtml
andproductListItemHtml
sectionsAdd
{{discountNinjaDataTags}}
where the data tags should be placedAnd 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}}
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:
Find the end of the
Filter.prototype.afterRender
functionAdd the following code:
QuickView
Find the
product.boost-pfs-quickview.liquid
fileAdd the following to the div with class boost-pfs-quickview-right product-details:
Add the following to the div with class boost-pfs-quickview-price
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:
It’ll unlock the second tab ‘ Live Theme ‘, go to this tab and enable ‘Custom’ option for Collection pages
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
BuildDataTags function
Last updated