Pagination

Standard pagination

Standard pagination is a technique used to break down a large dataset into smaller, manageable "pages" of content, each accessible by a unique URL or link. Users can navigate through these pages one at a time, typically using "Previous" and "Next" buttons or numbered page links at the bottom of the page.

Discount Ninja automatically detects pagination and applies strikethrough pricing when users navigate to the next page.

Infinite scrolling

In infinite scrolling, additional content loads dynamically as the user scrolls down the page, rather than navigating through paginated sections or pressing a button. This creates a seamless experience by continuously appending data to the page without requiring user intervention.

To ensure strikethrough pricing is applied when new products are added to the PLP in this way, JavaScript is required. The Collection products updated event is used to communicate to the app that strikethrough pricing needs to be applied to the added products.

Example

function myInfiniteScrolling() {
    // Original logic
    ... fetch products
    ... render products
    
    // Inform Discount Ninja that new products have been added
    // Publish this event after the products have rendered
    document.dispatchEvent(new CustomEvent('la:dn:collection:updated'));
}

Load more pagination

However, when content is loaded only after pressing a button, it's often called "load more" pagination. While similar to infinite scrolling, it requires an explicit user action to trigger the next batch of content, rather than loading it automatically.

To ensure strikethrough pricing is applied when new products are added to the PLP in this way, you must mark the button with the data-la-dn-loadmore attribute.

Snippet

Use the following attribute to mark a "load more" button:

data-la-dn-loadmore

Example

<button id="loadMoreBtn" data-la-dn-loadmore>Load More</button>