> For the complete documentation index, see [llms.txt](https://developers.discountninja.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.discountninja.io/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/price/boost-ai-search-and-filter-aka-pfs.md).

# 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](/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/badge.md) 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](#builddatatags-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:

```javascript
//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](/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/badge.md) where the collection badge should be displayed
* And `<span class="la-dn-price">…</span>` around the price section (if present), typically `{{itemPrice}}`

<figure><img src="https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2Fmo1F4wmSCy4nUcofZGj2%2Fimage.png?alt=media&amp;token=c3d65bdb-c971-4915-ab87-d3196f1d4f47" alt=""><figcaption><p>Mark price section</p></figcaption></figure>

* Add [this function](#builddatatags-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:

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

<figure><img src="https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2FREdIj3lqEq45PFYomfEC%2Fimage.png?alt=media&amp;token=8a7ee0db-744b-4d6c-a63e-dab75175d020" alt=""><figcaption><p>Add tags to HTML</p></figcaption></figure>

## 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](/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/badge.md) where the collection badge should be displayed
* And `<span class="la-dn-price">…</span>` around the price section (if present), typically `{{itemPrice}}`

<figure><img src="https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2FKm86d1BQCMK1APulChsp%2Fimage.png?alt=media&amp;token=8efdd054-79e6-4e06-91ed-1676318ae35a" alt=""><figcaption><p>Mark product price and tags</p></figcaption></figure>

### JavaScript

* Find the file `boost-pfs-filter.js`
* Add [this function](#builddatatags-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:

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

<figure><img src="https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2FrTme1riVNvawUnVqtlDc%2Fimage.png?alt=media&amp;token=d137cb68-eaff-4892-a7f9-b3ab685d8526" alt=""><figcaption><p>Add tags to HTML</p></figcaption></figure>

* Find the end of the `Filter.prototype.afterRender` function
* Add the following code:

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

<figure><img src="https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2FoTD7OXaROB8kGRLIK5WR%2Fimage.png?alt=media&amp;token=f1b2e725-4a4f-4696-9437-81a30b5f503a" alt=""><figcaption><p>Dispatch event</p></figcaption></figure>

### QuickView

* Find the `product.boost-pfs-quickview.liquid` file
* Add the following to the div with class boost-pfs-quickview-right product-details:

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

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

```html
limoniapps-discountninja-productprice limoniapps-discountninja-productprice-dynamic
```

* Below the block add the [product banner](/discount-ninja-developer-hub/theme-edits/code-edits/product-detail-page-pdp/banner.md)

### 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:

<figure><img src="https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2Fv4BxiRYwA7bJV1QmhRuQ%2Fimage.png?alt=media&amp;token=ea8469ca-0d2e-4cd5-aaa8-9af4d6dc4a59" alt=""><figcaption><p>Mixed mode</p></figcaption></figure>

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

<figure><img src="https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2FFRGv6hfgKTrSMLZe22Lc%2Fimage.png?alt=media&amp;token=5ba53fd2-7e58-4b9a-b8ba-b42634064529" alt=""><figcaption><p>Custom mode of PLP</p></figcaption></figure>

* 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`

<figure><img src="https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2F7q8U826i4Z20lDkyOC2G%2Fimage.png?alt=media&amp;token=99f2a35c-417a-4240-82aa-834fa237e8f9" alt=""><figcaption><p>CSS selectors</p></figcaption></figure>

## BuildDataTags function

```javascript
//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, "&quot;") : '';
        }
        else if (Array.isArray(tags)) {
            return tags.join(',').replace(/"/g, "&quot;");
        }
        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 '';
    }
}
```