> ## 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

> Versionierte JavaScript-Bundles ws-search-component und template-helper für WEBSALE | search im Shop-Template korrekt einbinden und verwalten.

Auf dieser Seite sind die JavaScript-Bundles dokumentiert, die für die Integration des Suchmoduls in die Templates (Storefront) erforderlich sind. Die Bundles werden von WEBSALE versioniert bereitgestellt (z. B. über die WEBSALE JavaScript-Bibliothek bzw. das WEBSALE PageSpeed-Tool) und müssen im Template mit der passenden Versionskennung eingebunden werden.

Die folgenden Abschnitte beschreiben die Einbindung/Versionierung sowie den Funktionsumfang je Version; zusätzlich ist ein separates Bundle `ws-search-template-helper-<Versionskennung>.js` zur Bereitstellung generischer Template-Hilfsfunktionen vorgesehen.

***

## `ws-search-component-<version>.js`

Diese Datei enthält den Funktionsumfang der Search-WebComponents, die für Darstellung und Verhalten der Suchergebnisse inklusive Filter, Sortierung, Blätternavigation etc. verantwortlich sind.

Jeder Fix und jedes Update erzeugt eine neue Datei-Version (neue Versionskennung im Dateinamen). In den Templates muss immer genau die Version eingebunden werden, die zum gewünschten Funktionsstand passt.

Je nach Änderung (Fix/Update) können Anpassungen an der Verwendung der WebComponents notwendig sein (z. B. neue/angepasste Attribute, Events oder geändertes Verhalten). Diese Abhängigkeiten sind in der folgenden Versions- und Funktionsübersicht beschrieben.

### Einbindung & Versionierung

WEBSALE stellt dieses JavaScript-Bundle mit dem Namen `ws-search-component-<Versionskennung>.js` über die WEBSALE JavaScript-Bibliothek bereit. Dieses Bundle kann auch über das [WEBSALE PageSpeed-Tool](https://doku.websale.net/index.html?guide_jsjq.html) verwaltet werden und wird dort in allen verfügbaren Versionen bereitgestellt.

Falls Sie das Bundle individualisieren oder anpassen möchten, stehen Ihnen die Dateien zum Download unter folgender URL zur Verfügung:

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

Durch diese Möglichkeit können Sie spezifische Anpassungen für Ihre Shop-Templates vornehmen, beispielsweise Änderungen am Verhalten der Suche oder Filterlogik.

### Versionen & Funktionsumfang

Dieser Abschnitt beschreibt Änderungen am JavaScript-Bundle `ws-search-component-<Versionsnummer>.js` (WebComponents für die Suchergebnisseite).

Mit jedem Fix/Update wird eine neue Version ausgeliefert; über das [WEBSALE PageSpeed-Tool](https://doku.websale.net/index.html?guide_jsjq.html) oder direkt im Template ist entsprechend die passende Bundle-Version einzubinden.

#### `ws-search-component-1.4.11.js`

* **Änderungen**
  * Attribut `no-filter-msg` entfernt bei `<ws-filters>` → wird nicht mehr unterstützt

#### `ws-search-component-1.0.3.js`

* **Änderungen**
  * **ws-search**
    * Attribut `keep-query` entfernt
    * Neues Attribut `page-size` (Defaultwert für Seitengröße/Antwortgröße/Anzahl Ergebnisse)
    * `<ws-search>` muss nur einmal eingebunden werden und kann z. B. global im Header stehen
    * Neues Attribut `default-sort` (Defaultsortierung, wenn keine gesetzt ist; interner Default: `_score_desc`)
    * Neues Attribut `session-id` (optional, um SessionId in der Suche zu verarbeiten). Befüllung z. B. über Tag:
      * `~DC-FPsearchsid_set(%WS-SID%)~`
      * `~DC-FPsearchsid_hash(sha256,hex,<id>)~`
  * **ws-filter und ws-filters**
    * `type="range"`: neues Attribut `display-type="slider|fields|slider-fields"` zur Darstellung des Range-Filters
      * `slider`: nur Slider
      * `fields`: nur Number-Input-Felder (immer 2)
      * `slider-fields`: Slider + Number-Input-Felder
    * Neues Attribut `use-numeric-sort="yes|true"`
    * Neues Attribut `filter-container` - markiert den obersten Filter-Container (Prüfung nur auf Existenz; wird am äußeren `div` der Filterinstanz gesetzt). Nutzbar z. B. zum Ein-/Ausblenden von Filter-Dropdowns.
    * Filter-Sortierung über Sortierliste
  * **ws-page-size-selector**
    * Attribut `default` entfernt
    * Neues Attribut `mode="select|button"`
      * `select`: bisherige Funktions- und Darstellungsweise
      * `button`: „Mehr Ergebnisse laden"-Button
    * Neues Attribut `label="…"` (nur für `mode="button"`)
    * Neues Attribut `btn-class` (CSS-Klasse am Button)
    * Neues Attribut `select-class` (CSS-Klasse am Select)
  * **ws-pagination**
    * Attribut `default` entfernt
  * **ws-search-box**
    * Kann beliebig oft gesetzt werden
    * Neues Attribut `ghost-color` (rgba für „Ghost Text" bei Completion)
    * Neue Attribute `suggest-container-class` und `suggest-item-class`
    * Neues Attribut `show-query` (steuert pro Suchfeld, ob der Suchbegriff nach Suche erhalten bleibt)
    * Neues Attribut `input-delay` (ms bis Suggests nach KeyDown erscheinen)
  * **ws-search-result**
    * CSS-Klasse ist frei bestimmbar
    * Platzhalter werden vor dem Ajax-Call geladen
    * Vorgabe: Template-Slot muss `result-placeholder` heißen; innere Klassen sind frei
  * **ws-sort-box**
    * Neues Attribut `use-api="yes|true"` steuert, ob Sortieroptionen von der API kommen oder aus dem Template.
    * Bei `use-api="no|false"` muss die Sortierung im Template definiert werden
  * **wsResultDispatcher**
    * Liefert in der Response zusätzlich alle aggregierten Filter mit (z. B. um UI-Elemente abhängig von vorhandenen Filtern ein-/auszublenden)
* **CSS und HTML**
  * `ws-filter .range-field + .range-field-wrapper` = Für Design der Number-Input-Felder inkl. Wrapper (Range-Filter mit `display-type="fields"` oder `slider-fields`)
  * `ws-page-size-selector button` = Für Design des „Mehr Ergebnisse laden"-Buttons (bei `mode="button"`)

#### `ws-search-component-1.0.2.js`

* **Änderungen**
  * `<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>` Attribut umbenannt: `maxvisiblepages` → `max-pages`
  * `no-filter-msg` verschoben:
    * Entfernt bei `<ws-filter>`
    * Neu bei `<ws-filters>` (gilt für alle Filter)
* **Erweiterungen**
  * `<ws-filter-chip>`: neues Attribut `btn-class` (CSS-Klasse am Button)

***

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

Die Datei `ws-search-template-helper-<Versionskennung>.js` erweitert die Suche um generische Template-Hilfsfunktionen, die nicht als WebComponent abbildbar sind. Sie stellt Basis-Implementierungen und technische Hilfslogik bereit, die in Templates wiederverwendet werden kann - insbesondere für Ajax-basierte Nachlade-Funktionen und Dispatcher-Anbindungen.

**Enthält zukünftig:**

* `wsHandleResults()` als Basis-Implementierung zur Verarbeitung von Suchergebnissen
* Ajax-Unterstützung zum Nachladen von Produkten auf Suchergebnisseiten und Kategorieseiten
* `wsHandleSuggestResults()` als Basis-Implementierung zur Verarbeitung von Suggest-Ergebnissen und die Ajax-Unterstützung zum Nachladen von Produkten innerhalb der Suggest
* Standard-Subscriptions für den Dispatcher
* Technische Verbindung/Helper für die Ajax-Calls (Initialisierung/Abwicklung), damit die Requests korrekt ausgeführt werden können