Skip to main content
The <ws-pagination> component provides a paging feature that lets users navigate between different pages of the search results or category.

​
Requirements

  • The pagination feature depends on the settings of the <ws-page-size-selector> component.
  • Pagination is only displayed when the default value or the value chosen by the user for the number of displayed results per page is smaller than the total number of search results.

​
Component

​
Classic paging navigation

The component can be embedded as follows on the category and search result page:
  • max-pages: Specifies how many page numbers are displayed at the same time.
  • source: Specifies the source index. Possible values are product, category, and content. Links the pagination with the corresponding <ws-search-result>.
  • slot: Separator. Displays a new slot as a visual separator for first/prev and next/last.
  • show-page-number: Displays the page number in the button instead of the text (for slot="first" & slot="last").
  • show-with: Separator visibility – only displayed if the slot given here is visible and contains first and/or last.
Slots:
  • prev: Button for the previous page (<).
  • current: Displays the current page (highlighted / 4).
  • first: Displays the first page (1).
  • last: Displays the last page (108).
  • next: Button for the next page (>).

​
Multiple search result sources with their own pagination

When a page embeds several <ws-search-result> instances with different sources (e.g. products and categories), each instance gets its own <ws-pagination> and its own <ws-page-size-selector>. The mapping is done via the source attribute. Example:
The source value must be the same in <ws-search-result>, <ws-pagination>, and <ws-page-size-selector> so that the components communicate with each other correctly.

​
Load more button or infinite scrolling

When a “Load more” button or infinite scrolling is used instead of classic page navigation, no integration of ws-pagination in the template is required. In that scenario, however, page-size must be set on the ws-search UI component. page-size defines the initial number of hits loaded (without paging). The “Load more” button or infinite scrolling then loads additional hits in packages of the same size. Example (start with 16 hits, then reload in steps of 16):
For more information on the ws-search UI component see ws-search. To implement a “Load more” button or infinite scrolling, ws-page-size-selector is required (see ws-page-size-selector).

​
Not using a paging feature

If no pagination is desired and all hits should be displayed on a single page, no ws-pagination integration in the template is required. In this case you only need to make sure that page-size on the ws-search UI component is set high enough so that all results are loaded in one go and can be displayed in full:
For more information on the ws-search UI component see ws-search.

​
HTML & CSS

The following CSS classes are generated in the output and can be used for individual styling:
  • .pagination: Container for the pagination.
  • .pagination-prev: Styling for the “Previous” button.
  • .pagination-next: Styling for the “Next” button.
  • .pagination-page: Styling for the individual page numbers.
  • .pagination-page.current: Styling for the currently selected page.
Additional HTML code cannot be inserted inside the component. Adjustments are only possible via slots or CSS.