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

# Abhängige Suche

> Wie Sie in WEBSALE V8s einen Produktfinder aufbauen, dessen Auswahllisten sich gegenseitig einschränken, von der Freischaltung bis zum Template.

Die abhängige Suche führt den Käufer über mehrere Auswahllisten zum passenden Produkt. Ein typischer Fall ist der Ersatzteilfinder: Hersteller wählen, dann Baureihe, dann eine technische Größe, und übrig bleiben die dafür passenden Artikel.

Der Unterschied zu gewöhnlichen Filtern steckt im Wort abhängig. Sobald der Käufer eine Auswahl trifft, verschwinden in den übrigen Listen alle Werte, mit denen es kein Produkt gäbe. Er kann also keine Kombination zusammenstellen, die ins Leere läuft.

Die Auswahllisten lassen sich in jedes Template einbauen, beispielsweise auf der Startseite. Die Trefferliste erscheint anschließend auf der Suchergebnisseite `ws_search.htm`.

![Abhaengige Suche Beispiel 2 Schatten](https://mintcdn.com/websaleag-44ee7ea6/98HtpcQDYdzjmpoC/images/abhaengige-suche-beispiel-2-schatten.jpg?fit=max\&auto=format\&n=98HtpcQDYdzjmpoC\&q=85\&s=bf37a4454e6a51027bb42ec62528a52f)

## Schritt 1: Funktion freischalten lassen

Die abhängige Suche ist nicht im Standardumfang enthalten. Wenden Sie sich für die Freischaltung an Ihren WEBSALE-Ansprechpartner.

## Schritt 2: Produktdatenfelder vorbereiten

Die abhängige Suche arbeitet ausschließlich mit freien Produktdatenfeldern. Die festen Felder wie Produktname oder Produktnummer stehen dafür nicht zur Verfügung.

Im WSPManager legen Sie je freiem Feld zwei Dinge fest:

* ob das Feld Teil der abhängigen Suche wird
* wie die Werte in der Auswahlliste sortiert werden

Bei der Sortierung stehen alphanumerisch und numerisch zur Wahl. Der Unterschied wird bei Zahlen sichtbar: Alphanumerisch sortiert ergibt `10` vor `9`, numerisch sortiert steht `9` davor. Für Größen, Längen oder Stückzahlen ist die numerische Sortierung deshalb die richtige.

Zusätzlich zu den Produktdaten selbst braucht der Shop die Liste der tatsächlich vorkommenden Kombinationen. Genau daraus ergibt sich, welche Werte nach einer Auswahl noch übrig bleiben. Geliefert wird sie über die Datei `depsearchcomplete.csv`.

Wie Sie die Felder in Ihrem Warenwirtschaftssystem befüllen, hängt vom eingesetzten System ab. Wenden Sie sich dafür an dessen Hersteller.

## Schritt 3: Felder in der shop.config benennen

Jedes für die abhängige Suche aktivierte Feld braucht im Abschnitt `<ProductItemSearch>` zwei Einträge: den technischen Namen und die Beschriftung.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ProductItemSearch>
   FreeField1     = Manufacturer
   FreeField1-Txt = Hersteller
   FreeField2     = Division
   FreeField2-Txt = Teilung
   FreeField3     = Drivelinks
   FreeField3-Txt = Anzahl Treibglieder
</ProductItemSearch>
```

Wegweiser: [Erweiterte Suche](https://dokumentation.websale.de/v8s/suche/erweiterte-suche.md)

### Zwei Einstellungen für den Ablauf

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ProductItemSearch>
   KeepSearchInput       = yes
   DirectDepSearch-Allow = yes
</ProductItemSearch>
```

`KeepSearchInput` hält die getroffene Auswahl fest, bis der Käufer sie ändert oder zurücksetzt. Das passt zum Produktfinder, denn wer sein Gerätemodell einmal gewählt hat, will es beim nächsten Blick in den Shop nicht erneut heraussuchen.

`DirectDepSearch-Allow` löst die Produktsuche unmittelbar aus, sobald eine Auswahl getroffen wurde. Der Käufer sieht damit schon während des Eingrenzens, wie die Trefferliste schrumpft, statt am Ende auf eine Schaltfläche klicken zu müssen.

Referenz: [Abschnitt ProductItemSearch](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md#productitemsearch)

## Schritt 4: Auswahllisten ins Template einbauen

Je Feld erzeugt ein [`~WS-FreeFieldList()~`](https://dokumentation.websale.de/v8s/referenz/tags/ws/suche-listen-und-blaettern#die-tags-im-uberblick) die fertige Auswahlliste.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-Search~" name="Search" method="get">
   ~WS-FreeFieldList(Manufacturer,Hersteller)~
   ~WS-FreeFieldList(Division,Teilung)~
   ~WS-FreeFieldList(Drivelinks,Anzahl Treibglieder)~

   <button>Suche starten</button>
   <button name="~WS-ResetSearch~">Sucheinstellungen zurücksetzen</button>
</form>
```

> [!WARNING]
>
> Das Formular muss `name="Search"` tragen. Der Shop erzeugt für die abhängigen Listen ein JavaScript, das das Formular unter genau diesem Namen anspricht, um nach jeder Auswahl die übrigen Listen neu zu berechnen. Ein anderer Name legt die Abhängigkeit still, ohne dass eine Fehlermeldung erscheint.

### Die beiden Argumente des Tags

Das erste Argument ist der technische Feldname aus Schritt 3. Groß- und Kleinschreibung spielt dabei keine Rolle.

Das zweite Argument ist der Text des **ersten Listeneintrags**, also der Aufforderung vor der eigentlichen Auswahl. Es ist keine Überschrift und keine Beschriftung neben der Liste. Ein Text wie `Hersteller` liest sich an dieser Stelle als Platzhalter, `Hersteller wählen` ist meist deutlicher.

Gibt es für ein Feld keine Werte, gibt das Tag gar nichts aus, auch keine leere Liste. Umschließende Beschriftungen oder Rahmen bleiben dann allerdings stehen. Verwenden Sie das Tag als Klammerung, wenn diese mitverschwinden sollen.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-FreeFieldList(Manufacturer,Hersteller wählen)}
   <label>Hersteller</label>
   ~WS-FreeFieldList(Manufacturer,Hersteller wählen)~
{/WS-FreeFieldList(Manufacturer,Hersteller wählen)}
```

### Zurücksetzen

Gerade beim Produktfinder ist die Schaltfläche zum Zurücksetzen wichtiger als bei anderen Filtern. Wer sich verwählt hat, kommt sonst schwer wieder heraus, weil die übrigen Listen bereits eingeschränkt sind.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<button name="~WS-ResetSearch~">Sucheinstellungen zurücksetzen</button>
```

## Schritt 5: Suchergebnisseite unterscheiden (optional)

Die Treffer der abhängigen Suche landen auf derselben Seite wie die Treffer der gewöhnlichen Suche. Wollen Sie beide unterschiedlich gestalten, braucht die Seite ein Erkennungsmerkmal.

Geben Sie dafür im Formular einen freien Parameter mit. Auf der Suchergebnisseite lässt sich dann abfragen, ob er gesetzt ist.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-Search~" name="Search" method="get">
   <input name="~WS-Search_Input~" type="text" value="~WS-Search~" placeholder="Suchbegriff eingeben">
   <input type="hidden" name="otpdepsearch" value="yes">

   ~WS-FreeFieldList(Manufacturer,Hersteller wählen)~
   ~WS-FreeFieldList(Division,Teilung wählen)~
   ~WS-FreeFieldList(Drivelinks,Anzahl Treibglieder wählen)~
   ~Cat-TopList~

   <button>Suche starten</button>
   <button name="~WS-ResetSearch~">Sucheinstellungen zurücksetzen</button>
</form>
```

## Mehrere Formulare auf einer Seite

Sobald neben dem Produktfinder ein zweites Formular auf der Seite steht, beispielsweise für die Anzahl der Produkte pro Seite, geht die getroffene Auswahl beim Absenden dieses zweiten Formulars verloren. Es überträgt schlicht nicht, was im ersten steht.

Die Lösung ist, dieselben Werte im zweiten Formular versteckt mitzuschicken. Dafür nimmt `~WS-FreeFieldList()~` als zweites Argument das Schlüsselwort `hidden`. Statt einer Auswahlliste entsteht dann ein verstecktes Feld mit dem aktuell gewählten Wert.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!-- Formular 1: die abhängige Suche -->
<form action="~FORM-Search~" name="Search" method="get">
   <input type="text" name="~WS-Search_Input~" value="~WS-Search~" placeholder="Suchbegriff eingeben">
   ~WS-FreeFieldList(Manufacturer,Hersteller wählen)~

   <button>Suche starten</button>
</form>

<!-- Formular 2: Produkte pro Seite, mit den Werten aus Formular 1 als versteckte Felder -->
<form action="~FORM-Search~" method="get">
   <input type="hidden" name="~WS-Search_Input~" value="~WS-Search~">
   ~WS-FreeFieldList(Manufacturer,hidden)~
   ~WS-MaxCatProductsList~
</form>
```

Wiederholen Sie im zweiten Formular jedes Feld der abhängigen Suche. Ein vergessenes Feld fällt beim Blättern und beim Wechsel der Seitengröße stillschweigend aus der Auswahl heraus.

## Wie die Einschränkung zustande kommt

Der Shop führt die gepflegten Kombinationen in einer eigenen Tabelle. Für jede Auswahlliste fragt er daraus die noch möglichen Werte ab und berücksichtigt dabei alles, was der Käufer in den anderen Listen bereits gewählt hat.

Daraus folgen zwei Dinge für die Praxis:

* Die Auswahllisten sind nur so vollständig wie die gelieferten Kombinationen. Fehlt eine Kombination in `depsearchcomplete.csv`, ist das zugehörige Produkt über den Produktfinder nicht erreichbar, auch wenn es im Shop existiert.
* Je Liste werden höchstens 1000 Werte ausgegeben. Für Felder mit sehr vielen verschiedenen Werten ist die abhängige Suche deshalb nicht das passende Mittel.

Ist ein freies Feld in der `shop.config` eingetragen, aber im WSPManager nicht für die abhängige Suche aktiviert, erzeugt `~WS-FreeFieldList()~` trotzdem eine Auswahlliste. Diese enthält dann alle vorkommenden Werte des Feldes und schränkt die übrigen Listen nicht ein.

## Verwandte Themen

* Wegweiser: [Erweiterte Suche, für Filter ohne gegenseitige Einschränkung](https://dokumentation.websale.de/v8s/suche/erweiterte-suche.md)
* Wegweiser: [Suchergebnisse, für die Trefferliste](https://dokumentation.websale.de/v8s/suche/suchergebnisse.md)
* Wegweiser: [Anzahl der Produkte pro Seite](https://dokumentation.websale.de/v8s/kategorien/anzahl-der-produkte-pro-seite.md)
* Wegweiser: [Sortieren von Produktlisten](https://dokumentation.websale.de/v8s/funktionen-fuer-produktlisten/produktlisten-sortieren.md)
* Wegweiser: [Blättern in Produktlisten](https://dokumentation.websale.de/v8s/anwendungsbeispiele/anwendungsbeispiele.md#blattern-in-produktlisten)


## Related topics

- [Suche, Listen und Blättern](https://dokumentation.websale.de/v8s/referenz/tags/ws/suche-listen-und-blaettern.md)
- [Kategorien und weitere Dateien](https://dokumentation.websale.de/v8s/schnittstellen/produkte-und-kategorien/ws-sftp-produkte-pro/kategorien-und-weitere-dateien.md)
- [Sortierung und Filter über mehrere Formulare halten](https://dokumentation.websale.de/v8s/anwendungsbeispiele/appex-such-und-sortieroptionen-halten.md)
- [Produkte, Katalog und Suche](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md)
- [Abhängige Varianten anzeigen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-anzeigen.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.