# Attributes

{% hint style="info" %}
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). 
{% endhint %}

## Mechanism

The script will look for Discount Ninja [price sections](/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/attributes.md#price) 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-id` (or, in case the id is missing the `data-la-dn-product-handle`) is mandatory. It is highly recommended to include all attributes though. 

{% hint style="warning" %}
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.
{% endhint %}

## Markets

Including the `data-la-dn-product-id` attribute is essential to ensure compatibility when handles are translated using the Markets feature. Discount Ninja properly handles translated handles since February 2026.

## Snippet

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

```css
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

```html
<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

{% hint style="info" %}
All attributes must be prefixed `data-la-dn-product-`
{% endhint %}

<table><thead><tr><th width="239">Attribute</th><th width="183">Data type</th><th>Notes</th></tr></thead><tbody><tr><td><code>handle</code></td><td><code>string</code></td><td>The <a href="https://shopify.dev/docs/api/liquid/basics#handles">handle</a> of the product.</td></tr><tr><td><code>id</code></td><td><code>number</code></td><td>The ID of the product.</td></tr><tr><td><code>collection-handles</code></td><td><p><code>string |</code> </p><p><code>"[[--NONE--]]"</code></p></td><td>A comma-separated list of collection  <a href="https://shopify.dev/docs/api/liquid/basics#handles">handles</a> indicating which collections the product belongs to.<br>Use <code>[[--NONE--]]</code> if the product does not belong to any collections.</td></tr><tr><td><code>collection-ids</code></td><td><p><code>string |</code> </p><p><code>"[[--NONE--]]"</code></p></td><td>A comma-separated list of collection IDs indicating which collections the product belongs to.<br>Use <code>[[--NONE--]]</code> if the product does not belong to any collections.</td></tr><tr><td><code>available</code></td><td><code>boolean</code></td><td><code>true</code> if the variant is available. <code>false</code> if the variant is out of stock.</td></tr><tr><td><code>price</code></td><td><code>number</code></td><td>The price (in cents) of the first available variant of the product. This should align with the title and image displayed.</td></tr><tr><td><code>compare-at-price</code></td><td><code>number</code></td><td>The compare-at price (in cents) of the first available variant of the product. This should align with the title and image displayed.</td></tr><tr><td><code>price-varies</code></td><td><code>boolean</code></td><td><code>true</code> if the product includes variants with different prices. <code>false</code> if all variants have the same price.<br><br>If <code>price-varies</code> is true, the app uses the <code>price-min</code> instead of the <code>price</code>, unless a <code>variant</code> is specified.</td></tr><tr><td><code>compare-at-price-varies</code></td><td><code>boolean</code></td><td><code>true</code> if the product includes variants with different compare-at prices. <code>false</code> if all variants have the same compare-at price.<br><br>If <code>compare-at-price-varies</code> is true, the app assumes some variants have a compare-at price and others don't.</td></tr><tr><td><code>price-min</code></td><td><code>number</code></td><td>The lowest price (in cents) of any variants of the product. This price is displayed when <code>price-varies</code> is <code>true</code>.</td></tr><tr><td><code>tags</code></td><td><p><code>string |</code> </p><p><code>"[[--NONE--]]"</code></p></td><td>A comma-separated list of tags of the product.<br>Use <code>[[--NONE--]]</code> if the product does not have any tags.</td></tr><tr><td><code>variant</code></td><td><code>number</code></td><td>[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.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.discountninja.io/discount-ninja-developer-hub/theme-edits/code-edits/product-list-page-plp-and-collections/attributes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.