Cart item
Is this required?
Without the edits described below, themes only display product and order discounts correctly on the cart page and drawer cart after a page refresh. This is because Shopify themes are typically not built to refresh the cart and drawer cart dynamically. Discount Ninja solves this problem, but requires the edits below to handle this correctly.
It is essential to set up the changes listed below to maximize the potential of the app and to optimize for conversion rate. Failure to set this up will result in inconsistent behavior that will confuse your customer.
Definition
A Shopify cart consists of one or more cart line items. Each cart item defines the quantity of a specific variant (optionally combined with a selling plan, discount and line item properties) a customer intends to check out.
Key
Each cart item has a unique key. The key is composed of two elements, separated by a colon:
variant: the variant of the product
hash: this hash value changes as one or more of the following change:
variant: the variant of the product
selling plan: if the customer wants to subscribe to receive regular deliveries of the product
line item properties: custom properties that can be added to the product
discount: the discounts that are applied to the cart server-side
Components
To render the correct prices, Discount Ninja needs to know where specific components of the line item can be found and what their key is. Specifically, the app needs the following information:
Key: the key that uniquely identifies the cart item
Item price: the location where the price per item of the variant is rendered
Quantity: the number of items
Line price: the location where the line price (the item price multiplied by the quantity) is rendered
Text: the location where customizable text is rendered; typically displayed under the title of the product
Cart item row
Snippet
Use the following snippet to add the required data attribute to the cart item row in a Liquid template:
Location
Add this snippet to the row (tr
) or element (div, ...
) that spans around a single cart item.
Variable name
Note that the variable name item
can be different in your theme. Check the for
loop to ensure you're using the correct variable name.
Item price
Snippet
Original item price
Use the following attribute to mark the section (or sections), inside the cart item row, that shows the original price for the product. This section should span the price and compare at price that would be rendered by the theme if Discount Ninja would not be enabled. This section is hidden when Discount Ninja shows a discounted price.
Discounted item price
Add the following snippet below the original price section. Do not embed it in the section since the original price section will be hidden. Discount Ninja will inject the discounted price in this section.
Quantity
Snippet
Use this attribute to mark the section (or sections), inside the cart item row, where the quantity is displayed. This helps the app to disable or hide the quantity controls (-, +, input to change quantity, delete button...) for gift products if the app is configured to do so.
Line price
Snippet
Original line price
Use the following attribute to mark the section (or sections), inside the cart item row, that shows the original line price for the product. This section should span the price and compare at price that would be rendered by the theme if Discount Ninja would not be enabled. This section is hidden when Discount Ninja shows a discounted price.
Discounted line price
Add the following snippet below the original price section. Do not embed it in the section since the original price section will be hidden. Discount Ninja will inject the discounted price in this section.
Text
Snippet
Add the following snippet below the title of the product in the cart item row. Discount Ninja injects text in this section if the offer that applies to the cart item is configured to do so.
Built-in product discounts
Snippet
Use the following attribute to hide the section (or sections), inside the cart item row, that render product discounts. This avoids that cart items render discounts twice, once from the built-in discounts and once from Discount Ninja.
Example
The following example shows how all the elements come together:
Hiding sections
Three attributes are available to hide sections in a cart item row conditionally:
Dynamic Pricing
Attribute
Use case
Add this attribute to the original price and line price sections of your theme. The app will hide these sections when a cart line item is discounted by Discount Ninja and Discount Ninja is rendering striketrough pricing.
Text
Attribute
Use case
Add this attribute to the built-in discount section of your theme. The app will hide this section when the line item is discounted by Discount Ninja and Discount Ninja is rendering text.
Discounted
Attribute
Use case
The app will hide sections with this attribute when the line item is discounted by Discount Ninja.
Last updated