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

# Sortierung und Filter über mehrere Formulare halten

> Warum sich mehrere Formulare auf einer Suchseite gegenseitig zurücksetzen und wie Suchbegriff, Sortierung und Filter trotzdem erhalten bleiben.

Auf einer Suchergebnisseite stehen Suchfeld, Sortierung und Filter oft an ganz verschiedenen Stellen des Layouts: das Suchfeld oben, die Sortierung über der Liste, die Filter in einer Seitenspalte. Jedes dieser Bedienelemente steckt dann in einem eigenen `form`-Element.

Genau daraus entsteht das Problem. Ein abgesendetes Formular überträgt **nur seine eigenen** Felder. Die Seite lädt neu, und alles, was in den anderen Formularen stand, ist weg. Wer erst sortiert und dann filtert, verliert die Sortierung. Wer dann den Suchbegriff ändert, verliert beides.

![20180306 Suchsortierkrit Beibehalten](https://mintcdn.com/websaleag-44ee7ea6/HEgVg_TjwqZgFr_g/images/20180306_suchsortierkrit-beibehalten.png?fit=max\&auto=format\&n=HEgVg_TjwqZgFr_g\&q=85\&s=65014a5395aabedcff566e149c3cbc80)

## Drei Wege, und wann welcher passt

| Weg | Wie er funktioniert | Wann er passt |
| - | - | - |
| ein einziges Formular | alle Bedienelemente stehen innerhalb eines `form`-Elements | wenn das Layout es zulässt |
| das `form`-Attribut | die Bedienelemente stehen irgendwo auf der Seite und nennen das Formular, zu dem sie gehören | für alles, was Sie selbst als HTML schreiben |
| Felder doppeln | jedes Formular führt die Werte der anderen als versteckte Felder mit | für Bedienelemente, die ein Tag fertig erzeugt |

Die ersten beiden Wege lösen das Problem an der Wurzel, der dritte umgeht es. Prüfen Sie deshalb in dieser Reihenfolge.

## Weg 1 und 2: ein Formular, verteilte Bedienelemente

Ein `form`-Element darf im HTML an beliebiger Stelle stehen und über die ganze Seite reichen. Oft scheitert das nur daran, dass die Bedienelemente in verschiedenen Layoutbereichen sitzen.

Dafür gibt es das `form`-Attribut. Jedes Bedienelement nennt darin die `id` des Formulars, zu dem es gehört, und darf dann irgendwo auf der Seite stehen:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-Search~" method="get" id="suche"></form>

<!-- an beliebiger anderer Stelle im Layout -->
<input type="text" name="~WS-Search_Input~" value="~WS-Search~" form="suche">

<select name="~CAT-SortSelectName~" form="suche" onchange="submit();">
   <option value="~CAT-NoSortSelect~">keine Sortierung</option>
   {CAT-SortAscSelect_Name}
      <option value="~CAT-SortAscSelect_Name~"
              {CAT-SortAscActive_Name}selected{/CAT-SortAscActive_Name}>A bis Z</option>
   {/CAT-SortAscSelect_Name}
</select>
```

Damit entfällt jedes Doppeln. Es gibt nur noch einen Satz Felder, und ein neues Sortierkriterium wird an genau einer Stelle ergänzt.

> [!WARNING]
>
> Der Weg funktioniert nur für Bedienelemente, deren HTML Sie selbst schreiben. Das sind die Sortierung über `CAT-SortSelectName` und das Suchfeld über `WS-Search_Input`.
>
> Tags wie `WS-FreeFieldList`, `Cat-TopList` und `WS-MaxCatProductsList` erzeugen das fertige `select`-Element und lassen kein eigenes Attribut zu. Diese Bedienelemente müssen entweder innerhalb des Formulars stehen oder über Weg 3 mitgeführt werden.

Referenz: [FORM-Search](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare.md#katalog-suche-und-produkt) · [WS-Search\_Input](https://dokumentation.websale.de/v8s/referenz/tags/ws/suche-listen-und-blaettern.md#das-suchformular) · Wegweiser: Produktlisten sortieren

## Weg 3: Werte in den anderen Formularen mitführen

Lässt sich ein Bedienelement nicht umhängen, bekommt jedes andere Formular eine versteckte Kopie seines Werts. Das Prinzip ist immer dasselbe: Jedes Formular trägt den **aktuellen Zustand aller anderen** mit.

### Erzeugte Auswahllisten mitführen

Ein Tag, das eine fertige Auswahlliste ausgibt, wird in einen Bereich gesetzt, der per CSS unsichtbar ist. Ein `select` in einem solchen Bereich wird weiterhin abgesendet, nur eben nicht angezeigt.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-Search~" method="get">
   <div style="display: none">
      ~WS-FreeFieldList(Groesse,Größe)~
      ~WS-FreeFieldList(IS_ZUSATZ4,Farbe)~
      ~Cat-TopList~
      ~WS-MaxCatProductsList~
   </div>

   <!-- hier die sichtbaren Bedienelemente dieses Formulars -->
</form>
```

Nur `disabled` verhindert, dass ein Feld abgesendet wird. `display: none` wirkt rein optisch, der Wert geht mit. Genau darauf beruht dieser Weg.

### Die Sortierung mitführen

Die Sortierung steckt nicht in einem Feld, sondern in genau einem Wert, den die Auswahlliste liefert. Es genügt deshalb, den gerade aktiven Wert als verstecktes Feld zu setzen. Dafür sind die `Active`-Klammerungen da:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{CAT-SortAscSelect_Name}
   {CAT-SortAscActive_Name}
      <input type="hidden" name="~CAT-SortSelectName~" value="~CAT-SortAscSelect_Name~">
   {/CAT-SortAscActive_Name}
{/CAT-SortAscSelect_Name}

{CAT-SortDescSelect_Name}
   {CAT-SortDescActive_Name}
      <input type="hidden" name="~CAT-SortSelectName~" value="~CAT-SortDescSelect_Name~">
   {/CAT-SortDescActive_Name}
{/CAT-SortDescSelect_Name}
```

Auf den ersten Blick sieht das nach mehreren Feldern mit demselben Namen aus. Tatsächlich ist immer höchstens eine der `Active`-Klammerungen erfüllt, sodass auch höchstens ein Feld entsteht. Ist gar nicht sortiert, entsteht keines, und das ist richtig.

> [!WARNING]
>
> **Hier liegt die Wartungsfalle des gesamten Verfahrens.**
>
> Jedes Sortierkriterium braucht diesen Block in **jedem** Formular, das die Sortierung mitführen soll. Kommt ein Kriterium dazu und wird ein Block vergessen, verliert der Käufer die Sortierung genau dann, wenn er dieses eine Formular benutzt. Es gibt keine Fehlermeldung, und beim Testen mit den übrigen Kriterien fällt nichts auf.

### Den Suchbegriff mitführen

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<input type="hidden" name="~WS-Search_Input~" value="~WS-Search~">
```

In dem Formular, das die Suche selbst enthält, gehört der Suchbegriff natürlich nicht zusätzlich als verstecktes Feld hinein. Dort steht er bereits als sichtbares Eingabefeld, und das `value`-Attribut sorgt dafür, dass er beim Neuladen wieder darin steht.

## Das Include gegen die Wartungsfalle

Legen Sie die mitzuführenden Blöcke **einmal** als Include an und binden Sie sie überall ein, wo sie gebraucht werden. Ein neues Sortierkriterium ergänzen Sie dann an einer Stelle.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{Incl-ProductSort}
   {CAT-SortAscSelect_Name}
      <option value="~CAT-SortAscSelect_Name~"
              {CAT-SortAscActive_Name}selected{/CAT-SortAscActive_Name}>A bis Z</option>
   {/CAT-SortAscSelect_Name}

   {CAT-SortDescSelect_Name}
      <option value="~CAT-SortDescSelect_Name~"
              {CAT-SortDescActive_Name}selected{/CAT-SortDescActive_Name}>Z bis A</option>
   {/CAT-SortDescSelect_Name}
{/Incl-ProductSort}
```

Sichtbar eingebunden:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<select name="~CAT-SortSelectName~" onchange="submit();">
   <option value="~CAT-NoSortSelect~">keine Sortierung</option>
   ~WS-Fast_Include(Incl-ProductSort)~
</select>
```

Unsichtbar mitgeführt:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div style="display: none">
   <select name="~CAT-SortSelectName~">
      <option value="~CAT-NoSortSelect~">keine Sortierung</option>
      ~WS-Fast_Include(Incl-ProductSort)~
   </select>
</div>
```

Über das Include wird aus der unsichtbaren Sortierung eine vollständige Auswahlliste statt einzelner versteckter Felder. Das ist gleichwertig, weil die ausgewählte Option denselben Wert absendet, und es spart die zweite Schreibweise.

Referenz: [WS-Fast\_Include()](https://dokumentation.websale.de/v8s/referenz/tags/ws/includes-templates-css-und-js.md) · Incl-

## Worauf Sie achten sollten

Verwenden Sie `method="get"`. Dann stehen Suchbegriff, Sortierung und Filter in der Adresse, und der Käufer kann sein Ergebnis als Lesezeichen sichern oder weitergeben. Mit `method="post"` geht das verloren, und die Zurück-Schaltfläche des Browsers fragt nach dem erneuten Absenden.

Geben Sie `accept-charset` nicht fest an. Wenn Sie es brauchen, setzen Sie `accept-charset="~WS-Charset~"`, damit es dem Zeichensatz des Shops folgt und bei einer Umstellung mitwandert.

> [!WARNING]
>
> Führen Sie denselben Wert nie doppelt **innerhalb eines** Formulars mit, also nicht sichtbar und zusätzlich versteckt. Der Shop bekommt den Feldnamen dann zweimal, und welcher Wert gewinnt, hängt von der Reihenfolge im Quelltext ab.

## Verwandte Themen

* Wegweiser: [Produktlisten sortieren](https://dokumentation.websale.de/v8s/funktionen-fuer-produktlisten/produktlisten-sortieren.md)
* Wegweiser: [Erweiterte Suche](https://dokumentation.websale.de/v8s/suche/erweiterte-suche.md)
* Wegweiser: [Abhängige Suche](https://dokumentation.websale.de/v8s/suche/abhaengige-suche.md)
* Wegweiser: [Filter auf Kategorieebene](https://dokumentation.websale.de/v8s/kategorien/filter-auf-kategorieebene.md)
* Wegweiser: [Produktlisten blättern und Produkte je Seite](https://dokumentation.websale.de/v8s/funktionen-fuer-produktdaten/produktlisten-blaettern-und-produkte-je-seite.md)


## Related topics

- [Hinweise zur Fehlerbehebung](https://dokumentation.websale.de/v8s/fehlerbehebung.md)
- [Anwendungsbeispiele](https://dokumentation.websale.de/v8s/anwendungsbeispiele/anwendungsbeispiele.md)
- [FORM- (Formulare)](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare.md)
- [FACT-Finder: Filter, Sortierung und Navigation](https://dokumentation.websale.de/v8s/integration-von-fact-finder/fact-finder-filter-sortierung-und-navigation.md)
- [Rechnungs- und multiple Lieferadressen abfragen](https://dokumentation.websale.de/v8s/adressdaten/rechnungs-und-multiple-lieferadressen-abfragen.md)


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