> ## 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. # Produktvergleich > Produkte aus verschiedenen Kategorien nebeneinander vergleichen, mit Checkbox in der Produktliste, Schaltfläche auf der Detailseite und Anzeige in einem Layer. Wer zwischen drei ähnlichen Geräten schwankt, möchte ihre Daten nebeneinander sehen und nicht dreimal hin und her blättern. Genau das leistet der Produktvergleich: Der Käufer sammelt Produkte ein, auch aus verschiedenen Kategorien, und bekommt sie in einer gemeinsamen Übersicht. Welche Felder verglichen werden, legen Sie je Produkt fest. Neben Standardfeldern wie Produktname oder Preis lassen sich auch freie Felder heranziehen. Die Übersicht erscheint in einem Layer, den Sie auf jedem Shop-Template einblenden können. Die Produkte lassen sich darin waagerecht oder senkrecht anordnen. Zu jedem Produkt im Vergleich können Sie: * eine beliebige Auswahl von Produktinformationen anzeigen, wie auf der Produktdetailansicht * einen Link zur Produktdetailansicht anbieten * einen Link zum Entfernen aus dem Vergleich anbieten * das Produkt direkt in den Warenkorb legen, sofern alle Voraussetzungen erfüllt sind, beispielsweise die Auswahl abhängiger Varianten * einen Link zur Verwaltung des gespeicherten Warenkorbs anbieten ## Voraussetzungen | Voraussetzung | | | - | - | | Freischaltung durch die WEBSALE AG | zwingend, siehe Schritt 1 | | JavaScript im Browser des Käufers | aktiviert | | jQuery | mindestens Version 1.3.2 | | jQuery-Plugin Colorbox | für den Layer | | WEBSALE JavaScript-Systembibliothek | mindestens Version 1.0.0 | > [!WARNING] > > Der Produktvergleich arbeitet durchgehend mit AJAX und einem Layer. Ohne aktives JavaScript steht die Funktion nicht zur Verfügung. Deshalb blenden alle Beispiele ihre Bedienelemente erst per JavaScript ein, siehe den Hinweis zur Klasse `jsonly` weiter unten. Referenz: [WEBSALE JavaScript-Systembibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md) ## Was sich nicht vergleichen lässt | Produktart | Vergleichbar | Grund | | - | - | - | | normale Produkte | ja | | | Set-Produkte | nein | ein Set besteht aus mehreren Einzelprodukten und hat keine eigenen Vergleichswerte | | Bestandteile eines Sets | nein | dieselbe Begründung | | Gruppierungsoberprodukte | nein | sie besitzen keine eigenen Produktattribute | | Gruppierungsunterprodukte | ja | sie sind normale Produkte | Sie müssen diese Fälle im Template nicht selbst abfangen. Bei einem Set-Produkt und bei einem Set-Bestandteil liefert `PRC-AddLink` nichts, und die Klammerung `{PRC-AddLink}` bleibt damit leer. Genau deshalb steht die Checkbox in den Beispielen unten innerhalb dieser Klammerung. Wegweiser: [Set-Produkte](https://dokumentation.websale.de/v8s/warenkorb/warenkorb-anzeigen-loeschen.md#set-produkte) · [Gruppierungsprodukte](https://dokumentation.websale.de/v8s/produkte/gruppierungsprodukte-anzeigen.md) ## Grundeinrichtung Die folgenden fünf Schritte gelten unabhängig davon, wo Sie den Produktvergleich anbieten. ### Schritt 1: Freischaltung beantragen Der Produktvergleich funktioniert nur, wenn er für Ihren Shop freigeschaltet ist. Wenden Sie sich dafür an Ihren Ansprechpartner bei der WEBSALE AG. > [!WARNING] > > Die Freischaltung ist die einzige Stelle, an der der Produktvergleich eingeschaltet wird. Der Parameter `Allow` in der `shop.config` kann ihn nur **ausschalten**, nicht einschalten. Wenn nichts erscheint, obwohl `Allow = yes` gesetzt ist, fehlt die Freischaltung. ### Schritt 2: Den Abschnitt in der Shopkonfiguration anlegen Legen Sie in der `shop.config` den Abschnitt `` an, falls er noch fehlt. ```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} Allow = yes Notify-MaxProductsReached = Sie können nicht mehr Produkte vergleichen. Bitte entfernen Sie zuerst eines. Notify-GeneralError = Das Produkt konnte nicht zum Vergleich hinzugefügt werden. ``` | Parameter | Wirkung | | - | - | | `Allow` | `no` schaltet den freigeschalteten Produktvergleich ab. Jeder andere Wert lässt ihn an | | `Notify-MaxProductsReached` | Text, wenn der Käufer die Höchstzahl erreicht hat | | `Notify-GeneralError` | Text für alle übrigen Fehlerfälle | Hinterlegen Sie beide Texte. Sie erscheinen im Hinweis-Layer neben der Checkbox, und ohne sie bleibt dieser Layer leer. Der Käufer klickt dann eine Checkbox an, nichts geschieht, und er erfährt nicht, warum. Referenz: [Abschnitt ProductComparison](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md#productcomparison) ### Schritt 3: Die Vergleichsseite zuweisen Tragen Sie im Abschnitt `` das Template für die Vergleichsseite ein. ```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ProductComparison = ws_product_comparison.htm ... ``` Referenz: [Abschnitt Templates](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/grundlagen-und-technik.md#templates) ### Schritt 4: Die Vergleichsseite anlegen Dieses Template füllt den Layer. Für den Aufbau stehen fertige Vorlagen bereit, je eine für die beiden Anordnungen. | Anordnung | Vorlage | | - | - | | waagerecht | `ws_product_comparison_horizontal.htm` | | senkrecht | `ws_product_comparison_vertical.htm` und `ws_design_for_vertical_comparison.js` | Die senkrechte Anordnung braucht zusätzlich die genannte JavaScript-Datei. Die waagerechte kommt ohne aus. Das ist bei der Entscheidung zwischen beiden das einzige technische Argument, alles Weitere ist eine Frage der Gestaltung. Materialien: ws\_product\_comparison\_horizontal.htm · ws\_product\_comparison\_vertical.htm · ws\_design\_for\_vertical\_comparison.js ### Schritt 5: Bibliotheken und Layer einbinden Auf **jedem** Template, das den Produktvergleich anbietet oder anzeigt, brauchen Sie die Systembibliothek, Ihre Designkomponente, das Stylesheet des Layers und zwei `div`-Container. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ... ``` Die Container gehören an den Anfang des ``. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {WS-TplComment}{/WS-TplComment}
{WS-TplComment}{/WS-TplComment} ``` > [!WARNING] > > Der versteckte Link mit der Klasse `PRC-Show` ist keine Zierde. Das Layer lässt sich nur über einen vorhandenen Link öffnen. Fehlt er, passiert beim Klick auf "Produktvergleich anzeigen" nichts. Der äußere Container `PC-Wrapper` ist die Hülle, der innere `PC-Content` nimmt den Inhalt der Vergleichsseite auf. Die Ladegrafik darin ist das, was der Käufer sieht, solange nachgeladen wird. Materialien: [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md) ## Die Klasse `jsonly` In allen folgenden Beispielen stehen die Bedienelemente in einem Container mit der Klasse `jsonly` und `display:none`. Die Systembibliothek blendet jeden solchen Container ein, sobald sie läuft. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` Ohne JavaScript bleibt der Container also unsichtbar. Der Käufer sieht dann gar keine Vergleichsfunktion, statt einer Checkbox, die sich anklicken lässt und nichts bewirkt. Den Klassennamen können Sie in der Designkomponente ändern. ## Auf der Produktübersichtsseite anbieten Auf der Produktübersichtsseite `ws_category.htm` bekommt jedes Produkt eine Checkbox. Ein Klick darauf fügt das Produkt im Hintergrund hinzu, die Seite bleibt stehen. ### Den Hinweis-Layer ergänzen Zusätzlich zu den Containern aus Schritt 5 brauchen Sie hier einen dritten für die Meldungen aus Schritt 2, beispielsweise wenn die Höchstzahl erreicht ist. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` Der innere Container `PC-Alert-Message` nimmt den Meldungstext auf, der äußere `PC-Alert` ist der Layer darum. Gestalten Sie ihn über eine CSS-Klasse. Die festen Maße und Farben aus älteren Beispielen sind nur zur Veranschaulichung gedacht. ### Checkbox und Link setzen Beides gehört in die Schleife `@PR-Data`. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {WS-ProductComparison} {/WS-ProductComparison} ``` Die Klammerung `{WS-ProductComparison}` zeigt den Block nur, wenn der Produktvergleich aktiv ist. Damit verschwindet die Funktion vollständig, sobald sie abgeschaltet wird, ohne dass Sie das Template anfassen müssen. `PR-Position` macht die Checkbox-ID innerhalb der Schleife eindeutig. Ohne diesen Zusatz trügen alle Checkboxen dieselbe ID, und das Skript könnte sie nicht auseinanderhalten. `PRC-IsCompared` setzt den Haken bei Produkten, die bereits im Vergleich liegen. Ohne diese Klammerung stünden die Checkboxen nach dem Zurückblättern in die Kategorie wieder leer da, obwohl die Produkte noch im Vergleich sind. Der Parameter `AJAX` bei `PRC-AddLink` und `PRC-DeleteLink` erzeugt die Fassung der Links, die ohne Seitenwechsel arbeitet. Ohne ihn würde beim Klick die Seite neu geladen. Referenz: [PRC-AddLink()](https://dokumentation.websale.de/v8s/referenz/tags/prc-produktvergleich.md#die-tags-im-uberblick) · [PRC-DeleteLink()](https://dokumentation.websale.de/v8s/referenz/tags/prc-produktvergleich.md#die-tags-im-uberblick) · [PRC-IsCompared](https://dokumentation.websale.de/v8s/referenz/tags/prc-produktvergleich.md#die-tags-im-uberblick) · [PR-Position](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md#die-stellung-in-der-liste) · [WS-ProductComparison\_Link](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md#produktvergleich-und-weiterempfehlung) ## Auf der Produktdetailansicht anbieten Hier kommt statt der Checkbox eine Schaltfläche zum Einsatz. Sie übernimmt das Produkt mitsamt den gewählten Varianten und den ausgefüllten Texteingabefeldern und öffnet danach den Vergleich. ### Schritt A: Dem Produktformular eine ID geben ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
``` ### Schritt B: Die Schaltfläche in dieses Formular setzen ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` > [!WARNING] > > Der erste Parameter ist die Formular-ID aus Schritt A. Weicht sie ab, findet die Funktion das Formular nicht und übernimmt weder Varianten noch Texteingaben. Die Schaltfläche muss **innerhalb** des Produktformulars stehen. Nur dort kann die Funktion die aktuelle Auswahl auslesen. ### Schritt C: Den Link zum Anzeigen ergänzen (optional) ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` Dieselbe Produktnummer kann mehrfach im Vergleich liegen, wenn sich die gewählten Varianten oder Texteingaben unterscheiden. Der Shop erkennt ein Produkt erst dann als bereits vorhanden, wenn Produkt, Kategorie, Varianten und Texteingaben übereinstimmen. Für den Käufer ist das erwünscht, denn genau so vergleicht er zwei Ausführungen desselben Artikels. Referenz: [BT-ProductCompare](https://dokumentation.websale.de/v8s/referenz/tags/bt/produkt-und-warenkorb.md#bt-productcompare) · [FORM-Product](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare.md#bestellablauf) · [WS-Charset](https://dokumentation.websale.de/v8s/referenz/tags/ws/shop-seite-und-technik.md#die-tags-im-uberblick) ## Auf einer beliebigen Seite anzeigen Den Layer können Sie überall öffnen lassen, auch dort, wo gar keine Produkte stehen, beispielsweise im Kopfbereich. Nötig sind dafür nur die Grundeinrichtung aus Schritt 5 und ein Link. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {WS-ProductComparison} {/WS-ProductComparison} ``` Mit `WS-ProductComparison_NumberOfProducts` können Sie an dieser Stelle die Zahl der gesammelten Produkte ausgeben. Der Link wird damit zu einer Statusanzeige, und der Käufer weiß, dass dort etwas auf ihn wartet. ## Tags im Überblick | Tag | Liefert | Gehört auf | | - | - | - | | `WS-ProductComparison` | Klammerung, aktiv oder nicht | beliebige Seiten | | `WS-ProductComparison_Link` | Adresse der Vergleichsseite | beliebige Seiten | | `WS-ProductComparison_MaxProducts` | Höchstzahl vergleichbarer Produkte | beliebige Seiten | | `WS-ProductComparison_NumberOfProducts` | Zahl der gesammelten Produkte | beliebige Seiten | | `MSG-ProductCompare_Notify` | Meldungen zum Produktvergleich | beliebige Seiten | | `PRC-AddLink` | Link zum Hinzufügen, leer bei Set-Produkten | Produktschleifen | | `PRC-DeleteLink` | Link zum Entfernen | Produktschleifen, Vergleichsseite | | `PRC-IsCompared` | Klammerung, Produkt bereits im Vergleich | Produktschleifen | | `BT-ProductCompare` | Name der Schaltfläche | Produktdetailansicht | | `PRC-CompareField` | Zahl der Vergleichsfelder, Klammerung und Schleife | Vergleichsseite | | `PRC-CompareFieldName` | technischer Feldname | Vergleichsseite | | `PRC-CompareFieldDescr` | Beschriftung des Feldes | Vergleichsseite | | `PRC-CompareFieldPosition` | laufende Nummer des Feldes | Vergleichsseite | | `PRC-CompareFieldValue` | Wert des Feldes beim aktuellen Produkt | Vergleichsseite | | `PRC-CompareFieldValueMetaX` | Wert als Meta-Angabe | Vergleichsseite | | `PRC-ComparisonWithVariations` | Klammerung, mindestens ein Produkt hat Varianten | Vergleichsseite | | `PRC-Variations` | die gewählten Varianten und Texteingaben | Vergleichsseite | `PRC-CompareFieldPosition` nimmt eine Zahl als Parameter und rechnet dann modulo. `~PRC-CompareFieldPosition(2)~` liefert also abwechselnd 1 und 0 und eignet sich damit für abwechselnd eingefärbte Zeilen. Referenz: [WS-ProductComparison](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md#produktvergleich-und-weiterempfehlung) · [WS-ProductComparison\_MaxProducts](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md#produktvergleich-und-weiterempfehlung) · [WS-ProductComparison\_NumberOfProducts](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md#produktvergleich-und-weiterempfehlung) · [MSG-ProductCompare\_Notify](https://dokumentation.websale.de/v8s/referenz/tags/msg-meldungen.md#weitere-meldungen) · [Styles für Produktvergleich](https://dokumentation.websale.de/v8s/referenz/styles/module-und-schnittstellen.md) ## Verwandte Themen * Wegweiser: [Set-Produkte](https://dokumentation.websale.de/v8s/warenkorb/warenkorb-anzeigen-loeschen.md#set-produkte) * Wegweiser: Gruppierungsprodukte * Wegweiser: [Sortieren von Produktlisten](https://dokumentation.websale.de/v8s/funktionen-fuer-produktlisten/produktlisten-sortieren.md) * Referenz: Styles für Produktvergleich ## Related topics - [Produktvergleich](https://dokumentation.websale.de/frontend/funktionsubersicht/produktvergleich.md) - [PRC- (Produktvergleich)](https://dokumentation.websale.de/v8s/referenz/tags/prc-produktvergleich.md) - [Materialien Produktvergleich](https://dokumentation.websale.de/v8s/materialien/materialien-produktvergleich.md) - [Styles für Katalog und Produkte](https://dokumentation.websale.de/v8s/referenz/styles/katalog-und-produkte.md) - [Merkzettel, Vergleich, Upload und externe Dienste](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.