Dein Warenkorb ist leer

29.11.2018 Dropper Shorts, Dropper

Ein kleiner Adventskalender - Dropper Shorts #12

Oft werden wir nach einem Adventskalender-Drop gefragt, dabei könnt ihr mit dem Hotspot Banner bereits einen einfachen Adventskalender für euren JTL-Shop erstellen!

Update 2021

Wir haben aktualisierte Vorlagen (auch für JTL-Shop 5) bereitgestellt und die Installationsanleitung hier in den Beitrag integriert!

Demo in der Dropper.zone

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