ws-page-size-selector

ws-page-size-selector controls how many hits are loaded: as a selection of the number of hits per page, as a load more button or via infinite scrolling.

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

<ws-page-size-selector
  mode="select"
  options='[16, 32, 48]'
  class="bsp class xyz"
  select-class="form-select">
</ws-page-size-selector>

Button mode

<ws-page-size-selector
  id="sizeBtn"
  mode="button"
  class="bsp class xyz"
  btn-class="button xyz"
  options='[16, 32, 48]'>
</ws-page-size-selector>

Infinite mode

<ws-page-size-selector
  mode="infinite"
  scroll-offset="300">
</ws-page-size-selector>

• Attributes:
  • 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.
      • options: List of available options for the number of hits per page, for example [16, 32, 48, 64, 80]. The value 0 creates the “Show all” option, see Show all hits.
      • page-size-all: Optional. Maximum number of hits loaded via the “Show all” option. Default: 10000
      • page-size-all-label: Optional. Label of the “Show all” option. Default: All
    • 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

Show all hits

In addition to fixed numbers of hits, the selection can contain an option that displays all hits on one page. To do this, add the value 0 to the options attribute. The component does not display this value as a number, however, but as the “Show all” option.

<ws-page-size-selector
  mode="select"
  options='[12, 24, 48, 0]'
  page-size-all="500"
  page-size-all-label="Alle">
</ws-page-size-selector>

In this example, the dropdown list contains the options 12, 24 and 48 as well as the option “Alle”. If the customer selects the option “Alle”, up to 500 hits per page are loaded.

The option is controlled by two attributes:

• page-size-all defines the maximum number of hits loaded with “Show all”. If not specified, the value 10000 applies.
• page-size-all-label defines the label of the option. If not specified, it is All. For German-language shops, this attribute should therefore be set.

The number of hits is technically limited to 10,000. This limit is imposed by Elasticsearch. Even a higher value in page-size-all therefore loads at most 10,000 hits.

With a large product range, loading a large number of hits can noticeably increase the page load time. A lower value in page-size-all, such as 500, keeps the page responsive.

Infinite scrolling

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.

<ws-search-result>
  ...
</ws-search-result>
<ws-page-size-selector
  mode="infinite"
  scroll-offset="300">
</ws-page-size-selector>

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 has reached this content. Loading then starts too late or not at all.

Generated source code

The component generates the following source code:

Select mode

<ws-page-size-selector mode="select" options="[16, 32, 48, 64, 80]">
    <select>
        <option value="16" selected="">16</option>
        <option value="32">32</option>
        <option value="48">48</option>
        <option value="64">64</option>
        <option value="80">80</option>
    </select>
</ws-page-size-selector>

Button mode

<ws-page-size-selector mode="button" btn-class="btn-example-class" label="Load more items">
  <button type="button" class="btn-example-class">
    Load more items
  </button>
</ws-page-size-selector>

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.