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

# Bekleidungsmodul

> Wie Sie in WEBSALE V8s mit dem Bekleidungsmodul alle Variantenwerte eines Produkts bereits auf der Kategorie- und Suchergebnisseite anzeigen.

Der Name des Moduls ist historisch bedingt. Einsetzen lässt es sich für alle Produktarten, nicht nur für Bekleidung.

Mit dem Bekleidungsmodul zeigen Sie dem Kunden bereits auf der Kategorie- und der Suchergebnisseite für bis zu zwei Varianten alle Variantenwerte an, beispielsweise Farbe und Größe. Bei jedem Produkt der Liste stehen damit die hinterlegten Farben und Größen direkt sichtbar.

Der eigentliche Gewinn liegt im Zusammenspiel mit Filter und Suche. Wählt der Kunde den Filter "Farbe" mit dem Wert "blau", zeigt das Modul die Produkte gleich in Blau. Dasselbe gilt für die Suche: Bei "T-Shirt blau" steuert der Suchbegriff die Anzeige, es erscheinen nur die blauen T-Shirts.

Auch die Links führen dorthin, wo der Kunde sie erwartet. Hat er über die Filter eine Größe oder Farbe gewählt und klickt dann auf das Produktbild, landet er genau auf dieser Variante des Produkts. Ebenso beim Klick auf ein kleines Vorschaubild oder auf eine der unter "erhältlich in" aufgelisteten Größen.

Dieses Modul muss für Ihren Shop freigeschaltet werden. Weitere Informationen erhalten Sie von Ihrem WEBSALE-Ansprechpartner.

![Vo Filter](https://mintcdn.com/websaleag-44ee7ea6/Gu3qq65BeVAUJPgW/images/vo_filter.jpg?fit=max\&auto=format\&n=Gu3qq65BeVAUJPgW\&q=85\&s=f664ed2991ccdb3a55e223a7fd37333e)

![Vo Filter C](https://mintcdn.com/websaleag-44ee7ea6/Gu3qq65BeVAUJPgW/images/vo_filter_c.jpg?fit=max\&auto=format\&n=Gu3qq65BeVAUJPgW\&q=85\&s=c9798b85ca8524b19cc294d3b886276d)

## Voraussetzungen

### Technische Voraussetzungen

Die Varianten lassen sich nur dann einzeln darstellen, wenn die Daten vom Warenwirtschaftssystem entsprechend aufbereitet geliefert werden. Sie können das Bekleidungsmodul also nur verwenden, wenn Sie ein Warenwirtschaftssystem einsetzen und dieses die Daten passend aufbereitet, das Modul also unterstützt.

### Produkt-Voraussetzungen

Zusätzlich müssen die Produktdaten diese Bedingungen erfüllen:

* Unterstützt werden bis zu zwei Varianten, beispielsweise Farbe und Größe, mit je bis zu 25 Variantenwerten. Also bis zu 25 Farben und 25 Größen.
* Jede einzelne Varianten-Kombination braucht eine eigene Produktnummer. Ohne sie lassen sich die Deep-Links auf die konkrete Variante nicht bilden.
* Jede Variante braucht eine technische ID, beispielsweise `color` für Farbe und `size` für Größe. Diese IDs sprechen Sie später im Template an, sie sind der Schlüssel zur gesamten Integration.
* Jede Varianten-Kombination, beispielsweise Größe L in Blau, braucht eigene Bilder. Von Vorteil ist es, wenn alle Bildgrößen geliefert werden, also mini, normal und die übrigen.

### Was "verfügbar" hier bedeutet

> [!WARNING]
>
> Auf Kategorieseiten kann aus technischen Gründen kein Lagerbestand angezeigt werden.
>
> Die Verfügbarkeitsanzeige des Bekleidungsmoduls sagt deshalb nur aus, ob eine Kombination aus Größe und Farbe grundsätzlich existiert, ob es also eine Produktnummer für sie gibt. Ob dieser Artikel tatsächlich auf Lager liegt, ist damit nicht gesagt.
>
> Wegweiser: [Lagerbestand anzeigen](https://dokumentation.websale.de/v8s/lagerbestand/lagerbestand-anzeigen.md)

## Die drei Zustände verstehen

Alle folgenden Beispiele beruhen auf derselben Unterscheidung. Wenn Sie diese einmal durchschaut haben, erklären sich die verschachtelten Klammerungen von selbst.

Der Ausgangspunkt: Sie geben in einem Durchlauf immer eine Variante aus, beispielsweise die Farben. Die jeweils andere Variante, hier die Größe, heißt aus dieser Sicht die Cross-Variante.

| Zustand | Tag | Bedeutung |
| - | - | - |
| Treffer in der aktuellen Variante | `PR-VO_VarMatched` | Ein Wert dieser Variante wurde über Suche oder Filter gefunden, der Kunde hat also beispielsweise eine Farbe gewählt |
| Treffer in der Cross-Variante | `PR-VO_VarCrossMatch` | Nicht die aktuelle, sondern die andere Variante wurde gefunden, der Kunde hat also eine Größe gewählt |
| Kombination existiert | `PR-VO_VarEntry_CrossMatch` | Die gefundene Größe existiert auch in der Farbe des aktuellen Schleifendurchlaufs |

Der letzte Zustand ist der interessante. Er entscheidet darüber, ob ein Farbbild normal oder ausgegraut erscheint. Hat der Kunde Größe L gewählt und gibt es das Produkt in L nicht in Rot, dann soll das rote Farbfeld sichtbar, aber als nicht wählbar erkennbar sein.

## Integration

Das folgende Beispiel baut drei Bereiche auf: links die vorhandenen Farben, in der Mitte das Großbild, darunter die existierenden Größen.

Alle drei beginnen mit denselben zwei Schutzklammerungen. `PR-VO_Available` prüft, ob das Modul für dieses Produkt überhaupt zur Verfügung steht, `PR-VO_VarData` prüft, ob das Produkt einzeln darstellbare Varianten hat. Ohne diese beiden Klammerungen würden bei allen anderen Produkten leere Bereiche in der Liste stehen.

### Verfügbare Farben anzeigen

![Vo Detail 2](https://mintcdn.com/websaleag-44ee7ea6/Gu3qq65BeVAUJPgW/images/vo_detail_2.jpg?fit=max\&auto=format\&n=Gu3qq65BeVAUJPgW\&q=85\&s=b07eb595ae3b1ae3c85e622cb0b72049)

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PR-VO_Available}           <!-- Schutzklammerung: nur anzeigen, wenn das Feature verfügbar ist -->
{PR-VO_VarData}             <!-- Schutzklammerung: dieses Produkt hat einzeln anzeigbare Varianten -->

   {@PR-VO_VarData}                         <!-- Schleife über die Varianten -->
   {PR-VO_VarCode(color)}                   <!-- nur die Variante Farbe ausgeben -->
   {DC-CompareDigitGTE($PR-VO_VarData$,2)}  <!-- prüft, ob mindestens zwei Varianten vorhanden sind -->
      <div class="variation_images">
      {@PR-VO_VarEntry_Data}                <!-- Schleife über alle existierenden Farben -->

         {PR-VO_VarEntry_Image}             <!-- nur ausgeben, wenn ein Bild zugewiesen ist -->

            <a href="~PR-VO_VarEntry_Link~">

            <!-- Der Käufer hat eine Größe gewählt oder sie wurde gefunden -->
            {PR-VO_VarCrossMatch}

               <!-- Kombination aus Größe und Farbe existiert, Farbbild normal anzeigen -->
               {PR-VO_VarEntry_CrossMatch}
                  <div class="combination_found">
                     <img src="~PR-VO_VarEntry_Image~">
                  </div>
               {/PR-VO_VarEntry_CrossMatch}

               <!-- Kombination existiert nicht, Farbbild ausgegraut anzeigen -->
               {!PR-VO_VarEntry_CrossMatch}
                  <div class="combination_not_found">
                     <img src="../images/web/variation_color_not_found.png" class="variation_color_not_found">
                     <img src="~PR-VO_VarEntry_Image~">
                  </div>
               {/!PR-VO_VarEntry_CrossMatch}

            {/PR-VO_VarCrossMatch}

            <!-- Der Käufer hat keine Größe gewählt, Farbbild normal anzeigen -->
            {!PR-VO_VarCrossMatch}
               <div class="combination_found">
                  <img src="~PR-VO_VarEntry_Image~">
               </div>
            {/!PR-VO_VarCrossMatch}

            </a>

         {/PR-VO_VarEntry_Image}

      {/@PR-VO_VarEntry_Data}
      </div> <!-- variation_images -->
   {/DC-CompareDigitGTE($PR-VO_VarData$,2)}

   <!-- Nur eine Variante vorhanden, beispielsweise nur Farbe, keine Größe -->
   {!DC-CompareDigitGTE($PR-VO_VarData$,2)}
      {@PR-VO_VarEntry_Data}
         {PR-VO_VarEntry_Image}
           <img src="~PR-VO_VarEntry_Image~" title="~PR-VO_VarEntry_Value~">
         {/PR-VO_VarEntry_Image}
      {/@PR-VO_VarEntry_Data}
   {/!DC-CompareDigitGTE($PR-VO_VarData$,2)}

   {/PR-VO_VarCode(color)}
   {/@PR-VO_VarData}

{/PR-VO_VarData}
{/PR-VO_Available}
```

Die Schleife läuft über alle einzeln darstellbaren Varianten. Ausgegeben werden soll hier nur die Farbe, deshalb steht innerhalb der Schleife die Klammerung `PR-VO_VarCode(color)` mit der technischen ID.

Innerhalb der Schleife über die Farbwerte, also rot, gelb, grün und blau, werden zwei Fragen geprüft. Erstens, ob der Käufer die Cross-Variante Größe gewählt oder gesucht hat. Zweitens, falls ja, ob die aktuelle Farbe in dieser Größe überhaupt existiert. Genau diese zweite Prüfung sorgt dafür, dass das Farbfeld ausgegraut erscheint, wenn es die Kombination nicht gibt.

### Großbild anzeigen

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PR-VO_Available}
{PR-VO_VarData}

   <!-- Hat der Käufer die Variante mit dem Namen Farbe gewählt oder wurde sie gefunden? -->
   {PR-VO_VarData_Matched_Name(Farbe)}

      <!-- Innerhalb dieser Klammerung ist die gefundene Variante geladen,
           das Großbild lässt sich deshalb direkt ausgeben -->
      <a href="~PR-VO_VarEntry_Link~"><img id="img_detail_~PR-Position~" src="~PR-VO_VarEntry_Image~"></a>

      <!-- Optional: Der Käufer hat Farbe und Größe gewählt, die Kombination existiert aber nicht.
           Hier lässt sich ein Hinweis ausgeben -->
      {PR-VO_VarCrossMatch}
         {!PR-VO_VarEntry_CrossMatch}
            <!-- Kombination aus Größe und Farbe existiert nicht -->
         {/!PR-VO_VarEntry_CrossMatch}
      {/PR-VO_VarCrossMatch}

   {/PR-VO_VarData_Matched_Name(Farbe)}

   <!-- Der Käufer hat die Variante Farbe nicht gewählt -->
   {!PR-VO_VarData_Matched_Name(Farbe)}

      ~DC-FP1_reset~            <!-- freien Parameter zurücksetzen -->

      {@PR-VO_VarData}
         {PR-VO_VarCode(color)}

            {@PR-VO_VarEntry_Data}      <!-- Schleife über die Farben, nur den ersten Eintrag ausgeben -->

               {!DC-FP1}                <!-- nichts ausgeben, wenn bereits ein Eintrag ausgegeben wurde -->
                  {PR-VO_VarEntry_Image}
                     <a href="~PR-VO_VarEntry_Link~"><img id="img_detail_~PR-Position~" src="~PR-VO_VarEntry_Image~" alt="~PR-Name~"></a>
                     ~DC-FP1_set(yes)~  <!-- merken, dass ein Eintrag ausgegeben wurde -->
                  {/PR-VO_VarEntry_Image}
               {/!DC-FP1}

            {/@PR-VO_VarEntry_Data}

         {/PR-VO_VarCode(color)}
      {/@PR-VO_VarData}

   {/!PR-VO_VarData_Matched_Name(Farbe)}

{/PR-VO_VarData}
{/PR-VO_Available}
```

Geprüft wird zuerst, ob der Käufer die Variante Farbe gewählt hat oder sie über die Suche gefunden wurde. Ist das der Fall, ist innerhalb der Klammerung genau diese Variante geladen und das Großbild lässt sich ohne Schleife ausgeben. Optional prüfen Sie zusätzlich, ob auch eine Größe gewählt wurde und die Kombination existiert, um den Käufer sonst darauf hinzuweisen.

Hat der Käufer keine Farbe gewählt, soll das erste Großbild mit dem passenden Deep-Link erscheinen. Dafür läuft die Schleife über die Farben, ausgegeben werden soll aber nur der erste Eintrag.

Diese Begrenzung übernimmt der freie Parameter 1. Vor der Schleife wird er zurückgesetzt. Innerhalb der Schleife erfolgt die Ausgabe nur, solange er nicht gesetzt ist. Direkt nach der ersten Ausgabe wird er gesetzt, sodass alle weiteren Durchläufe nichts mehr ausgeben.

> [!WARNING]
>
> Achten Sie auf den Unterschied zwischen Name und Code. `PR-VO_VarCode(color)` erwartet die technische ID, `PR-VO_VarData_Matched_Name(Farbe)` dagegen den Namen der Variante. Für den Zugriff über die technische ID gibt es `PR-VO_VarData_Matched_Code()`.

### Verfügbare Größen anzeigen

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PR-VO_Available}
{PR-VO_VarData}
   <div class="variations_size">

   {@PR-VO_VarData}
      {PR-VO_VarCode(size)}        <!-- nur die Variante Größe ausgeben -->

         <!-- Der Käufer hat eine Farbe gewählt oder sie wurde gefunden -->
         {PR-VO_VarCrossMatch}
            <p>Größen für ~PR-VO_VarCrossMatchValue~</p>
         {/PR-VO_VarCrossMatch}

         <!-- Der Käufer hat keine Farbe gewählt -->
         {!PR-VO_VarCrossMatch}
            <p>Erhältlich in:</p>
         {/!PR-VO_VarCrossMatch}

         {DC-CompareDigitGTE($PR-VO_VarData$,2)}   <!-- mindestens zwei Varianten vorhanden -->

         {@PR-VO_VarEntry_Data}                    <!-- Schleife über alle existierenden Größen -->

            <!-- Keine Farbe gewählt, Größe normal anzeigen -->
            {!PR-VO_VarCrossMatch}
               <a href="~PR-VO_VarEntry_Link~">~PR-VO_VarEntry_Value~</a>
            {/!PR-VO_VarCrossMatch}

            <!-- Farbe gewählt -->
            {PR-VO_VarCrossMatch}

               <!-- Kombination existiert, Größe normal anzeigen -->
               {PR-VO_VarEntry_CrossMatch}
                  <a href="~PR-VO_VarEntry_Link~">~PR-VO_VarEntry_Value~</a>
               {/PR-VO_VarEntry_CrossMatch}

               <!-- Kombination existiert nicht, Größe ausgegraut anzeigen -->
               {!PR-VO_VarEntry_CrossMatch}
                  <a href="~PR-VO_VarEntry_Link~" class="variations_size_not_found">~PR-VO_VarEntry_Value~</a>
               {/!PR-VO_VarEntry_CrossMatch}

            {/PR-VO_VarCrossMatch}

         {/@PR-VO_VarEntry_Data}

         {/DC-CompareDigitGTE($PR-VO_VarData$,2)}

         <!-- Nur eine Variante vorhanden, beispielsweise nur Größe -->
         {!DC-CompareDigitGTE($PR-VO_VarData$,2)}
            {@PR-VO_VarEntry_Data}
              <a href="~PR-VO_VarEntry_Link~">~PR-VO_VarEntry_Value~</a>
            {/@PR-VO_VarEntry_Data}
         {/!DC-CompareDigitGTE($PR-VO_VarData$,2)}

      {/PR-VO_VarCode(size)}
   {/@PR-VO_VarData}

   </div> <!-- variations_size -->
{/PR-VO_VarData}
{/PR-VO_Available}
```

Vor der Ausgabe der einzelnen Größen wird unterschieden, ob der Käufer die Cross-Variante Farbe gewählt hat. Ist das der Fall, steht über den Größen, für welche Farbe sie gelten. Andernfalls erscheint, in welchen Größen das Produkt generell verfügbar ist.

Innerhalb der Schleife über die Größenwerte, also XS, S, M und L, gelten dieselben zwei Prüfungen wie bei den Farben, nur mit vertauschten Rollen. Auch hier sorgt die zweite Prüfung dafür, dass eine Größe ausgegraut erscheint, wenn es sie in der gewählten Farbe nicht gibt.

## Tags

Die Klammern hinter einigen Tag-Namen zeigen an, dass das Tag ein Argument entgegennimmt.

### Verfügbarkeit

| Tag | Bedeutung |
| - | - |
| `PR-VO_Available` | Zeigt an, ob die Varianten des Produkts einzeln dargestellt werden können, das Bekleidungsmodul für dieses Produkt also nutzbar ist. Das setzt voraus, dass die Daten vorliegen und die Funktion für Ihren Shop freigeschaltet ist |

### Schleife über die Varianten

| Tag | Bedeutung |
| - | - |
| `PR-VO_VarData` | Anzahl der einzeln darstellbaren Varianten, zugleich die Schleife darüber |
| `PR-VO_VarPosition` | Positionsnummer innerhalb der Schleife |
| `PR-VO_VarName()` | Name der Variante |
| `PR-VO_VarCode()` | Code, also die technische ID der Variante |

### Schleife über die Variantenwerte

| Tag | Bedeutung |
| - | - |
| `PR-VO_VarEntry_Data` | Anzahl der Variantenwerte, zugleich die Schleife darüber |
| `PR-VO_VarEntry_Position` | Positionsnummer innerhalb der Schleife |
| `PR-VO_VarEntry_Value()` | Variantenwert |
| `PR-VO_VarEntry_Code()` | Code, also die technische ID des Variantenwerts |
| `PR-VO_VarEntry_Number` | Produktnummer des Variantenwerts |
| `PR-VO_VarEntry_NumberPart` | Teil-Produktnummer des Variantenwerts |
| `PR-VO_VarEntry_Link` | Link auf das Produkt über die zugewiesene Produktnummer |
| `PR-VO_VarEntry_Text` | Kurzbeschreibung oder hinterlegter Text des Variantenwerts |

### Bilder des Variantenwerts

| Tag | Bedeutung |
| - | - |
| `PR-VO_VarEntry_LargeImage` | Pfad zum großen Produktbild |
| `PR-VO_VarEntry_Image` | Pfad zum normalen Produktbild |
| `PR-VO_VarEntry_ThumbNail` | Pfad zum kleinen Produktbild |
| `PR-VO_VarEntry_MiniThumbNail` | Pfad zum kleinsten Produktbild |

### Treffer aus Suche und Filter

| Tag | Bedeutung |
| - | - |
| `PR-VO_VarMatched` | Der Bereich erscheint, wenn ein Wert dieser Variante über Suche oder Kategoriefilter gefunden wurde |
| `PR-VO_VarEntry_Matched` | Der Bereich erscheint, wenn der Variantenwert über Suche oder Kategoriefilter gefunden wurde |
| `PR-VO_VarData_Matched_Code()` | Zeigt an, ob die Variante mit dem angegebenen Code gefunden wurde. Innerhalb der Klammerung sind die Daten dieser Variante geladen, dort lassen sich nahezu alle Tags mit den Präfixen `PR-VO_Var` und `PR-VO_VarEntry` verwenden |
| `PR-VO_VarData_Matched_Name()` | Dasselbe, angesprochen über den Namen der Variante statt über den Code |
| `PR-VO_VarCrossMatch` | Der Bereich erscheint, wenn nicht die aktuelle, sondern die andere Variante gefunden wurde |
| `PR-VO_VarCrossMatchValue` | Variantenwert der gefundenen anderen Variante |
| `PR-VO_VarCrossMatchCode` | Code des Variantenwerts der gefundenen anderen Variante |
| `PR-VO_VarEntry_CrossMatch` | Der Bereich erscheint, wenn die andere Variante gefunden wurde und zusätzlich die Kombination aus deren gefundenem Wert und dem aktuellen Variantenwert existiert |

## Alternative: Varianten per MouseOver einblenden

Statt die Varianten dauerhaft anzuzeigen, können Sie sie erst einblenden, sobald der Käufer mit der Maus über das Produkt fährt. Die Kategorie- und Suchansicht bleibt dadurch ruhiger.

![Bekl Screen Comfort2](https://mintcdn.com/websaleag-44ee7ea6/Dgb_SNFMeC9HkKBV/images/bekl_screen_comfort2.jpg?fit=max\&auto=format\&n=Dgb_SNFMeC9HkKBV\&q=85\&s=6b665a928755df0b2e4ea52acb2cb6cd)

Materialien: Beispieltemplate für die MouseOver-Darstellung


## Related topics

- [Meta-Felder](https://dokumentation.websale.de/v8s/schnittstellen/produkte-und-kategorien/ws-sftp-produkte-pro/meta-felder.md)
- [Produkte einer Kategorie](https://dokumentation.websale.de/v8s/kategorien/produkte-einer-kategorie.md)
- [Search API](https://dokumentation.websale.de/schnittstellen/search-api.md)


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