Sortierung und Filter über mehrere Formulare halten

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.

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:

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

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 · WS-Search_Input · 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.

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

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

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

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

{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:

<select name="~CAT-SortSelectName~" onchange="submit();">
   <option value="~CAT-NoSortSelect~">keine Sortierung</option>
   ~WS-Fast_Include(Incl-ProductSort)~
</select>

Unsichtbar mitgeführt:

<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() · 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.

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.

Anwendungsbeispiele

Sortierung und Filter über mehrere Formulare halten

Drei Wege, und wann welcher passt

Weg 1 und 2: ein Formular, verteilte Bedienelemente

Weg 3: Werte in den anderen Formularen mitführen

Erzeugte Auswahllisten mitführen

Die Sortierung mitführen

Den Suchbegriff mitführen

Das Include gegen die Wartungsfalle

Worauf Sie achten sollten

Verwandte Themen

​Drei Wege, und wann welcher passt

​Weg 1 und 2: ein Formular, verteilte Bedienelemente

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

​Erzeugte Auswahllisten mitführen

​Die Sortierung mitführen

​Den Suchbegriff mitführen

​Das Include gegen die Wartungsfalle

​Worauf Sie achten sollten

​Verwandte Themen

Drei Wege, und wann welcher passt

Weg 1 und 2: ein Formular, verteilte Bedienelemente

Weg 3: Werte in den anderen Formularen mitführen

Erzeugte Auswahllisten mitführen

Die Sortierung mitführen

Den Suchbegriff mitführen

Das Include gegen die Wartungsfalle

Worauf Sie achten sollten

Verwandte Themen