Pagination container

The Pagination container shows page controls for a product review list. It uses the SDK Pagination component and handles page selection without extra click handlers.

Use the same scope for Review, Pagination, and the initial getProductReviews request. When a shopper selects another page, Pagination requests it with the original SKU, page size, and scope. Both containers update from the resulting reviews/* events.

Configurations

Use these options to configure Pagination:

Option	Type	Req?	Description
scope	string	No	Identifies which review events the container receives. Use the same value as the `Review` container and `getProductReviews`.
disabled	boolean	No	Disables the page controls without making a request. Defaults to `false`.
onPageChange	function	No	Callback that receives the selected page number before the container requests that page. Use it for analytics or URL updates, not to request the page again.
slots	object	No	Replaces or extends the page controls and the loading skeleton. See [Pagination slots](/dropins/ratings-reviews/slots/#pagination-slots).
aria-label	string	No	Name that screen readers use for the page navigation. Defaults to the `Pagination.label` dictionary value, *Review pagination*.

The container also accepts standard div attributes, such as className and dir.

Behavior

Situation	What shoppers see
No request has started yet	Nothing.
The first page of a product is loading	A single placeholder row and the hidden status message Loading review pages…, which is available to screen readers.
The product has no reviews or only one page of reviews	Nothing. An empty, hidden wrapper stays in the page so the controls can reappear without recreating the container.
The product has more than one page	Page controls with the current page selected.
Another page is loading	The current controls, disabled until the page loads.
A page request fails	The previous controls, enabled again. The Review container shows the error and a Try again button.
The requested page no longer exists	This review page is no longer available. and a Return to the first page button.
Reviews are turned off for the store	Nothing.

When loading finishes, the container tries to return keyboard focus to the control the shopper used, but only if focus has moved to the document body. It leaves focus on other elements unchanged.

In right-to-left layouts, the arrow icons point in the reading direction.

Example

This example displays Review and Pagination with the same scope and requests the first page of reviews. It uses the initializer from the Ratings and Reviews quick start:

blocks/product-reviews/product-reviews.js

import { getProductReviews } from '@dropins/storefront-ratings-reviews/api.js';
import { render as provider } from '@dropins/storefront-ratings-reviews/render.js';
import { Review } from '@dropins/storefront-ratings-reviews/containers/Review.js';
import { Pagination } from '@dropins/storefront-ratings-reviews/containers/Pagination.js';
import '../../scripts/initializers/ratings-reviews.js';

export default async function decorate(block) {
  // The same scope connects both containers and the request.
  const scope = 'product-reviews';
  const $reviews = document.createElement('div');
  const $pagination = document.createElement('div');
  block.append($reviews, $pagination);

  await Promise.all([
    provider.render(Review, { scope })($reviews),
    provider.render(Pagination, {
      scope,
      // Notification only: the container requests the page itself.
      onPageChange: (page) => console.log(`Shopper selected review page ${page}`),
    })($pagination),
  ]);

  // Replace ADB102 with your product SKU.
  getProductReviews('ADB102', { pageSize: 20, currentPage: 1, scope }).catch(() => undefined);
}

Replace ADB102 with the product SKU whose reviews you want to show.

• The shared scope connects both containers to the same review events.
• The initial request loads page one with up to 20 reviews. Pagination requests other pages when the shopper selects them.
• The onPageChange callback logs the selected page number. It does not need to request the page.

Changing the product or page size

To show a different product or page size, call getProductReviews again with the same scope and currentPage: 1. The container clears the old page controls when the SKU or page size changes.