Produktvergleich - WEBSALE Dokumentation

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

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

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 · Gruppierungsprodukte

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.

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 <ProductComparison> an, falls er noch fehlt.

<ProductComparison>
   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.
</ProductComparison>

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

Schritt 3: Die Vergleichsseite zuweisen

Tragen Sie im Abschnitt <Templates> das Template für die Vergleichsseite ein.

<Templates>
   ...
   ProductComparison = ws_product_comparison.htm
   ...
</Templates>

Referenz: Abschnitt 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.

<head>
   ...
   <link rel="stylesheet" type="text/css" href="js/colorbox.css">
   <script type="text/javascript" src="/$WS/ws_sysdata/js/ws-system-1.8.3.js"></script>
   <script type="text/javascript" src="../IHR_VERZEICHNIS/ws-design-1.8.3.js"></script>
   ...
</head>

Die Container gehören an den Anfang des <body>.

{WS-TplComment}<!-- versteckter Link, ueber den das Layer geoeffnet wird -->{/WS-TplComment}
<div style="display:none;">
   <a class="PRC-Show" href="#"></a>
</div>

{WS-TplComment}<!-- Layer fuer den Produktvergleich -->{/WS-TplComment}
<div id="PC-Wrapper" style="display:none;">
   <div id="PC-Content" style="background-color:#ffffff;">
      <img src="js/colorbox-images/loading.gif" alt="">
   </div>
</div>

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

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.

<div class="jsonly" style="display:none;">
   ...
</div>

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.

<div id="PC-Alert" style="display:none;">
   <p><b>Hinweis</b></p>
   <p id="PC-Alert-Message"></p>
   <p><a href="#" onclick="$('#'+ws_PRCAlertDiv).hide(); return false;">schließen</a></p>
</div>

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.

{WS-ProductComparison}
   <div class="jsonly" style="display:none;">

      {PRC-AddLink}
         <input id="PRC-checkbox-~PR-Position~" type="checkbox"
                onclick="ws_PRCcheckboxHit('PRC-checkbox-~PR-Position~', '~PRC-AddLink(AJAX)~', '~PRC-DeleteLink(AJAX)~');"
                {PRC-IsCompared}checked{/PRC-IsCompared}>
         <label for="PRC-checkbox-~PR-Position~">Produkt vergleichen</label>
      {/PRC-AddLink}

      <a href="#" onclick="return ws_PRCshowPRCLayer('~WS-ProductComparison_Link~');">
         Produktvergleich anzeigen
      </a>

   </div>
{/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() · PRC-DeleteLink() · PRC-IsCompared · PR-Position · WS-ProductComparison_Link

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

<form action="~FORM-Product~" method="post" name="product" id="productform">

Schritt B: Die Schaltfläche in dieses Formular setzen

<div class="jsonly" style="display:none;">
   <input type="submit" name="~BT-ProductCompare~" value="Produkt vergleichen"
          onclick="return ws_PRCaddToProductCompare('productform', '~WS-Charset~', '~BT-ProductCompare~');">
</div>

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)

<div class="jsonly" style="display:none;">
   <a href="#" onclick="return ws_PRCshowPRCLayer('~WS-ProductComparison_Link~');">
      Produktvergleich anzeigen
   </a>
</div>

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 · FORM-Product · WS-Charset

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.

{WS-ProductComparison}
   <div class="jsonly" style="display:none;">
      <a href="#" onclick="return ws_PRCshowPRCLayer('~WS-ProductComparison_Link~');">
         Produktvergleich anzeigen
      </a>
   </div>
{/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 · WS-ProductComparison_MaxProducts · WS-ProductComparison_NumberOfProducts · MSG-ProductCompare_Notify · Styles für Produktvergleich

​Voraussetzungen

​Was sich nicht vergleichen lässt

​Grundeinrichtung

​Schritt 1: Freischaltung beantragen

​Schritt 2: Den Abschnitt in der Shopkonfiguration anlegen

​Schritt 3: Die Vergleichsseite zuweisen

​Schritt 4: Die Vergleichsseite anlegen

​Schritt 5: Bibliotheken und Layer einbinden

​Die Klasse jsonly

​Auf der Produktübersichtsseite anbieten

​Den Hinweis-Layer ergänzen

​Checkbox und Link setzen

​Auf der Produktdetailansicht anbieten

​Schritt A: Dem Produktformular eine ID geben

​Schritt B: Die Schaltfläche in dieses Formular setzen

​Schritt C: Den Link zum Anzeigen ergänzen (optional)

​Auf einer beliebigen Seite anzeigen

​Tags im Überblick

​Verwandte Themen

Voraussetzungen

Was sich nicht vergleichen lässt

Grundeinrichtung

Schritt 1: Freischaltung beantragen

Schritt 2: Den Abschnitt in der Shopkonfiguration anlegen

Schritt 3: Die Vergleichsseite zuweisen

Schritt 4: Die Vergleichsseite anlegen

Schritt 5: Bibliotheken und Layer einbinden

Die Klasse `jsonly`

Auf der Produktübersichtsseite anbieten

Den Hinweis-Layer ergänzen

Checkbox und Link setzen

Auf der Produktdetailansicht anbieten

Schritt A: Dem Produktformular eine ID geben

Schritt B: Die Schaltfläche in dieses Formular setzen

Schritt C: Den Link zum Anzeigen ergänzen (optional)

Auf einer beliebigen Seite anzeigen

Tags im Überblick

Verwandte Themen