Commmerce Docs
← Web Components

Web Components · Product

<mmm-product-pagination>

Page-number, page-size, and load-more pagination control. Reads totals from window.PRODUCT_RESPONSE_*.pagination; clicking a page or changing the per-page limit updates the URL, triggering an SSR re-render of the product list.

Overview

URL-driven, like the filter component. The data attribute usually points to {{window.PRODUCT_RESPONSE_KEY.pagination}}, whose shape is { page, pageSize, total, totalPages }. Clicking next / prev / a page number rewrites the relevant query params and lets SSR handle the rest. A secondary per-page select uses limit-options to populate its choices.

When to use

  • At the bottom of a collection or search-result grid.
  • For SEO-critical listings — URL-based pagination is fully indexable.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-data-source api="product.getProductList" response-key="grid" payload-page-size="24">
  <mmm-loop data="{{window.PRODUCT_RESPONSE_GRID.products}}">
    <mmm-product-card data-product="{{item}}"></mmm-product-card>
  </mmm-loop>
  <mmm-product-pagination data="{{window.PRODUCT_RESPONSE_GRID.pagination}}" limit-options="12,24,48"></mmm-product-pagination>
</mmm-data-source>

Attributes

AttributeTypeDefaultDescription
dataJSON / template—Pagination payload — { page, pageSize, total, totalPages }. Usually wired via {{window.PRODUCT_RESPONSE_*.pagination}}.
limit-optionsstring12,24,48Comma-separated list of per-page choices for the size dropdown.
active-colorstringtheme accentBackground colour of the active page button.
border-colorstringtheme borderBorder colour of inactive page buttons and the size select.

Live preview

store sample-store tag <mmm-product-pagination>

Without an SSR-provided data payload, the control renders empty.

Examples

1. Standard wiring

<mmm-product-pagination data="{{window.PRODUCT_RESPONSE_GRID.pagination}}"></mmm-product-pagination>

2. Custom per-page options + dark theme

<mmm-product-pagination
  data="{{window.PRODUCT_RESPONSE_GRID.pagination}}"
  limit-options="20,40,80,120"
  active-color="#c8a8ff"
  border-color="#2a2e33">
</mmm-product-pagination>

3. Fixed per-page (no size select)

<mmm-product-pagination
  data="{{window.PRODUCT_RESPONSE_GRID.pagination}}"
  limit-options="">
</mmm-product-pagination>

Pass an empty limit-options to hide the page-size dropdown entirely.