Collection 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 page (Product Detail Page).

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. 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-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-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-

Attribute	Data type	Notes
handle	string	The handle of the product.
id	number	The ID of the product.
collection-handles	string | "[[--NONE--]]"	A comma-separated list of collection handles indicating which collections the product belongs to. Use [[--NONE--]] if the product does not belong to any collections.
collection-ids	string | "[[--NONE--]]"	A comma-separated list of collection IDs indicating which collections the product belongs to. Use [[--NONE--]] if the product does not belong to any collections.
available	boolean	true if the variant is available. false if the variant is out of stock.
price	number	The price (in cents) of the first available variant of the product. This should align with the title and image displayed.
compare-at-price	number	The compare-at price (in cents) of the first available variant of the product. This should align with the title and image displayed.
price-varies	boolean	true if the product includes variants with different prices. false if all variants have the same price. If price-varies is true, the app uses the price-min instead of the price, unless a variant is specified.
price-min	number	The lowest price (in cents) of any variants of the product. This price is displayed when price-varies is true.
tags	string | "[[--NONE--]]"	A comma-separated list of tags of the product. Use [[--NONE--]] if the product does not have any tags.
variant	number	[Optional] The id of the variant in this attribute. If omitted the price of the first available or lowest priced variant is used. See the section on variant price.