Discount Ninja
  • Discount Ninja Developer Hub
    • Storefront API
      • Promotion Engine
        • Enable
        • JavaScript API
          • Functions
          • Events
          • Objects
      • Widgets
        • Guiding principles
          • Accessibility
          • Localization
          • Integration
          • Style
        • Announcement Bar
        • Notification
        • Offer Rules Popup
        • Product Banner
        • Promotion Summary
        • Promotion Code Field
        • Promotional Badge
    • Integration
    • Theme edits
      • App blocks
        • Product Page Banner
        • Promo Code Field
        • Promotion Summary
      • Code edits
        • Product Detail Page (PDP)
          • Price
          • Banner
          • Badge
        • Product List Page (PLP) and Collections
          • Attributes
          • Price
            • Searchanise Search & Filter
            • Globo Smart Product Filter & Search (aka SPF)
            • AI Search & Product Filter (Ultimate Search)
            • Boost AI Search & Filter (aka PFS)
          • Badge
          • Pagination
          • Quick View
        • Cart
          • Root
          • Cart item
          • Promo Code Field
          • Promotion Summary
          • Subtotal
        • Gift With Purchase
Powered by GitBook
On this page
  • Requirements
  • Data attributes
  • Mechanism
  • Location
  • Snippet
  • Example
  • Style
  • Variant price
  • Variants with different prices
  • Unavailable products
  • Limitations
  • Integrations with other apps

Was this helpful?

  1. Discount Ninja Developer Hub
  2. Theme edits
  3. Code edits
  4. Product List Page (PLP) and Collections

Price

PreviousAttributesNextSearchanise Search & Filter

Last updated 7 months ago

Was this helpful?

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

Requirements

To show strikethrough pricing and/or badges in collections, you must edit the theme to ensure that each product in a collection has:

  • a price that is marked

Data attributes

Displaying strikethrough pricing for products in a collection requires that data attributes are configured. Read to learn how to set up the required data attributes.

Mechanism

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

The script will then, for each price, find the HTML parent that includes . 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

Place the la-dn-price attribute on the HTML element that spans all of the following:

  • The section of the theme that renders the standard price of the variant when the variant is not on sale (i.e. the variant does not have a compare-at price in Shopify)

  • The section of the theme that renders the discounted price of the variant when the variant is on sale (i.e. the variant has a compare-at price in Shopify)

And, if applicable:

  • The “Sold out” text displayed if the variant is out of stock

  • The “Sale” badges displayed if the variant has a compare at price

Ensure the attribute class is not placed on a section that renders HTML that is not related to the price, such as:

  • Review widgets

  • Installments

since all content in the section with the above attribute is replaced with the discounted price when the variant is discounted through Discount Ninja.

Snippet

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

data-la-dn-price

Example

<div class="price" data-la-dn-price>
    ...
    <span class="money">{{ product.price }}</span>
    <s class="money">{{ product.compare_at_price }}</s>
    ...
</div>

Style

The style (font, color, size) as well as the format (strikethrough or not, price first or compare-at price first...) can be configured in the app.

In the menu go to Settings > Dynamic Pricing > Price format.

Variant price

By default the price of the first available variant is used. The lowest price variant is used instead when the data-la-dn-product-price-varies attribute is set to true.

To use the price of a different variant:

  • set the price and compare-at-price attributes to the values of the variant you want to display prices for

  • alternatively, provide the id of the variant in the data-la-dn-product-variant attribute. The app will then override the price and compare-at-price with the price of the variant.

Variants with different prices

When products have variants with different prices, the price-varies attribute should be set to true. This causes the app to show the price of the product as follows "From price-min" where price-min is the lowest price of any variants of the product (example: from $25.95) . This behavior can be disabled in the app. The "from" label can also be changed or translated in the app.

Unavailable products

If the selected product variant is unavailable, the available attribute should be set to false. This causes the app to show a "Sold out" label. This behavior can be disabled in the app. The "sold out" label can also be changed or translated in the app.

Limitations

  • The collection price shows a single price per product (by default the price of the variant with the lowest price). The app cannot display a price per variant on the collection page. Variants with different prices are supported on product pages.

  • The app does not support:

    • The concept of “Unit price” (discounted prices cannot be displayed for unit prices)

    • Different prices for products per Market

Integrations with other apps

The following articles provide details for the apps that Discount Ninja integrates with:

Discount Ninja can render strikethrough pricing on collections that are managed by other apps. See for more information.

(formerly known as PFS)

r (SPF)

(Ultimate Search)

Boost AI Search & Filter
Searchanise Search & Filter
Globo Smart Search & Product Filte
AI Search & Product Filter
data attributes
this article
this article
data attributes