<< Click here to display Table of Contents >> Navigation: Wegweiser > Interaktive Funktionen:

Produktvergleich

Mit der Produktvergleichs-Funktion können die Kunden mehrere Produkte (abhängig von technischen Voraussetzungen bis zu fünfzig), auch aus verschiedenen Kategorien, in übersichtlicher Präsentation miteinander vergleichen.

Sie können für jedes einzelne Produkt festlegen, welche Felder für den Vergleich herangezogen werden sollen. Neben Standardfeldern wie Produktname oder Preis können auch freie Felder berücksichtigt werden.

Der Produktvergleich kann sowohl in der Kategorieübersicht als auch der Einzelproduktansicht angeboten werden. Auf der Kategorieübersicht können Sie für jedes Produkt eine Checkbox zum Hinzufügen zum Produktvergleich anbieten. Klickt der Kunde auf diese Checkbox, wird das Produkt im Hintergrund zum Produktvergleich hinzugefügt. Die Seite bleibt stehen und wird nicht neu aufgebaut.

Auf der Produktansicht können Sie einen Button anbieten, welcher das ausgewählte Produkt (inklusive aller gewählten Varianten und ausgefüllten Texteingabefelder) zum Produktvergleich hinzufügt. Klickt der Kunde den Button, wird der Produktvergleich angezeigt.

Der Produktvergleich wird in einem Layer angezeigt, dieser kann auf jedem beliebigen Shop-Template angezeigt werden. Die verglichenen Produkte können sowohl vertikal als auch horizontal sortiert präsentiert werden.

Bei jedem Produkt können Sie

▪eine beliebige Auswahl von Produktinformationen wie auf der Produkt-Detailansicht anzeigen,

▪einen Link zur Produkt-Detailansicht anbieten,

▪einen Link zum Löschen des Produkts vom Produktvergleich anbieten,

▪das Produkt direkt in den Warenkorb legen, wenn alle notwendigen Voraussetzungen erfüllt sind (z. B. abhängige Varianten ausgewählt wurden),

▪einen Link direkt zur Verwaltung des gespeicherten Warenkorbs anbieten.

Hinweis:

Der Produktvergleich verwendet AJAX- und Layertechnik. Deshalb funktioniert dieses Feature nur dann, wenn der Kunde in seinem Browser JavaScript aktiviert hat.

Zur Realisierung der Techniken wird das JavaScript Framework "jQuery" (mindestens Version 1.3.2), das jQuery Plugin "Colorbox" sowie weitere JavaScript-Funktionen verwendet. Dies setzt die Verwendung der WEBSALE JavaScript-Systembibliothek (mindestens Version 1.0.0) voraus.
Referenz: WEBSALE JavaScript Systembibliothek

	Hinweis:
	Ein Vergleich von Set-Produkten ist nicht möglich, da Set-Produkte ihrerseits aus mehreren verschiedenen Einzelprodukten bestehen. Ein Vergleich von Gruppierungsoberprodukten ist nicht möglich, da diese keine eigenen Produktattribute besitzen. Die zugeordneten Gruppierungsunterprodukte können jedoch, da es sich um "normale" Produkte handelt, verglichen werden.

Inhalt

Produktvergleich auf der Produktübersichtsseite (ws_category.htm) integrieren

Produktvergleich auf der Produktdetailansicht (ws_product.htm) integrieren

Produktvergleich auf einer beliebigen Seite ansehen

Produktvergleich für Set- und Gruppierungsprodukte

Produktvergleich auf der Produktübersichtsseite (ws_category.htm) integrieren

Schritt 1: Freischaltung

Der Produktvergleich wird nur dann angezeigt, wenn diese Funktion für Ihren Shop freigeschaltet wurde. Bitte wenden Sie sich hierzu an Ihren WEBSALE Ansprechpartner.

Schritt 2: Produktvergleich in der Shopkonfiguration shop.config aktivieren

Fügen Sie den Abschnitt <ProductComparison> hinzu, falls er noch nicht vorhanden ist. Aktivieren Sie den Produktvergleich mit Allow = yes.

<ProductComparison>
   Allow                        = yes
   Notify-MaxProductsReached    =
   Notify-GeneralError          =
</ProductComparison>

Referenz: Abschnitt ProductComparison

Schritt 3: Zuweisen der Produktvergleichsseite (ws_product_comparison.htm) in der Shopkonfiguration shop.config

Den Parameter ProductComparison müssen Sie im Abschnitt <Templates> hinzufügen, falls er noch nicht vorhanden ist. Tragen Sie hinter dem Parameter das Template für die Produktvergleichsseite (ws_product_comparison.htm) ein.

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

Referenz: Abschnitt Templates

Schritt 4: Erstellen der Produktvergleichsseite (ws_product_comparison.htm)

Zum einfacheren Aufbau der Produktvergleichsseite (ws_product_comparison.htm) stellt WEBSALE Ihnen die folgenden Templates in den Materialien zur Verfügung:

▪Horizontale Darstellung des Produktvergleichs
Materialien: ws_product_comparison_horizontal.htm

▪Vertikale Darstellung des Produktvergleichs
Materialien: ws_product_comparison_vertical.htm
Materialien: ws_design_for_vertical_comparison.js

Schritt 5: Einbinden der benötigten JavaScripts im Headbereich

Die WEBSALE-Systembibliothek und ihre dazugehörige Designkomponente werden benötigt. Überprüfen Sie, ob diese beiden Dateien bereits auf der Produktübersichtsseite (ws_category.htm) eingebunden sind und fügen Sie diese gegebenenfalls im <head>-Bereich hinzu.

<head>
<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>

Wegweiser: WEBSALE JavaScript-Bibliothek

Schritt 6: Integration der benötigten div-Container

Die umschließende div-Container sind nicht sichtbar und fungieren hier als "Wrapper"-Container.

Der obere Bereich wird zur Anzeige des Layers benötigt, in dem unteren werden Hinweismeldungen angezeigt. (Z. B. wenn der Kunde die maximale Anzahl an Produkten im Produktvergleich erreicht hat und eine weitere Checkbox aktiviert, wird in diesem Container der Hinweistext eingeblendet).

<!-- Dummy, zum Triggern des Layers. Mindestens ein (in diesem Fall versteckter) Link muss vorhanden sein, damit das Layer per JS geöffnet werden kann -->
<div style="display:none">
   <a class="PRC-Show" href="#"></a>
</div>

<!-- Layer zur Anzeige des Produktvergleiches -->
<div id="PC-Wrapper" style="display:none;">
   <!-- Wrapper: in den inneren div-Container wird der Inhalt des Produktvergleichs geladen -->
   <div id="PC-Content" style="background-color:white;">
      <img src="js/colorbox-images/loading.gif">
   </div>
</div>

<!-- Layer zur Anzeige von Hinweismeldungen nach Klick der CheckBox -->
<div id="PC-Alert" style="position:fixed; display:none; width:300px; height:300px; left:50%; margin-left:-150px; top:100px; background-color:red; padding:20px;">
   <div style="text-align:center; margin:20px;"><b>Hinweis:</b></div>
   <div id="PC-Alert-Message" style="text-align:center;"></div>
   <div style="position:absolute; bottom:10px; width:300px; text-align:center;">
      <a onclick="javascript:$('#'+ws_PRCAlertDiv).hide(); return false;" href="">schließen</a>
   </div>
</div>

Schritt 7: Platzieren der Produktvergleichs-Checkbox und Link zum Öffnen des Produktvergleichs-Layers

Platzieren Sie die Checkbox zum Hinzufügen des Produkts zum Produktvergleich und den Link zum Öffnen des Produktvergleichs-Layers innerhalb der PR-Data-Schleife auf Ihrer Produktübersichtsseite (ws_category.htm).

Der Abschnitt wird nur angezeigt, wenn der Produktvergleich aktiviert ist. Der div-Container wird durch das im Headbereich eingebundene JavaScript automatisch angezeigt, falls JavaScript im Browser des Kunden aktiviert ist: Jeder div-Container, der die Klasse "jsonly" besitzt, wird automatisch per JavaScript eingeblendet. Diese Klasse kann in der Designkomponente konfiguriert werden.

{WS-ProductComparison}
   <div class="jsonly" style="display:none;">
      <div style="float:left; align:left; height:20px; padding-top:10px;">
         {PRC-AddLink}
	    <input id="PRC-checkbox-~PR-Position~" type="checkbox" onclick="javascript:ws_PRCcheckboxHit('PRC-checkbox-~PR-Position~', '~PRC-AddLink(AJAX)~', '~PRC-DeleteLink(AJAX)~');" {PRC-IsCompared}checked{/PRC-IsCompared}> Produkt vergleichen
         {/PRC-AddLink}
      </div>
      <div style="float:right; align:right; height:20px; padding-top:16px;">
         <a onclick="return ws_PRCshowPRCLayer('~WS-ProductComparison_Link~')" href="#">Produktvergleich anzeigen</a>
      </div>
   </div>
{/WS-ProductComparison}

Referenz: PRC-AddLink()

Referenz: PRC-DeleteLink()

Referenz: PRC-IsCompared

Referenz: PRC-CompareField
Referenz: PRC-CompareFieldName
Referenz: PRC-CompareFieldDescr
Referenz: PRC-CompareFieldPosition
Referenz: PRC-CompareFieldValue
Referenz: PRC-CompareFieldValueMetaX
Referenz: PRC-ComparisonWithVariations
Referenz: PRC-Variations
Referenz: BT-ProductCompare

Referenz: PR-Position

Referenz: WS-ProductComparison

Referenz: WS-ProductComparison_Link

Referenz: WS-ProductComparison_MaxProducts
Referenz: WS-ProductComparison_NumberOfProducts
Referenz: MSG-ProductCompare_Notify
Referenz: WEBSALE JavaScript Systembibliothek

Referenz: WS-Charset

Styles

Referenz: Styles für Produktvergleich

Produktvergleich auf der Produktdetailansicht (ws_product.htm) integrieren

Erweitern Sie das Template Produktdetailansicht (ws_product.htm) in fünf Schritten:

Schritt 1: Einbinden der benötigten JavaScripts und StyleSheet-Informationen im head-Bereich des Templates:

Damit binden Sie die WEBSALE JavaScript-Systembibliothek ein. Die Designkomponente ist in den Beispielen (s.u.) enthalten.

Schritt 2: Legen Sie die benötigten div-Container am Anfang des body-Bereichs der Seite an:

<div style="display:none">
   <a class="PRC-Show" href="#"><!--Dummy, zum Triggern des Layers. Mindestens ein (in diesem Fall versteckter) Link muss vorhanden sein, damit das Layer per JS geöffnet werden kann --></a>
</div>
<div id="PC-Wrapper" style="display:none">
   <!-- Wrapper: in den inneren DIV-Container wird der Inhalt des Produktvergleichs geladen -->
   <div id="PC-Content" style="background-color: white;">
      <img src="js/colorbox-images/loading.gif">
   </div>
</div>

Schritt 3: Geben Sie dem Produkt-Formular eine ID. Diese benötigen Sie bei Schritt 4:

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

Schritt 4: Platzieren Sie den Button "zum Produktvergleich hinzufügen" innerhalb des Produktformulars:

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

Schritt 5: Platzieren Sie einen Link zum Anzeigen des Layers mit dem Produktvergleich (optional):

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

Referenz: WEBSALE JavaScript Systembibliothek

Produktvergleich auf einer beliebigen Seite integrieren

Der Produktvergleich wird in einem Layer angezeigt. Diesen Layer mit den Produkten, die verglichen werden sollen, können Sie auf jedem beliebigen Template anzeigen lassen.

Erweitern Sie das Template in drei Schritten:

Schritt 1: Einbinden der benötigten JavaScripts im head-Bereich des Templates

Die WEBSALE-Systembibliothek und ihre dazugehörige Designkomponente werden benötigt. Überprüfen Sie, ob diese beiden Dateien bereits auf den gewünschten Templates eingebunden sind und fügen Sie diese gegebenenfalls im <head>-Bereich hinzu.

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

Wegweiser: WEBSALE JavaScript-Bibliothek

Schritt 2: Legen Sie die benötigten div-Container am Anfang des body-Bereichs der Seite an

Der umschließende div-Container ist nicht sichtbar und fungiert hier als "Wrapper"-Container.

<div style="display:none">
   <a class="PRC-Show" href="#"><!--Dummy, zum triggern des Layers. Mindestens ein (in diesem Fall versteckter) Link muss vorhanden sein damit das Layer per JS geöffnet werden kann--></a>
</div>
<div id="PC-Wrapper" style="display:none">
   <!-- Wrapper: in den inneren DIV-Container wird der Inhalt des Produktvergleichs geladen -->
   <div id="PC-Content" style="background-color: white;">
      <img src="js/colorbox-images/loading.gif">
   </div>
</div>

Schritt 3: Link zum Öffnen des Produktvergleichs

Platzieren Sie den Link zur Anzeige des Produktvergleichs-Layers an einer beliebigen Stelle wie folgt im Template.

Der Link wird nur angezeigt, wenn der Produktvergleich aktiviert ist.

Der div-Container wird durch die WEBSALE JavaScript-Systembibliothek automatisch angezeigt, falls JavaScript im Browser des Kunden aktiviert ist: Jeder div-Container der die Klasse "jsonly" (soll bedeuten "JavaScript only") besitzt, wird automatisch per JavaScript eingeblendet. Diese Klasse kann in der Designkomponente konfiguriert werden.

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

Referenz: WEBSALE JavaScript Systembibliothek

Produktvergleich für Set- und Gruppierungsprodukte

Ein Vergleich von Set-Produkten ist nicht möglich, da Set-Produkte ihrerseits aus mehreren verschiedenen Einzelprodukten bestehen.

Wegweiser: Set-Produkte

Ein Vergleich von Gruppierungsoberprodukten ist nicht möglich, da diese keine eigenen Produktattribute besitzen. Die zugeordneten Gruppierungsunterprodukte können jedoch verglichen werden, da sie "normale" Produkte sind.

Wegweiser: Gruppierungsprodukte