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

# Materialien Produktvergleich

> Die beiden Vorlagen für die Vergleichsseite, waagerecht und senkrecht, sowie der Konfigurationsblock für die Designkomponente, der die senkrechte Anzeige steuert.

Die Vergleichsseite ist das Template, dessen Inhalt im Vergleichs-Layer erscheint. Sie bauen sie nicht von Grund auf, sondern übernehmen eine der beiden Vorlagen auf dieser Seite und passen sie an.

| Anordnung | Was Sie brauchen |
| - | - |
| waagerecht, ein Produkt je Spalte | nur die Vorlage `ws_product_comparison_horizontal.htm` |
| senkrecht, ein Produkt je Zeile | die Vorlage `ws_product_comparison_vertical.htm` **und** den Konfigurationsblock für die Designkomponente |

Wie der Produktvergleich insgesamt eingerichtet wird, welche Container auf den übrigen Templates stehen müssen und was die einzelnen Tags liefern, steht auf der Anleitungsseite und in der Referenz. Diese Seite setzt die dortigen Schritte 1 bis 3 und 5 voraus und füllt Schritt 4.

Wegweiser: [Produktvergleich](https://dokumentation.websale.de/v8s/interaktive-funktionen/produktvergleich.md) · Referenz: [PRC- (Produktvergleich)](https://dokumentation.websale.de/v8s/referenz/tags/prc-produktvergleich.md)

Beide Vorlagen sind vollständige HTML-Seiten, damit sie sich einzeln im Browser ansehen lassen. In Ihr Template gehört nur der Inhalt zwischen `body` und `/body`. Der Dateiname richtet sich danach, was Sie im Abschnitt `Templates` hinter `ProductComparison =` eingetragen haben, üblicherweise `ws_product_comparison.htm`.

> [!WARNING]
>
> Entscheiden Sie sich für eine der beiden Anordnungen. Die senkrechte wird vom Schalter `ws_PRCRotate` in der Designkomponente eingeschaltet, und dieser Schalter gilt für den ganzen Shop. Ein Shop kann also nicht beide Vorlagen gleichzeitig verwenden.

## Die waagerechte Vorlage

Diese Vorlage baut die Tabelle selbst auf: eine Kopfzeile mit den Spaltenüberschriften, darunter je eine Zeile pro verglichenem Produkt. Sie kommt ohne zusätzliches JavaScript aus.

> [accordion] ws\_product\_comparison\_horizontal.htm
>
> ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <title>~FMSG-TitleFirma~</title>
> <meta name="description" content="~FMSG-TitleFirma~ ~FMSG-MetaDescr~">
> <meta name="keywords" content="~FMSG-MetaKeywords~">
> <meta name="page-topic" content="~FMSG-MetaPageTopic~">
> <meta name="copyright" content="~FMSG-MetaCopyright~">
> <meta http-equiv="imagetoolbar" content="~FMSG-MetaImagetoolbar~">
> <meta http-equiv="language" content="~FMSG-MetaLanguage~">
> <meta name="robots" content="noindex,nofollow">
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <base href="~URL-Template~">
>
> <!--{WS-Config}
> CatMouseOver = yes
> PMPositionType = css_ul
> {/WS-Config}-->
> </head>
>
> <body>
> <h1>Inhaltsbereich des waagerechten Produktvergleichs für das Template ws_product_comparison.htm</h1>
> <p>Bitte kopieren Sie den Inhalt zwischen body und /body in Ihr Template ws_product_comparison.htm.</p>
>
> <form action="~FORM-Product~" method="post">
> {WS-ProductComparison}
>    {WS-ProductComparison_NumberOfProducts}
>       <p>Es werden ~WS-ProductComparison_NumberOfProducts~ Produkte miteinander verglichen.</p>
>    {/WS-ProductComparison_NumberOfProducts}
>    {!WS-ProductComparison_NumberOfProducts}
>       <p>Der Produktvergleich ist leer.</p>
>    {/!WS-ProductComparison_NumberOfProducts}
> {/WS-ProductComparison}
>
> {MSG-ProductCompare_Notify}
>    <p>~MSG-ProductCompare_Notify~</p>
> {/MSG-ProductCompare_Notify}
>
> {Cat-Data}
>    <table>
>    <!-- Kopfzeile -->
>    <tr>
>       <td class="prc-header">Anzahl</td>
>       <td class="prc-header">Bild</td>
>       <td class="prc-header">Name</td>
>       <td class="prc-header">Preis</td>
>       {PRC-ComparisonWithVariations}
>          <td class="prc-header">Varianten</td>
>       {/PRC-ComparisonWithVariations}
>
>       <!-- Vergleichsfelder -->
>       {@PRC-CompareField}
>          <td class="prc-header">~PRC-CompareFieldDescr~</td>
>       {/@PRC-CompareField}
>
>       <td class="prc-header">Gefunden in</td>
>       <td class="prc-header"> </td> <!-- Spalte "In den Warenkorb" -->
>       <td class="prc-header"> </td> <!-- Spalte "Vom Vergleich löschen" -->
>    </tr>
>
>    {@PR-Data}
>    <tr>
>       <td class="prc-line~PR-Position(2)~">~PR-Position~</td>
>       <td class="prc-line~PR-Position(2)~">
>          {PR-Thumbnail}
>             <a href="~PR-Link~"><img src="~PR-Thumbnail~" alt="~PR-Name~"></a>
>          {/PR-Thumbnail}
>          {!PR-Thumbnail}--{/!PR-Thumbnail}
>       </td>
>       <td class="prc-line~PR-Position(2)~">
>          <a href="~PR-Link~">~PR-Name~</a>
>       </td>
>       <td class="prc-line~PR-Position(2)~">
>          ~PR-Price~
>       </td>
>       {PRC-ComparisonWithVariations}
>          <td class="prc-line~PR-Position(2)~">
>             {PRC-Variations}~PRC-Variations~{/PRC-Variations}
>          </td>
>       {/PRC-ComparisonWithVariations}
>
>       <!-- Vergleichsfelder -->
>       {@PRC-CompareField}
>          <td class="prc-line~PR-Position(2)~">
>             ~PRC-CompareFieldValue~
>          </td>
>       {/@PRC-CompareField}
>       <td class="prc-line~PR-Position(2)~">
>          <a href="~Cat-Link~">~Cat-Name~</a>
>       </td>
>       <td class="prc-line~PR-Position(2)~">
>          {ST-ProductComparisonPosition_OK}
>             <p>Menge: <input type="text" size="4" name="~PR-Quantity_Input~" value=""><br>
>             <input type="submit" value="In den Warenkorb"></p>
>          {/ST-ProductComparisonPosition_OK}
>       </td>
>       <td class="prc-line~PR-Position(2)~">
>          <a href="javascript:ws_PRCdeletePRCElement('~PRC-DeleteLink(AJAX)~');">vom Produktvergleich löschen</a>
>       </td>
>    </tr>
>    {/@PR-Data}
>
>    </table>
> {/Cat-Data}
> </form>
>
> </body>
> </html>
> ```

> [!NOTE]
>
> `~PR-Position(2)~` wechselt zeilenweise zwischen `1` und `2`, die erzeugten Klassennamen heißen also `prc-line1` und `prc-line2`. Für drei abwechselnde Farben setzen Sie `~PR-Position(3)~` und gestalten `prc-line1` bis `prc-line3`.
>
> Der Wert ist nie `0`. WEBSALE V8s rechnet an dieser Stelle nicht mit dem gewöhnlichen Modulo, sondern gibt bei einem Rest von null den Divisor selbst aus. Der Wertebereich liegt damit immer zwischen `1` und der Zahl in der Klammer.

Materialien: [Modulo-Rechnung in WEBSALE V8s](https://dokumentation.websale.de/v8s/materialien/materialien-modulo-rechnung.md)

`{Cat-Data}` ist die Klammerung um die ganze Tabelle. Ist der Vergleich leer, fehlt sie, und es erscheint nur der Satz aus der Klammerung `{!WS-ProductComparison_NumberOfProducts}` darüber.

Die Klammerung `{ST-ProductComparisonPosition_OK}` blendet Mengenfeld und Schaltfläche aus, solange sich das Produkt nicht in den Warenkorb legen lässt, beispielsweise weil noch eine abhängige Variante fehlt. Eine Gegenklammerung `{!ST-ProductComparisonPosition_OK}` brauchen Sie dafür nicht.

Alle Mengenfelder und alle Schaltflächen liegen in **einem** Formular. Welche Produkte beim Absenden im Warenkorb landen, hängt deshalb davon ab, in welche Mengenfelder der Käufer etwas eingetragen hat, nicht davon, welche Schaltfläche er gedrückt hat. Wenn Sie das Produkt je Zeile einzeln übernehmen lassen wollen, setzen Sie je Zeile ein eigenes Formular.

## Die senkrechte Vorlage

Hier baut nicht das Template die Tabelle, sondern die WEBSALE JavaScript-Bibliothek. Die Vorlage liefert dafür zwei Abschnitte:

| Abschnitt | Inhalt |
| - | - |
| `<data>` | die Rohdaten, Feld für Feld, getrennt durch Trennzeichen |
| `<template>` | das Gerüst, in das die fertige Tabelle eingesetzt wird |

Die Bibliothek schneidet den Datenabschnitt aus der Antwort heraus, zerlegt ihn an den Trennzeichen, dreht die entstandene Tabelle um 90 Grad und setzt sie im Gerüst an die Stelle der Marke `#####REPLACE#####`. Was im Datenabschnitt eine Zeile war, wird dadurch zu einer Spalte.

Deshalb steht im Datenabschnitt als erstes die Zeile mit den Beschriftungen. Nach dem Drehen wird daraus die erste Spalte, und der Käufer liest die Eigenschaften untereinander.

> [accordion] ws\_product\_comparison\_vertical.htm
>
> ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <title>~FMSG-TitleFirma~</title>
> <meta name="description" content="~FMSG-TitleFirma~ ~FMSG-MetaDescr~">
> <meta name="keywords" content="~FMSG-MetaKeywords~">
> <meta name="page-topic" content="~FMSG-MetaPageTopic~">
> <meta name="copyright" content="~FMSG-MetaCopyright~">
> <meta http-equiv="imagetoolbar" content="~FMSG-MetaImagetoolbar~">
> <meta http-equiv="language" content="~FMSG-MetaLanguage~">
> <meta name="robots" content="noindex,nofollow">
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <base href="~URL-Template~">
>
> <!--{WS-Config}
> CatMouseOver = yes
> PMPositionType = css_ul
> {/WS-Config}-->
> </head>
>
> <body>
> <h1>Inhaltsbereich des senkrechten Produktvergleichs für das Template ws_product_comparison.htm</h1>
> <p>Bitte kopieren Sie den Inhalt zwischen body und /body in Ihr Template ws_product_comparison.htm.</p>
>
> <!-- Datenabschnitt: die Rohdaten, aus denen das JavaScript die Tabelle zusammenbaut -->
> <data>
> {Cat-Data}
>    Eigenschaften<df>
>    Bild<df>
>    Name<df>
>    Preis<df>
>    {PRC-ComparisonWithVariations}Varianten<df>{/PRC-ComparisonWithVariations}
>    {@PRC-CompareField}~PRC-CompareFieldDescr~<df>{/@PRC-CompareField}
>    Gefunden in<df>
>     <df>
>     <df><dr>
>
>    {@PR-Data}
>       ~PR-Position~<df>
>       {PR-Thumbnail}<a href="~PR-Link~"><img src="~PR-Thumbnail~" alt="~PR-Name~"></a>{/PR-Thumbnail}{!PR-Thumbnail}--{/!PR-Thumbnail}<df>
>       ~PR-Name~<df>
>       ~PR-Price~<df>
>       {PRC-ComparisonWithVariations}{PRC-Variations}~PRC-Variations~{/PRC-Variations} <df>{/PRC-ComparisonWithVariations}
>       {@PRC-CompareField}~PRC-CompareFieldValue~ <df>{/@PRC-CompareField}
>       <a href="~Cat-Link~">~Cat-Name~</a><df>
>       {ST-ProductComparisonPosition_OK}Menge: <input type="text" size="4" name="~PR-Quantity_Input~" value=""><br>
>       <input type="submit" value="bestellen">{/ST-ProductComparisonPosition_OK}<df>
>       <a href="javascript:ws_PRCdeletePRCElement('~PRC-DeleteLink(AJAX)~');">vom Produktvergleich löschen</a><df><dr>
>    {/@PR-Data}
> {/Cat-Data}
> </data>
>
> <!-- Gerüst: wird im Layer angezeigt, die Tabelle kommt an die Stelle der Marke -->
> <template>
>
> <form action="~FORM-Product~" method="post">
>    {WS-ProductComparison}
>       {WS-ProductComparison_NumberOfProducts}
>          Es werden ~WS-ProductComparison_NumberOfProducts~ Produkte miteinander verglichen.
>       {/WS-ProductComparison_NumberOfProducts}
>       {!WS-ProductComparison_NumberOfProducts}Der Produktvergleich ist leer.{/!WS-ProductComparison_NumberOfProducts}
>    {/WS-ProductComparison}
>
>    <!-- Hinweismeldungen für den Vergleich -->
>    {MSG-ProductCompare_Notify}
>       ~MSG-ProductCompare_Notify~
>    {/MSG-ProductCompare_Notify}
>
>    <!-- Hier setzt das JavaScript die fertige Tabelle ein -->
>    {Cat-Data}
>       <div id="PRC-RotateMe">
>          #####REPLACE#####
>       </div>
>    {/Cat-Data}
> </form>
> </template>
>
> </body>
> </html>
> ```

> [!WARNING]
>
> Jedes Feld endet mit `<df>`, jede Zeile mit `<dr>`. Beide Marken müssen stehen, auch bei leeren Feldern. Die beiden Zeilen mit nur einem Leerzeichen vor `<df>` in der Kopfzeile sind deshalb kein Versehen: Sie halten die Plätze für die Spalten "In den Warenkorb" und "Löschen" frei. Fehlt eine Marke, verschiebt sich ab dieser Stelle die ganze Tabelle.

Die Zahl der Felder je Zeile muss in der Kopfzeile und in jeder Produktzeile übereinstimmen. Wenn Sie eine Spalte ergänzen, ergänzen Sie sie an beiden Stellen. Dasselbe gilt für die Klammerung `{PRC-ComparisonWithVariations}`, die in beiden Zeilen vorkommt und deshalb auch in beiden gleich greift.

Die Namen `data`, `template` und die beiden Trennzeichen sind keine HTML-Elemente, sondern frei gewählte Marken, nach denen das JavaScript in der Antwort sucht. Sie stehen im Konfigurationsblock weiter unten und lassen sich dort ändern, wenn sie mit Ihrem Markup kollidieren.

Ein `style`-Block mit Beispielfarben gehört nicht in das Gerüst. Die Klassen `prc-header` und `prc-line1` bis `prc-line3` kommen in der senkrechten Vorlage ohnehin nicht vor, sie gehören zur waagerechten. Die übrigen Klassen gestalten Sie in Ihrem Stylesheet.

## Der Konfigurationsblock für die Designkomponente

Dieser Block gehört in Ihre `ws_design-X.X.X.js`. Er enthält keinen ausführbaren Code, sondern ausschließlich Variablen, mit denen Sie das Verhalten des Produktvergleichs einstellen. Die eigentliche Arbeit, auch das Drehen der Tabelle, erledigt die WEBSALE JavaScript-Bibliothek.

> [accordion] Konfigurationsblock aus ws\_design\_for\_vertical\_comparison.js
>
> ```javascript theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
> //   Bitte fügen Sie diesen Bereich in Ihre ws_design-X.X.X.js ein
>
> //////////////////////////////////////////////////////////////////////////////////////////
> //   Allgemein: "DIV-Container bei aktiviertem JavaScript einblenden"                    //
> //////////////////////////////////////////////////////////////////////////////////////////
>
> // Alle Container mit dieser Klasse werden eingeblendet, sobald die Seite geladen ist.
> // Die Container müssen dafür den Style "display: none" tragen.
> var ws_JSOnlyClass = 'jsonly';
>
> //////////////////////////////////////////////////////////////////////////////////////////
> //    Modul: "Produktvergleich"                                                         //
> //////////////////////////////////////////////////////////////////////////////////////////
>
> // Der Container, in dem der Inhalt des Layers angezeigt wird
> var ws_PRCAjaxDivContent = 'PC-Content';
>
> // Klassenname der Links, über die der Produktvergleich geöffnet wird.
> // Ein solcher Link muss auf jedem Template vorhanden sein, das den Vergleich anzeigt.
> var ws_PRCShowProductCompareClass = 'PRC-Show';
>
> // Der Container mit dieser Kennung wird eingeblendet, wenn eine Hinweismeldung erscheint,
> // beispielsweise wenn keine weiteren Produkte hinzugefügt werden können
> var ws_PRCAlertDiv = 'PC-Alert';
> // In den Container mit dieser Kennung wird der Hinweistext eingesetzt
> var ws_PRCAlertTextDiv = 'PC-Alert-Message';
>
> // Steht dieser Schalter auf true, wird der Inhalt des Vergleichs um 90 Grad gedreht
> var ws_PRCRotate = true;
>
> // Anfangs- und Endemarken der beiden Abschnitte im Template
> var ws_PRCRotateDataBegin = '<data>';
> var ws_PRCRotateDataEnd = '</data>';
> var ws_PRCRotateTemplateBegin = '<template>';
> var ws_PRCRotateTemplateEnd = '</template>';
>
> // Feld- und Zeilentrenner im Datenabschnitt
> var ws_PRCRotateDataFieldSeparator = '<df>';
> var ws_PRCRotateDataRowSeparator = '<dr>';
>
> // Aufbau der erzeugten Tabelle
> var ws_PRCRotateTableClass = 'PRC-Table';
> var ws_PRCRotateTableID = 'PRC-Table';
> var ws_PRCRotateTableTRClasses = [ 'PRC-TR1', 'PRC-TR2' ];                   // beliebig viele Klassen möglich
> var ws_PRCRotateTableTDHeaderClasses = [ 'PRC-TDHeader1', 'PRC-TDHeader2' ]; // beliebig viele Klassen möglich
> var ws_PRCRotateTableTDClasses = [ 'PRC-TD1', 'PRC-TD2' ];                   // beliebig viele Klassen möglich
> var ws_PRCRotateTableTDClassesAlternateVertical = true;
> var ws_PRCRotateTemplateReplaceTag = '#####REPLACE#####';
> ```

### Was die Variablen steuern

| Variable | Wirkung |
| - | - |
| `ws_JSOnlyClass` | Klasse, deren Container eingeblendet werden, sobald JavaScript läuft |
| `ws_PRCAjaxDivContent` | Kennung des Containers, der den Inhalt des Layers aufnimmt |
| `ws_PRCShowProductCompareClass` | Klasse des versteckten Links, über den sich der Layer öffnen lässt |
| `ws_PRCAlertDiv` | Kennung des Hinweis-Layers |
| `ws_PRCAlertTextDiv` | Kennung des Containers für den Hinweistext |
| `ws_PRCRotate` | `true` schaltet die senkrechte Anzeige ein, `false` die waagerechte |
| `ws_PRCRotateDataBegin` und `…End` | Marken um den Datenabschnitt |
| `ws_PRCRotateTemplateBegin` und `…End` | Marken um das Gerüst |
| `ws_PRCRotateDataFieldSeparator` | Feldtrenner im Datenabschnitt |
| `ws_PRCRotateDataRowSeparator` | Zeilentrenner im Datenabschnitt |
| `ws_PRCRotateTableClass` und `…ID` | Klasse und Kennung der erzeugten Tabelle |
| `ws_PRCRotateTableTRClasses` | Klassen, die reihum auf die Zeilen verteilt werden |
| `ws_PRCRotateTableTDHeaderClasses` | Klassen, die reihum auf die Kopfzellen verteilt werden |
| `ws_PRCRotateTableTDClasses` | Klassen, die reihum auf die übrigen Zellen verteilt werden |
| `ws_PRCRotateTableTDClassesAlternateVertical` | `true` wechselt die Zellklassen spaltenweise statt zeilenweise |
| `ws_PRCRotateTemplateReplaceTag` | Marke im Gerüst, an deren Stelle die Tabelle eingesetzt wird |

> [!WARNING]
>
> Die drei Klassenlisten sind Vorgaben, keine fertigen Stile. Ihr Stylesheet muss `PRC-Table`, `PRC-TR1`, `PRC-TR2`, `PRC-TDHeader1`, `PRC-TDHeader2`, `PRC-TD1` und `PRC-TD2` enthalten, sonst erscheint die Tabelle ungestaltet. Die bisherige Vorlage gestaltet davon nur vier und lässt `PRC-Table`, `PRC-TR1` und `PRC-TR2` ohne Regel.

`ws_JSOnlyClass` gehört nicht zum Produktvergleich allein. Diese Variable steuert alle Container mit der Klasse `jsonly`, die auch an anderen Stellen des Shops eingesetzt wird. Wenn Ihre Designkomponente sie bereits enthält, übernehmen Sie nur den unteren Teil des Blocks.

Für die waagerechte Anordnung brauchen Sie denselben Block, nur mit `ws_PRCRotate = false`. Die ersten fünf Variablen gelten für beide Anordnungen, alles ab den Marken nur für die senkrechte.

Materialien: [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md) · Referenz: Styles für Produktvergleich


## Related topics

- [Produktvergleich](https://dokumentation.websale.de/v8s/interaktive-funktionen/produktvergleich.md)
- [PRC- (Produktvergleich)](https://dokumentation.websale.de/v8s/referenz/tags/prc-produktvergleich.md)
- [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)
- [Materialien Parameterentfernung](https://dokumentation.websale.de/v8s/materialien/materialien-parameterentfernung.md)


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