← Web Components

Web Components · Product

<mmm-product-pagination>

Numbered pagination with a per-page size selector. Reads the total-items count from window.PRODUCT_RESPONSE_*.total_products; clicking a page or changing the per-page limit updates the URL (?page= / ?limit=), 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.total_products}} — the current page and per-page limit come from the URL's ?page= and ?limit=. Clicking Prev / Next / a page number rewrites ?page= 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.total_products}}" limit-options="12,24,48"></mmm-product-pagination>
</mmm-data-source>

Attributes

AttributeTypeDefaultDescription
dataJSON / template—Total-items count, usually wired via {{window.PRODUCT_RESPONSE_*.total_products}}. Component also infers the response var from the parent <mmm-data-source> if data is omitted.
limit-optionsstring12,24,36,48Comma-separated list of per-page choices for the size dropdown.
active-colorstringtheme primary text / #000Background colour of the active page button.
border-colorstring#d0d0d0Border 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.total_products}}"></mmm-product-pagination>

2. Custom per-page options + dark theme

<mmm-product-pagination
  data="{{window.PRODUCT_RESPONSE_GRID.total_products}}"
  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.total_products}}"
  limit-options="">
</mmm-product-pagination>

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