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 · Referenz: PRC- (Produktvergleich)
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.
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.ws_product_comparison_horizontal.htm
ws_product_comparison_horizontal.htm
~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.{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:
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.
ws_product_comparison_vertical.htm
ws_product_comparison_vertical.htm
{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 Ihrews_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.
Konfigurationsblock aus ws_design_for_vertical_comparison.js
Konfigurationsblock aus ws_design_for_vertical_comparison.js
Was die Variablen steuern
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 · Referenz: Styles für Produktvergleich