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 components

Cart item row

Snippet

Use the following snippet to add the required data attribute to the cart item row in a Liquid template:

data-la-dn-cart-item-row data-la-dn-cart-item-key="{{ item.key }}"

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.

data-la-dn-cart-item-hide-ifdiscounted

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.

<span data-la-dn-cart-item-product-price></span>

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.

data-la-dn-cart-item-quantity

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.

data-la-dn-cart-item-hide-ifdiscounted

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.

<span data-la-dn-cart-item-line-price></span>

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.

<div data-la-dn-cart-item-text></div>

Built-in 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 using the built-in discounts and once using Discount Ninja.

data-la-dn-cart-item-hide-ifdiscounted

Example

The following example shows how all the elements come together:

{%- for item in cart.items %-}
  {%- comment -%}Marked as row{%- endcomment -%}
  <div data-la-dn-cart-item-row data-la-dn-cart-item-key="{{ item.key }}">
    ... title
    ... vendor
    
    {%- for property in item.properties -%}
      ... line item properties
    {%- endfor -%}
    
    {%- comment -%}Cart text{%- endcomment -%}
    <div data-la-dn-cart-item-text></div>		
    
    {%- comment -%}Original item price{%- endcomment -%}
    <span data-la-dn-cart-item-hide-if-isdiscounted>
      {%- if item.original_line_price != item.final_line_price -%}
        <s>{{- item.original_price | money -}}</s>{{ item.final_price | money }}
      {%- else -%} 
        {{- item.original_price | money -}}
      {%- endif -%}
    </span>
    
    {%- comment -%}Discounted item price{%- endcomment -%}
    <div data-la-dn-cart-item-product-price></div>
    
    <span data-la-dn-cart-item-quantity>
      {{ item.quantity }}
    </span>
    
    {%- comment -%}Original line price (2 sections){%- endcomment -%}
    {%- if item.original_line_price != item.final_line_price -%}
      <span data-la-dn-cart-item-hide-if-isdiscounted>
        <s>{{ item.original_line_price | money }}</s>{{ item.final_line_price | money }}
      </span>
    {%- else -%} 
      <span data-la-dn-cart-item-hide-if-isdiscounted>
        {{ item.original_line_price | money }}
      </span>
    {%- endif -%}
    
    {%- comment -%}Discounted line price{%- endcomment -%}
    <div data-la-dn-cart-item-line-price></div>
    
    {%- comment -%}Built-in discounts{%- endcomment -%}
    {%- for discount in item.discounts -%}
      <li class="discounts__discount" data-la-dn-cart-item-hide-ifdiscounted>
        {%- render 'icon-discount' -%}
        {{ discount.title }}
      </li>
    {%- endfor -%}
  </div>
{%- endfor -%}