> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript bundles

> Include and manage the versioned JavaScript bundles ws-search-component and template-helper for WEBSALE | search correctly in the shop template.

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](https://doku.websale.net/index.html?guide_jsjq.html) 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:

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
http://<your-domain>/$WS/ws_sysdata/js/ws-search-component-<version identifier>.js
```

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](https://doku.websale.net/index.html?guide_jsjq.html) 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
