Anzeige mithilfe von IDs steuern

Um innerhalb von Schleifen eine unterschiedliche Darstellung auf Basis einer Nummerierung zu erhalten, können Sie die Tags WS-Counter und WS-Counter2() verwenden. Diese Zähler können nur mit den zugehörigen Tags WS-CounterInc und WS-Counter2Inc() erhöht werden und stehen bei jedem Seitenaufruf zu Anfang auf 0. Damit liefern sie immer eine eindeutige Kennung, die zur Nummerierung (z. B. in einem JavaScript als ID) verwendet werden kann.

Während WS-Counter und WS-Counter2() nur den aktuellen Stand des jeweiligen Zählers ausgeben, wird mit den Tags WS-CounterInc und WS-Counter2Inc() der Zählerstand um 1 erhöht und dann ausgegeben.

Bei den Zählern WS-Counter2() und WS-Counter2Inc() können Sie optional eine Zahl als Argument angeben. Dies bewirkt, dass mit dem Zählerstand bzw. dem inkrementierten Zählerstand und dem Argument eine Modulo-Berechnung durchgeführt und das Ergebnis ausgegeben wird.

Materialien: Modulo-Berechnung

Referenz: WS-Counter

Referenz: WS-CounterInc

Referenz: WS-Counter2()

Referenz: WS-Counter2Inc()

Beispiel 1:

Eine Galerieansicht auf Kategorieebene ist in drei Spalten aufgeteilt. Die dritte Spalte soll keinen Abstand nach rechts erhalten. Durch den Zähler WS-CounterInc wird die Style-Klasse "category_box_" mit einer Nummerierung versehen, die sich bei jedem weiteren Schleifendurchlauf um 1 erhöht. So können angepasste Style-Klassen angesprochen werden.

{@PR-Data}
<div class="category_box_~WS-CounterInc~">
~PR-Name~
</div>
{/@PR-Data}
Ausgabe:
----------------------------------------------------------------------------------------------------

<div class="category_box_1">
Produktname
</div>

<div class="category_box_2">
Produktname
</div>

<div class="category_box_3">
Produktname
</div>

<div class="category_box_4">
Produktname
</div>

Beispiel 2:

Eine ID darf nur einmal auf einem Template vorkommen. So kann hier durch WS-CounterInc die ID um 1 erhöht werden, was eine eindeutige Kennzeichnung eines Containers in einer Schleife bewirkt. (Beispiel hierfür wäre die Anwendung des AJAX-Warenkorbes auf der Produktansicht mit Gruppierungsprodukten.)

{ST-ParentProduct}
{Cat-AdvData($ChildProducts,99)}
{@PR-Data}
<form action="~FORM-Product~" method="post" name="product" id="productform_catchilds_~WS-CounterInc~">
...
<input type="submit" value="in den Warenkorb" class="button" onclick="return ws_AJAXaddToBasket('productform_catchilds_~WS-Counter~', '~BT-ProductAddToBasket_Ajax~', '~WS-Charset~')">
...
</form>
{/@PR-Data}
{/Cat-AdvData($ChildProducts,99)}
{/ST-ParentProduct}


Ausgabe:
----------------------------------------------------------------------------------------------------

<form action="~FORM-Product~" method="post" name="product" id="productform_catchilds_1">
...
<input type="submit" value="in den Warenkorb" class="button" onclick="return ws_AJAXaddToBasket('productform_catchilds_1', '~BT-ProductAddToBasket_Ajax~', '~WS-Charset~')">
...
</form>

<form action="~FORM-Product~" method="post" name="product" id="productform_catchilds_2">
...
<input type="submit" value="in den Warenkorb" class="button" onclick="return ws_AJAXaddToBasket('productform_catchilds_2', '~BT-ProductAddToBasket_Ajax~', '~WS-Charset~')">
...
</form>
...

Beispiel 3:

Auf Kategorieebene wird eine Tabelle mit einem Produkt je Zeile als Galerieansicht angezeigt. Den Zeilen soll abwechselnd eine unterschiedliche Style-Klasse zugewiesen werden, um einen Farbwechsel zu erzeugen. Durch den Parameter WS-Counter2Inc() wird die Klasse "category_td_" mit einer sich wiederholenden Nummerierung versehen. Die Nummerierung wechselt immer zwischen 1 und 2.

<table>
  
{@PR-Data}
  <tr>
    <td class="category_td_~WS-Counter2Inc(2)~">
      ~PR-Name~
    </td>
  </tr>
{/@PR-Data}

</table>

Ausgabe:
----------------------------------------------------------------------------------------------------

<table>

  <tr>
    <td class="category_td_1">
      Produktname
    </td>
  </tr>

  <tr>
    <td class="category_td_2">
      Produktname
    </td>
  </tr>

  <tr>
    <td class="category_td_1">
      Produktname
    </td>
  </tr>

  <tr>
    <td class="category_td_2">
      Produktname
    </td>
  </tr>

</table>