This article applies to Discount Ninja version 3 and above
Find your cart template first. Not sure how to find or edit the file? Read this article first.
Required sections
Discount Ninja applies Dynamic Pricing if at least the following 2 elements are available:
Root
Subtotal price (only required for drawer cart)
[REQUIRED] Root
Find the root of the cart, which contains all cart lines and the subtotal. Add the class limoniapps-discountninja-cart-root to it. Typically this is the form tag.
Where you put this will be different for each theme. Here's one example:
Another example:
Product price
Note that the product price on a cart is different from the line price. The line price is the price of the product times its quantity.
Some themes show the product price on the cart, some do not. Look for a section that contains {{ item.price }}. The exact html varies per theme.
If your theme includes such a section, add a class limoniapps-discountninja-cart-item-product-price to the html element of that section as well as this data tag data-limoniapps-discountninja-cart-key="{{item.key}}".
Example:
<div class="other classes limoniapps-discountninja-cart-item-product-price" data-limoniapps-discountninja-cart-key="{{item.key}}">
... {{ item.price }} ...
</div>
[Optional] Cart text
You can add a section where the product banner will be displayed, typically this is placed below the title or the price. This banner can be defined per promotion and allows you to show on a cart which promotion is applied to which product (example: 20% off thanks to our winter promotion!). Discount Ninja looks for a section with the class limoniapps-discountninja-cart-item-product-comment and adds the comment at that location.
The markup for that section is as follows:
<div class="limoniapps-discountninja-cart-item-product-comment" data-limoniapps-discountninja-cart-key="{{item.key}}"></div>
Line price
Note that the product price on a cart is different from the line price. The line price is the price of the product times its quantity.
Some themes show the line price on the cart, some do not. Look for a section that contains {{ item.line_price }}. The exact html varies per theme.
If your theme includes such a section, add a class limoniapps-discountninja-cart-item-line-price to the html element of that section as well as this data tag data-limoniapps-discountninja-cart-key="{{item.key}}".
Example:
<div class="other classes limoniapps-discountninja-cart-item-line-price" data-limoniapps-discountninja-cart-key="{{item.key}}">
... {{ item.line_price }} ...
</div>
[Optional] Quantity
The app can, optionally, disable (or hide) the quantity spinner for gifts that are added to the cart by Discount Ninja. This can be configured via the menu in the app.
This allows you to avoid that visitors use the quantity buttons (- / +) to change the number of gifts they want to receive. Note that Discount Ninja double checks this at checkout and will charge customers if they add more gifts than your promotions allow for.
Find the quantity section. Add a class limoniapps-discountninja-cart-item-quantity to the html element of that section as well as this data tag data-limoniapps-discountninja-cart-key="{{item.key}}".
Example:
<div class="other classes limoniapps-discountninja-cart-item-quantity" data-limoniapps-discountninja-cart-key="{{item.key}}">
... {{ item.line_price }} ...
</div>
[REQUIRED for drawer cart] Subtotal price
Find the section that contains the subtotal. This section will include a reference to {{ cart.total_price }}. The exact html varies per theme.
The subtotal section needs a class limoniapps-discountninja-cart-subtotal-price.
Example:
<div class="other classes limoniapps-discountninja-cart-subtotal-price">
... {{ cart.total_price }} ...
</div>
Subtotal section
Find the section that contains the subtotal. This section will include the subtotal price (see above) and, typically, the word "Subtotal" or "Total". The exact html varies per theme.
To hide the subtotal section when the promotion summary is displayed, the subtotal section requires a class limoniapps-discountninja-cart-subtotal.
Example:
<div class="other classes limoniapps-discountninja-cart-subtotal">
... Total ...
<div class="other classes limoniapps-discountninja-cart-subtotal-price">
... {{ cart.total_price }} ...
</div>
</div>
[Optional] Cart promotion summary
You can add a section where the promotion summary will be displayed. This summary displays a header, footer and one line per offer applied to the cart. The text displayed can be defined in the settings of the app (example: Discount applied. 30% off!).
Discount Ninja looks for a section with the class limoniapps-discountninja-cart-promotionsummary and adds the comment at that location.
<span class="limoniapps-discountninja-cart-promotionsummary"></span>
Terms and Conditions Checkbox
If you have a "terms and conditions" checkbox, mark it with the class limoniapps-discountninja-checkout-checkbox to ensure Discount Ninja respects it.
You're typically looking for an input HTML element of type checkbox.
Example:
<input id="terms" type="checkbox" class="other classes limoniapps-discountninja-checkout-checkbox" value="I accept the terms and conditions">
For custom "terms and conditions" checkboxes that are added dynamically by apps the above approach may not work. In such cases, you can add the CSS selector to the flags file in your theme.
You'll need CSS skills to do this successfully.
Follow these steps:
Determine the CSS selector that uniquely selects the required checkbox input control. Example:
.my-widget input[type='checkbox']In your theme, find the limoniapps-discountninja-context-flags.liquid file
In this file, locate the MandatoryCheckboxes property
Add the CSS selector as the value for this property
Example:
MandatoryCheckboxes: ".my-widget input[type='checkbox']",
[Optional] Cart promotion code field
Add the following line to add the custom promotion code field to the cart (or drawer cart):
<div class="limoniapps-discountninja-cartdiscountfield-placeholder"></div>