The ws-page-size-selector component lets you control how many hits are loaded on the search result page or the category page. Depending on the mode, the customer can choose the number of hits per page themselves, load more hits via a button, or have the next hits displayed automatically while scrolling.
Three modes are available:
select: Selection of the number of hits per page via a dropdown list. This is the default presentation.button: A button loads the next hits and appends them to the result list.infinite: New hits are loaded automatically as soon as the customer reaches the end of the result list (infinite scrolling).
With button and infinite, the component replaces the classic page navigation. A ws-pagination is then not required.
Component
The component can be embedded as follows on the category and search result page:
Select mode
Button mode
Infinite mode
- Attributes:
options: List of available options for the number of hits per page, for example [16, 32, 48, 64, 80].class: Lets you assign a class to the element itself.mode: Specifies how the presentation should be rendered.
select: Rendered as a dropdown list.
select-class: Class for the generated select element.
button: A “Show more” button without paging.
label: Text displayed on the button.btn-class: Class for the button.
infinite: Automatic loading while scrolling, see Infinite scrolling.
scroll-offset: Distance in pixels before the end of <ws-search-result> at which loading starts. Default: 300
With the infinite mode, the component loads new hits without the customer having to click. For this, the <ws-page-size-selector> works as a so-called sentinel. This is an invisible element with a height of one pixel. As soon as it enters the visible area while scrolling, the component loads the next hits and appends them to the result list.
For this to work, the component must be placed directly below <ws-search-result>. Only then is the sentinel located at the end of the result list and triggers loading at the right moment.
How many hits are added with each load is defined by the page-size of <ws-search>, just as in button mode. Loading starts as soon as the customer is 300 pixels before the end of the result list. This way, the next hits are usually already available before the customer reaches the end. With a larger scroll-offset, loading starts earlier.
If there is additional content between the <ws-search-result> and <ws-page-size-selector> tags, for example a banner or a footer block, the sentinel only becomes visible once the customer also reaches this content. Loading then starts too late or not at all.
Generated source code
The component generates the following source code:
Select mode
Button mode
CSS & styling
This component does not generate any specific CSS classes. Styling can, however, be adjusted through additional CSS in the shop template.
No further HTML elements can be inserted inside the component. 