Update 2021
Wir haben aktualisierte Vorlagen (auch für JTL-Shop 5) bereitgestellt und die Installationsanleitung hier in den Beitrag integriert!
Advent, Advent ...
Der Dezember steht vor der Tür und viele Händler wollen mit Adventskalendern für Weihnachtsstimmung im eigenen JTL-Shop sorgen.
Mit dem Hotspot Banner kann man einfache Adventskalender leicht realisieren. Man braucht nur eine passende Grafik, auf der man 24 Spots platziert. Diese Spots zeigen dann bei einem Hover beliebige Inhalte an. Wann genau diese "Türchen" angezeigt werden sollen, kann man mit Turnus Darstellungsfilter regeln.
Was dann noch fehlt, sind einige CSS Anpassungen (Spots ausblenden, damit die Grafik zur Geltung kommt) und etwas Fleißarbeit (24 Spots inkl. Filter anlegen). Das haben wir euch aber mit der folgenden kleinen Vorlage bereits abgenommen.
Vorlage
In den ZIPs findet ihr die Vorlage mit allen gesetzten Filtern und auch Grafiken. Wichtige Infos zur Installation und Adaption siehe Installationsanleitung unten!
Aktuelle Vorlage für JTL-Shop 4 & 5 als ZIP alte Vorlage als ZIP
Installation
Stellt zunächst sicher, dass ihr das Hotspot Banner und Flex Layout Drop installiert habt (siehe Wiki).
Importiert dann die passende Datei
/drops/[deine-shopversion]_kk-dropper-export-adventsvorlage_100.18.zip
aus der ZIP über
die Dropper Importfunktion.
Bitte beachte: das aktualisierte Beispiel wurde mit Dropper 100.18.3 in einem JTL-Shop 5 und Nova Template erstellt. Eine Importdatei für JTL-Shop 4 findet ihr ebenfalls in der ZIP, diese haben wir in einem JTL-Shop 4.06 Build 17 mit Evo Template und Dropper 100.18.2 getestet.
Nach erfolgreichem Import findet ihr 2 neue Drops in der Gruppe "KK Advent Vorlage": "Adventskalender Grid" (Flex Layout) und "Adventskalender Hotspot Banner". Diese gilt es nun anzupassen.
Grid konfigurieren
Das Grid dient als Container für unseren Adventskalender. Es wird in die Drop Zone
@page.content
(also den Inhaltsbereich) der Startseite vorgehangen. Passt die
Anzeigebedingungen
unter "Wann & Wo anzeigen" nach euren Wünschen an.
Das Grid hat die CSS Klasse
kk-advent-grid
gesetzt, über die wir zusätzliche CSS Regeln definieren. Diese Regeln findest du im Space
CSS Anpassungen
des Flex Layouts.
Zusätzlich nutzen wir den Drop Container, um ein Element mit der Klasse
container
um das Grid zu spannen. Das sorgt dafür, dass sich die Drops besser in den Inhaltsbereicht des Nova Templates des JTL-Shop 5 einfügen.
Tipp: über den Turnus Darstellungsfilter kannst du das ganze Flex Layout (inklusive Adventskalender) zusätzlich nur zwischen dem 01.12 und 24.12. eines Jahres angezeigen lassen.
Adventskalender konfigurieren
Der Hotspot Banner ist in einem Space unseres Flex Layouts verlinkt, seine Darstellung wird also darüber geregelt.
Die einzelnen Spots sind bereits mit einer Platzhaltergrafik versehen, bitte passe die Spotinhalte nach deinen Wünschen an. Viele Funktionen des Hotspot Banners erklären wir in diesem Video genauer.
Wichtig:
auch den jeweils passende Turnus Filter für die Spots haben wir bereits gesetzt, z.B. wird der Hotspot
01
nur am 01.12. eines Jahres angezeigt!
Um den Kalender schlank zu halten, haben wir einige
CSS Anpassungen
vorgenommen. Beachte hierzu den Space
CSS Anpassungen
im Flex Layout Drop!
Anmerkungen
Ihr könnt den Adventskalender Hotspot Banner natürlich auch ohne Flex Layout nutzen. Bitte denkt dann daran, die Einfügeoptionen unter "Wann und Wo anzeigen" zu definieren. Auch müssen die eigenen CSS Klassen und Regeln (siehe oben) entsprechend angepasst werden.
Unsere Lösung rabattiert natürlich keine Artikel oder Kategorien. Die Sonderpreise müsst ihr separat über die WaWi pflegen. Beachtet hier die Sonderpreisverwaltung in der JTL WaWi: https://guide.jtl-software.de/Sonderpreise_in_JTL-Wawi_einrichten
Bitte testet den Adventskalender ausgiebig! Ihr könnt dazu den Turnusfilter temporär entfernen oder den Darstellungsfilter einfach um den aktuellen Tag ergänzen (ODER Verknüpfung).
Attribution
Bitte vergesst nicht, die Quelle für die Grafiken entsprechend zu kennzeichnen! Diese stammen von https://www.vecteezy.com
Der Adventsbaum wurde von uns leicht angepasst (Nummer 25 entfernt), das Original und weitere Infos zur passenden Quellnennung ("How do I Attribute?") findet ihr hier: https://www.vecteezy.com/vector-art/252733-printable-advent-calendar-christmas-tree