# 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="/files/106f8jzPPEGYrQ09eI8K" 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="/files/wJIFxQbGbR6ZhUZA93yY" 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="/files/ExeRdAn6XwmiTtYOU56a" 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="/files/4IblnyeLkukFSTI5nlgj" 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="/files/1xgN3KFcHw3sfTiBdFVJ" 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="/files/GT55XuwreKZ2TsgFzXhK" 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="/files/aVcWDtHuWDXJbvo45jvp" 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="/files/qJlisJowv8IlJby5uiI7" 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 '';
    }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET 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?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.