Attributes

The term collections is used to refer to collection pages (Product Listing Page or PLP) as well as lists of products displayed on any other page. For example, collections can be included on a home page or a Product Detail Page (PDP).

Mechanism

The script will look for Discount Ninja price sections on a page that are marked.

The script will then, for each price, find the HTML parent that includes data attributes. If data attributes are found, the product is assumed to be part of a collection.

The script can then apply strikethrough pricing to each of the products in the collection that it has detected.

Location

On collection pages, Discount Ninja needs information about the products that are rendered in the collection.

To provide the necessary context, add the data attributes to the element that spans:

  • The section that renders the collection product image

  • The section that renders the collection product price

Minimum requirement

The data-la-dn-product-handle is mandatory. It is highly recommended to include all attributes though.

The app executes a network request for every product that does not include all attributes, unless it can obtain the information through a different mechanism. This can impact the performance of the online store. It is therefore important to include all attributes to achieve optimal performance.

Snippet

Use the following snippet to add the data attributes in a Liquid template:

data-la-dn-product-handle="{{ product.handle }}" 
data-la-dn-product-id="{{ product.id }}" 
data-la-dn-product-collection-handles="{{ product.collections | map: 'handle' | join: ',' | default: '[[--NONE--]]' }}" 
data-la-dn-product-collection-ids="{{ product.collections | map: 'id' | join: ',' | default: '[[--NONE--]]' }}" 
data-la-dn-product-available="{{ product.available}}" 
data-la-dn-product-price="{{ product.first_available_variant.price | default: product.price }}"
data-la-dn-product-compare-at-price="{{ product.first_available_variant.compare_at_price | default: product.first_available_variant.price | default: product.compare_at_price | default: product.price }}" 
data-la-dn-product-price-varies="{{ product.price_varies }}" 
data-la-dn-product-compare-at-price-varies="{{ product.compare_at_price_varies }}"
data-la-dn-product-price-min="{{ product.price_min }}"
data-la-dn-product-tags="{{ product.tags | join: ',' | escape | default: '[[--NONE--]]' }}"

The attributes in the snippet make reference to a variable named product. For example {{ product.handle }}.

It is possible that the theme uses a different variable name, for example: product_item. If this is the case, you need to change all occurrences of the variable to the correct variable name, for example: {{ product_item.handle }}.

Example

<div class="collection-product"
    data-la-dn-product-handle="{{ product.handle }}" 
    data-la-dn-product-id="{{ product.id }}" 
    data-la-dn-product-collection-handles="{{ product.collections | map: 'handle' | join: ',' | default: '[[--NONE--]]' }}" 
    data-la-dn-product-collection-ids="{{ product.collections | map: 'id' | join: ',' | default: '[[--NONE--]]' }}" 
    data-la-dn-product-available="{{ product.available}}" 
    data-la-dn-product-price="{{ product.first_available_variant.price | default: product.price }}"
    data-la-dn-product-compare-at-price="{{ product.first_available_variant.compare_at_price | default: product.first_available_variant.price | default: product.compare_at_price | default: product.price }}" 
    data-la-dn-product-compare-at-price-varies="{{ product.compare_at_price_varies }}"
    data-la-dn-product-price-varies="{{ product.price_varies }}" 
    data-la-dn-product-price-min="{{ product.price_min }}"
    data-la-dn-product-tags="{{ product.tags | join: ',' | escape | default: '[[--NONE--]]' }}">
    <img ...>
    <div class="price" data-la-dn-price>
        <span class="money">{{ product.price }}</span>
        ...
    </div>
</div>

Attributes

All attributes must be prefixed data-la-dn-product-

Last updated