Compare

Auswahl der Artikel

Für die Artikelquelle deiner Vergleichsliste im Compare Drop stehen dir verschiedene Optionen zur Verfügung.

Konfiguration der Vergleichsblöcke

Nachdem du die Artikel deiner Vergleichsliste bestimmt hast, kannst du festlegen, welche Artikeldaten gegenübergestellt werden sollen. Dazu fügst du über List Controls Vergleichsblöcke in den Kopf - oder Body -Bereich der Vergleichsliste hinzu und konfigurierst sie.

Tipp: Vergleichsblöcke im Kopfbereich erscheinen immer zusammenhängend, da Einstellungen wie alternierende oder abgegrenzte Zeilen (siehe unten) hier nicht angewendet werden. Artikelbilder, Beschreibungen, Preise und Buttons sind hier gut aufgehoben.

Bevor wir auf die einzelnen Vergleichsblöcke und deren Inhalte & Optionen eingehen, beschreiben wir zunächst die Einstellungen, die für alle Blöcke gleich sind.

• Typ: der Typ des Blocks, z. B. Bild, Beschreibungen oder Hersteller
• Beschriftung anzeigen: soll für den Block eine Beschriftung angezeigt werden und wenn ja, welche?
• Ausrichtung des Inhalts: soll der Inhalt des Blocks links, zentriert oder rechts in der Zelle ausgerichtet werden?

Beachte, dass du Blöcke desselben Typs mehrfach verwenden kannst, beispielsweise um Merkmale zu gruppieren oder mehrere Zwischenüberschriften einzufügen.

Zusätzliche Inhalte

Im Reiter "Zusätzliche Inhalte" kannst du zusätzliche oder alternative Inhalte für deine Artikel pflegen und Merkmalwerte mit Icons ergänzen.

Design

Das Compare Drop wird in einem responsiven Tabellenlayout dargestellt. Im Reiter "Design" hast du die Möglichkeit, einige grundlegende optische Einstellungen vorzunehmen.

Mit der Option Trailer anzeigen steuerst du die Anzeige des Trailers. Das ist ein kleiner Vergleichsblock im Kopf der Vergleichsliste, der ein Artikelbild und den Artikelnamen enthält. Er dient zur Orientierung und kann ein guter Startpunkt für das Befüllen deiner Vergleichsliste sein.

Du kannst die Zeilenbreite einer Spalte deiner Vergleichsliste festlegen. Beachte, dass das Compare Drop die Breite im Zuge der Einpassung in den Einfügeort oder für bestimmte Gerätebreiten anpasst.

Je nach Einfügeort, Endgerät und Artikelanzahl kann eine Navigation (Pfeil-Navigation über der Liste) oder Pagination (Punktnavigation unter der Liste) notwendig sein. Die Anzeige dieser Navigationselemente kannst du mit Optionen steuern.

Über Einstellungen kannst du festlegen, ob die Vergleichsliste eingerahmt, Zeilen alternierend (Hintergrund wechselt zwischen hell und dunkel) oder abgegrenzt (Rahmen um die Zellen) dargestellt werden sollen.

Beschriftungen der Vergleichsblöcke kannst du - wenn der Platz ausreicht - in eine extra Spalte auslagern oder innerhalb der Zelle anzeigen lassen. Beachte, dass die Beschriftung immer innerhalb der Zelle angezeigt wird, falls der Platz nicht ausreicht.

Tipp: Wie jedes Drop lässt sich auch das Compare Drop umfangreich via CSS stylen. Auch Custom Templates sind möglich. Bitte beachte die ausführlichen Infos in unserem Wiki zum Thema Styling von Drops.

Konfiguration

In der Konfiguration des Drops kannst du einige weiterführende Optionen festlegen.

Mit der Option CSS-Container-Klassen kannst du zusätzliche CSS-Klassen auf den Hauptcontainer deines Compare Drops setzen. Beachte auch die Möglichkeit, den Drop-Container für das Drop zu aktivieren und die Optik des Drops via CSS oder Templateanpassung zu ändern.

Mit der Option Badges ausschließen kannst du Badges von der Anzeige im entsprechenden Vergleichsblock ausschließen. Beachte dazu den entsprechenden Abschnitt in dieser Doku.

Sprachvariablen

Das Compare Drop bringt einige Sprachvariablen mit.

Der Wert der Variable no-value (Standard: -) wird immer dann angezeigt, wenn Daten eines Vergleichsblocks keinen Wert haben.

Sprachvariablen mit dem Präfix caption- definieren die Standardbeschriftung bestimmter Vergleichsblöcke. Beachte, dass du die Beschriftung in jedem Vergleichsblock auf Wunsch individuell gestalten kannst.

Für Badges nutzt das Compare Drop Sprachvariablen des JTL-Shops nach - suche hier nach ribbon- und passe die Ausgabe nach deinen Wünschen an. Eine Ausnahme bildet die Badge für die Anzeige des aktuellen Artikels (label-current in den Drop-Sprachvariablen).

Beispiel zur Verwendung des Smarty-Blocks

Mit $article hast du im Smarty-Vergleichsblock Zugriff auf das mit der Dropper-Funktion getShopObject() aufgelöste Artikelobjekt. In $article.data verbirgt sich das komplett aufgelöste Objekt vom Typ JTL\Catalog\Product\Artikel, das im Template auch auf Artikeldetailseiten und Artikellisten zur Verfügung steht.

Möchtest du z. B. eine Liste mit Artikelnummer, EAN und HAN (Händler-Artikelnummer) im Smarty-Vergleichsblock ausgeben, kann der Inhalt des Smarty-Templates in etwa so aussehen:

<ul>
    <li>Art.-Nr.: {$article.data->cArtNr}</li>
    {if !empty($article.data->cHAN)}
        <li>HAN: {$article.data->cHAN}</li>
    {/if}
    {if !empty($article.data->cBarcode)}
        <li>EAN: {$article.data->cBarcode}</li>
    {/if}
</ul>

Tipp: Mit {$article|dump} kannst du den Inhalt des Artikelobjekts übrigens wunderbar untersuchen.

Ähnliche Artikel & Kunden kauften auch

Ähnliche Artikel auf Artikeldetailseiten darzustellen ist ein spannender Anwendungsfall für das Compare Drop. Mit der entsprechenden Artikelquelle und dem passenden Darstellungsfilter (hier z. B.: Seitentyp = Artikeldetails oder auch spezielle Artikel via Artikeleigenschaft) ist das für eine definierte Menge von Artikeln mit nur einem Compare Drop möglich.

Wichtig ist dabei zu wissen, wie sich diese Artikelrelationen herausbilden.

Im Fall der ähnlichen Artikel nutzt der JTL-Shop primär Merkmale bzw. Merkmalwerte, um Ähnlichkeiten zu berechnen. Aus dem JTL-Guide:

JTL-Shop vergleicht die Merkmale des aufgerufenen Artikels mit den übrigen und zeigt die ähnlichen Artikel an, die über die meisten identischen Merkmale verfügen. [...]

Beachte, dass die maximale Anzahl der ähnlichen Artikel in den JTL-Shop-Einstellungen gesetzt werden kann.

Auch die Anzahl der Artikel, die andere Kunden auch kauften, legst du in den JTL-Shop-Einstellungen fest. Dort kannst du diese Funktion auch komplett ausschalten, wodurch dann auch im Compare Drop bei Auswahl dieser Relation keine Artikel angezeigt werden würden.

Merkmale gruppieren & aufwerten

Es kann eine gute Idee sein, Merkmale in kleine, thematisch passende Gruppen zusammenzufassen. Das erleichtert den Vergleich für den Besucher.

Um das zu realisieren, kannst du einfach den Vergleichsblock vom Typ "Merkmale" mehrfach verwenden und mit "Zwischenüberschrift"-Blöcken voneinander abgrenzen.

Icons oder Bilder visualisieren Produktmerkmale besser und steigern die Lesbarkeit der Liste. Wenn du keine Bilder für deine Merkmalwerte in der JTL-WaWi gepflegt hast, kannst du die Liste Icons für Merkmalwerte im Compare Drop nutzen.

Hier kannst du Merkmalwerte mit Icons ergänzen oder diese ganz ersetzen. Letzteres ist ggf. bei booleschen Werten (ja/nein, 1/0) sinnvoll - diese kannst du so z. B. mit einem gesetzten bzw. nicht gesetzten Haken darstellen.

Beachte, dass du durch unser Icon-Control die Auswahl aus über 7.000 Icons hast, die wir ressourcensparend als Inline-SVG einfügen.

Responsives Verhalten

Das Standard-Template des Compare Drops verhält sich responsiv. Reicht der verfügbare Platz an der Einfügeposition nicht aus, um alle Spalten der Vergleichsliste darzustellen, wird die Tabelle horizontal scrollbar - probier es gern mal aus.

Die optionalen Beschriftungen der Vergleichsblöcke verschieben wir bei Bedarf in die Zellen der Vergleichstabelle, um auf engem Raum mehr Platz für die Artikelspalten zu gewinnen.

Elemente der Navigation und Pagination verhalten sich ebenfalls responsiv und werden ggf. ausgeblendet, wenn der verfügbare Platz ausreicht, um alle Artikel in der Vergleichsliste darzustellen.