Skip to main content

Discount Ninja Promo Engine Integration Guide

Written by Thomas Ta

📖 Here is the guide for Discount Ninja Promo Engine Integration with Boost AI Search & Discovery app.


How to integrate Discount Ninja with Boost AI Search & Discovery

⚠️ The steps are different for each Boost version. To find out which version your store's current theme is installed with, follow Boost AI Search & Discovery app versions.

Select one of the options below for the app version your theme is installed with:

TURBO or V2.

TURBO

Step 1: Set up your Discount Ninja promotion

  1. In the Discount Ninja app, create or edit a Dynamic Pricing promotion.

  2. Make sure Show discounted prices on product and collection pages is checked.

  3. Make sure at least one promotion is active.

Step 2: Enable the Discount Ninja app embed

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme you want to integrate and click Customize.

  3. From the left sidebar, select App embeds.

  4. Find Discount Ninja and toggle it ON.

  5. Click Save.

⚠️ Do not skip this step. If the Discount Ninja app embed is not enabled, Discount Ninja's script does not load on your storefront at all, no matter what else you set up.

Step 3: Add the Discount Ninja attributes to your Boost theme

Go to Boost AI Search & Discovery > Integration > Shopify Integration > Select your preferred theme > Edit code.

3a. Locate the file product-item/main.liquid, find the element with the class boost-sd__product-item, and add the attributes below to that element:

{% assign laDnPriceVaries = false %}
{% if product.price_max and product.price_max != product.price_min %}
{% assign laDnPriceVaries = true %}
{% endif %}

<div
class='boost-sd__product-item ...'
id='{{ product.id }}'
data-product-id='{{ productId }}'
data-product='{{ productData | json_encode }}'
<!-- there are attributes need add to element -->
data-la-dn-product-handle='{{ product.handle }}'
data-la-dn-product-id='{{ product.id }}'
data-la-dn-product-price='{{ product.price_min }}'
data-la-dn-product-compare-at-price='{{ product.compare_at_price_min }}'
data-la-dn-product-price-varies='{{ laDnPriceVaries }}'
data-la-dn-product-tags='{{ product.tags | join: "," }}'
>

3b. Locate the file product-item/product-info.liquid, find the outer boost-sd__product-price div, the one wrapping {% render '../product-price/main.liquid' %}, and add a data-la-dn-price marker to it:

<div class="boost-sd__product-price" id="product-price-{{ product.id }}" data-la-dn-price>
<!-- entries code -->
</div>

⚠️ Use the outer div, not the inner -wrapper div inside the price partial. Depending on your compare-at price position setting, that inner wrapper only exists in one of the two layouts, while the outer div exists in both. The outer div is also the element Boost rewrites on every filter, sort and pagination change, so a marker placed there survives every re-render.

Step 4 (optional): Refresh pricing after page load

Recommended for reliability. This makes Discount Ninja re-scan prices right after the page loads, instead of depending on load-order timing between Boost's and Discount Ninja's scripts.

Locate the file customization.js and add the code below:

function refreshDiscountNinjaPricing() {
if (window.discountNinja && window.discountNinja.api && window.discountNinja.api.widgets) {
window.discountNinja.api.widgets.render();
}
}

window.addEventListener('load', refreshDiscountNinjaPricing);

// using for isw result
window.addEventListener('boost-sd-isw-rendered', () => {
initialDiscountNinja();
})

Click Save and you're set.

Check it worked

Open a collection page or run a search on your storefront. Your active Dynamic Pricing promotions should now show on Boost's product items the same way they do on your product pages: the discount badge, the original price struck through, and the discounted price.

V2

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme you'd like to integrate the app and click Actions (⋯) > Edit code

  3. In Asset folder, search for this file boost-pfs-filter.js. Then locate this line of code

productGridItemHtml

4. Copy and paste this code snippet into the function where you'd like it to be:

{% comment %} For boost-pfs-filter-html.liquid {% endcomment %}
<div class="product-item--price"
data-limoniapps-discounturl-product-handle="[[itemHandle]]"
data-limoniapps-discounturl-product-price="[[itemPriceMin]]"
data-limoniapps-discounturl-product-compareatprice="[[itemCompareAtPriceMax]]">
<span class="limoniapps-discount-url-productprice">[[itemPrice]]</span>
</div>

For example, under the product title:

Discount Ninja Integrate

If the variable <strong>productGridItemHtml</strong> does not exist in <strong>boost-pfs-filter.js</strong> , please find it in the file <strong>boost-pfs-filter-html.liquid</strong> and paste this code snippet instead:

Discount Ninja code

5. In boost-pfs-filter.js file, locate this line of code:

ProductGridItem.prototype.compileTemplate

6. Within the function ProductGridItem.prototype.compileTemplate, scroll down to locate this comment line:

// Add main attribute

7. Copy and paste this code snippet above the comment line:

var comparePrice = data.compare_at_price_max || 0;itemHtml = itemHtml.replace(/{{itemCompareAtPriceMax}}/g, comparePrice);itemHtml = itemHtml.replace(/{{itemHandle}}/g, data.handle);itemHtml = itemHtml.replace(/{{itemPriceMin}}/g, data.price_min);

8. Continue to locate this line of code:

Filter.prototype.afterRender

9. Copy and paste this code snippet into the function Filter.prototype.afterRender

if (typeof discountNinja != 'undefined' ) { discountNinja.DynamicPricing.UpdatePrice();}

10. Click Save and you're set!


Feel free to reach out to our dedicated support team via chat if you have any questions or require additional assistance.

Did this answer your question?