Skip to main content
This page documents the JavaScript bundles required to integrate the search module into the templates (storefront). The bundles are provided in versioned form by WEBSALE (e.g. via the WEBSALE JavaScript library or the WEBSALE PageSpeed tool) and must be included in the template with the appropriate version identifier. The following sections describe the inclusion/versioning as well as the range of functions per version; in addition, a separate bundle ws-search-template-helper-<version identifier>.js is planned to provide generic template helper functions.

​
ws-search-component-<version>.js

This file contains the range of functions of the Search WebComponents, which are responsible for the display and behavior of the search results including filter, sorting, paging navigation, etc. Each fix and each update produces a new file version (new version identifier in the file name). The templates must always include exactly the version that matches the desired functional state. Depending on the change (fix/update), adjustments to the use of the WebComponents may be necessary (e.g. new/adjusted attributes, events, or changed behavior). These dependencies are described in the following version and function overview.

​
Inclusion & versioning

WEBSALE provides this JavaScript bundle with the name ws-search-component-<version identifier>.js via the WEBSALE JavaScript library. This bundle can also be managed via the WEBSALE PageSpeed tool and is provided there in all available versions. If you would like to individualize or adjust the bundle, the files are available for download at the following URL:
This option enables you to make specific adjustments for your shop templates, for example changes to the behavior of the search or the filter logic.

​
Versions & range of functions

This section describes changes to the JavaScript bundle ws-search-component-<version number>.js (WebComponents for the search result page). With each fix/update, a new version is delivered; the appropriate bundle version must be included via the WEBSALE PageSpeed tool or directly in the template.

​
ws-search-component-1.4.11.js

  • Changes
    • Attribute no-filter-msg removed from <ws-filters> → is no longer supported

​
ws-search-component-1.0.3.js

  • Changes
    • ws-search
      • Attribute keep-query removed
      • New attribute page-size (default value for page size / response size / number of results)
      • <ws-search> only needs to be included once and can, for example, be placed globally in the header
      • New attribute default-sort (default sorting when none is set; internal default: _score_desc)
      • New attribute session-id (optional, to process a SessionId in the search). Filling e.g. via tag:
        • ~DC-FPsearchsid_set(%WS-SID%)~
        • ~DC-FPsearchsid_hash(sha256,hex,<id>)~
    • ws-filter and ws-filters
      • type="range": new attribute display-type="slider|fields|slider-fields" for the display of the range filter
        • slider: only slider
        • fields: only number input fields (always 2)
        • slider-fields: slider + number input fields
      • New attribute use-numeric-sort="yes|true"
      • New attribute filter-container - marks the topmost filter container (only presence is checked; set on the outer div of the filter instance). Can be used, for example, to show/hide filter dropdowns.
      • Filter sorting via sort list
    • ws-page-size-selector
      • Attribute default removed
      • New attribute mode="select|button"
        • select: previous function and appearance
        • button: “Load more results” button
      • New attribute label="…" (only for mode="button")
      • New attribute btn-class (CSS class on the button)
      • New attribute select-class (CSS class on the select)
    • ws-pagination
      • Attribute default removed
    • ws-search-box
      • Can be set any number of times
      • New attribute ghost-color (rgba for “ghost text” in completion)
      • New attributes suggest-container-class and suggest-item-class
      • New attribute show-query (controls per search field whether the search term is preserved after a search)
      • New attribute input-delay (ms until suggests appear after KeyDown)
    • ws-search-result
      • CSS class is freely selectable
      • Placeholders are loaded before the Ajax call
      • Requirement: template slot must be named result-placeholder; inner classes are free
    • ws-sort-box
      • New attribute use-api="yes|true" controls whether sort options come from the API or from the template.
      • With use-api="no|false", the sorting must be defined in the template
    • wsResultDispatcher
      • Additionally provides all aggregated filters in the response (e.g. to show/hide UI elements depending on available filters)
  • CSS and HTML
    • ws-filter .range-field + .range-field-wrapper = For the design of the number input fields including the wrapper (range filter with display-type="fields" or slider-fields)
    • ws-page-size-selector button = For the design of the “Load more results” button (with mode="button")

​
ws-search-component-1.0.2.js

  • Changes
    • <ws-communication> → <ws-search>
    • <ws-searchbox> → <ws-search-box>
    • <ws-paging-size-selector> → <ws-page-size-selector>
    • <ws-filter type="slider"> → <ws-filter type="range">
    • <ws-pagination> attribute renamed: maxvisiblepages → max-pages
    • no-filter-msg moved:
      • Removed from <ws-filter>
      • New in <ws-filters> (applies to all filters)
  • Extensions
    • <ws-filter-chip>: new attribute btn-class (CSS class on the button)

​
ws-search-template-helper-<version>.js - Coming soon

The file ws-search-template-helper-<version identifier>.js extends the search with generic template helper functions that cannot be implemented as a WebComponent. It provides base implementations and technical helper logic that can be reused in templates - particularly for Ajax-based reload functions and dispatcher bindings. Will contain in the future:
  • wsHandleResults() as base implementation for processing search results
  • Ajax support for reloading products on search result pages and category pages
  • wsHandleSuggestResults() as base implementation for processing suggest results and Ajax support for reloading products within the suggest
  • Standard subscriptions for the dispatcher
  • Technical connection/helpers for the Ajax calls (initialization/handling), so that the requests can be executed correctly