> ## 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 Varianten als Tabelle darstellen > Wie Sie abhängige Varianten in WEBSALE V8s als Tabelle ausgeben, ab welcher Menge sich das lohnt und wie Sie im Template zwischen Tabelle und Auswahllisten umschalten. Bei der Tabellendarstellung sieht der Käufer alle Varianten-Kombinationen eines Produkts auf einen Blick, statt sie nacheinander auszuwählen. Das eignet sich für Produkte mit wenigen Kombinationen und erlaubt es, mehrere Varianten gleichzeitig in den Warenkorb zu legen. Zwei abhängige Varianten "Farbe" und "Größe" mit zehn Kombinationen ergeben beispielsweise diese Tabelle: | Produktnummer | Farbe | Größe | Preis | Menge | | - | - | - | - | - | | 1001 | rot | S | 10,00 EUR | | | 1002 | rot | M | 11,00 EUR | | | 1003 | rot | L | 12,00 EUR | | | 1004 | rot | XL | 12,00 EUR | | | 1005 | blau | S | 15,00 EUR | | | 1006 | blau | M | 15,00 EUR | | | 1007 | blau | XXL | 19,00 EUR | | | 1008 | gelb | S | 5,00 EUR | | | 1009 | gelb | M | 5,00 EUR | | | 1010 | gelb | L | 5,00 EUR | | ## Wann eine Tabelle passt Technisch unterstützt WEBSALE V8s bis zu 100 Varianten-Kombinationen in der Tabelle. Dieser Wert ist eine Obergrenze des Systems und kein Richtwert. Eine Tabelle mit 100 Zeilen leidet an Übersichtlichkeit, Bedienbarkeit, Seitendesign und Ladezeit gleichermaßen. Produkte können mehrere hundert oder sogar mehrere tausend Kombinationen haben. Für diese ist nur die Anzeige über Auswahllisten sinnvoll, weil dort jeweils nur ein Teil der Varianten erscheint. Deshalb entscheiden Sie nicht pauschal, sondern je Produkt. Im Template hinterlegen Sie einen Maximalwert für die Varianten-Kombinationen. Wir empfehlen 25: * Ein Produkt mit höchstens 25 Kombinationen erscheint als Tabelle. * Ein Produkt mit mehr als 25 Kombinationen erscheint als Auswahlliste. ## Welche Produktdaten in die Tabelle gehören Anzeigen lassen sich beliebige Produktdaten. Neben den Varianten selbst, also beispielsweise Farbe und Größe, empfehlen wir: * die Produktnummer * das Produktbild, falls es von den Varianten abhängt * den Preis, falls er von den Varianten abhängt * Lagerbestand oder Lieferbarkeit, falls vorhanden * ein Eingabefeld für die Menge ## Ein oder mehrere Mengenfelder Für die Mengeneingabe gibt es zwei Bauformen, und die Wahl bestimmt, wie viel der Käufer in einem Durchgang bestellen kann. **Ein Mengenfeld je Zeile.** So wie in der Tabelle oben. Der Käufer legt damit mehrere Varianten gleichzeitig in den Warenkorb, beispielsweise zwei rote in Größe M und eine blaue in XXL. **Ein einzelnes Mengenfeld für die ganze Tabelle.** Dann muss der Käufer zuerst eine Variante auswählen, wofür die Zeilen verlinkt werden. Klickt er beispielsweise auf die Produktnummer 1007, erscheinen deren Daten in einem Block "Ihre Auswahl" und lassen sich von dort in den Warenkorb legen. Ob bereits eine Produktnummer gewählt wurde, prüfen Sie im Template mit [`ST-DepVar_OK`](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation). ## Integration Eingebaut wird die Tabelle auf dem Einzelprodukt-Template. ### Maximalwert im Template setzen Im Bereich `WS-Config` legen Sie fest, bis zu welcher Anzahl an Kombinationen die Tabelle verwendet wird. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {WS-Config} ... MAXSeparatedDepVariations = 25 {/WS-Config} ``` Referenz: [WS-Config](https://dokumentation.websale.de/v8s/referenz/tags/ws/shop-seite-und-technik.md#die-tags-im-uberblick) ### Tabelle aufbauen Die Klammerung [`PR-SeparateDepVariations`](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten) entscheidet über die Darstellung. Im positiven Bereich bauen Sie die Tabelle, im negativen die Auswahllisten oder Links. Beide Zweige gehören ins Template, sonst bleiben Produkte jenseits des Maximalwerts ohne Variantenauswahl. Innerhalb der Tabelle übernimmt die Klammerung der Variantennamen eine zweite Aufgabe: Sie erzeugt die Spalten dynamisch. Hat ein Produkt nur die Variante Farbe, erscheint auch nur diese Spalte. Hat es Farbe, Größe und Typ, erscheinen drei. Dasselbe Template bedient damit alle Produkte. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {PR-SeparateDepVariations} {CAT-AdvData($DepVariations,99)} {PR-DepVariationName1}{/PR-DepVariationName1} {PR-DepVariationName2}{/PR-DepVariationName2} {PR-DepVariationName3}{/PR-DepVariationName3} {@PR-Data} {PR-DepVariationName1}{/PR-DepVariationName1} {PR-DepVariationName2}{/PR-DepVariationName2} {PR-DepVariationName3}{/PR-DepVariationName3} {/@PR-Data}
Produktnummer~PR-DepVariationName1~~PR-DepVariationName2~~PR-DepVariationName3~Preis Menge
~PR-Number~~PR-DepVariationValue1~~PR-DepVariationValue2~~PR-DepVariationValue3~~PR-Price~ ~WS-Currency~
{/CAT-AdvData($DepVariations,99)} {/PR-SeparateDepVariations} {!PR-SeparateDepVariations} ... Hier werden die Auswahllisten angezeigt. ... {/!PR-SeparateDepVariations} ``` Beachten Sie die Reihenfolge der Klammerungen. `CAT-AdvData($DepVariations,99)` initialisiert die Liste der Kombinationen, erst danach liefert die Schleife `@PR-Data` je Durchlauf eine Kombination. ## Tags | Tag | Bedeutung | | - | - | | `PR-SeparateDepVariations` | Der Bereich erscheint, wenn die Varianten als Tabelle dargestellt werden. Im negativen Bereich stehen die Auswahllisten oder Links | | [`CAT-AdvData()`](https://dokumentation.websale.de/v8s/referenz/tags/cat/navigation-und-kategoriebaum#die-tags-im-uberblick) | Initialisiert die Liste der Varianten-Kombinationen | | [`PR-Data`](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten#die-tags-im-uberblick) | Schleife über die Kombinationen, gibt die Produktdaten aus | | `PR-DepVariationName1…100` | Name der Variante, beispielsweise "Farbe" oder "Größe". Als Klammerung erzeugt sie die Tabellenspalten dynamisch | | [`PR-DepVariationValue1…100`](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten) | Wert der Variante, beispielsweise "rot" oder "XXL" | | [`PR-DepVarLink`](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten) | Link auf eine einzelne Variante, verwendet als `` | | [`PR-DepVariationSelected`](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten) | Zeigt an, ob diese Variante gewählt wurde, beispielsweise über ihren Link | | [`PR-Quantity_Input`](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten) | Feldname für das Mengeneingabefeld | | [`PR-SelectedDepVariations`](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten) | Gibt alle Variantenwerte der gewählten Variante aus. WEBSALE V8s erzeugt daraus automatisch eine zweispaltige Tabelle | | `ST-DepVar_OK` | Der Bereich erscheint, wenn auf einen Variantenlink geklickt wurde | ## Styles Referenz: [Styles für Produkte](https://dokumentation.websale.de/v8s/referenz/styles/katalog-und-produkte.md) ## Verwandte Themen * Wegweiser: [Varianten anzeigen](https://dokumentation.websale.de/v8s/referenz/tags/offer-kundenspezifische-angebote.md#varianten-anzeigen) * Wegweiser: [Abhängige Varianten als Auswahllisten darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-auswahllisten.md) * Wegweiser: [Abhängige Varianten als Links darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-links-darstellen.md) * Wegweiser: [Abhängige Varianten per AJAX nachladen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-per-ajax-nachladen.md) ## Related topics - [Abhängige Varianten als grafische Ansicht anzeigen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-grafische-ansicht-anzeigen.md) - [Abhängige Varianten als Auswahllisten darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-auswahllisten.md) - [Abhängige Varianten als Links darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-links-darstellen.md) - [Abhängige Varianten anzeigen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-anzeigen.md) - [Abhängige Varianten per AJAX nachladen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-per-ajax-nachladen.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.