Adventskalender
Verschönern Sie Ihren Kunden die Adventszeit mit täglichen Angeboten. 24 Türchen - 24 Möglichkeiten, tolle Angebote, Gewinnspiele, Rabattgutscheine oder Aktionen zu platzieren! Ihren Adventskalender können Sie beliebig befüllen.
In unserem Demoshop können Sie den WEBSALE Adventskalender in Aktion erleben.
Externer Link: WEBSALE Adventskalender
Inhalt
2.1 Adventskalender als eigene Kategorie
2.2 Adventskalender als statische Seite
Es handelt sich nicht um ein neues Feature oder Modul – es ist vielmehr ein Anwendungsbeispiel für die Darstellung von 24 Produkten in Form eines Adventskalenders.
Der Adventskalender kann entweder mit einer eigenen Kategorie oder mit einem statischen Template realisiert werden.
2.1 Adventskalender als eigene Kategorie
Schritt 1: Freischaltung/Aktivierung
Es ist keine Freischaltung/Aktivierung seitens WEBSALE nötig.
Schritt 2: Kategorie anlegen
Soll der Adventskalender über eine eigene Kategorie realisiert werden, muss diese in der Warenwirtschaft angelegt werden, z. B. "Adventskalender".
Der Kategorie muss nun ein spezielles Kategorie-Template zugewiesen werden. Alternativ kann die Anzeige über eine ST-CatIndex-Klammerung gesteuert werden.
Legen Sie ein neues Template an und speichern Sie es, z. B. unter dem Namen ws_category_adventskalender.htm, in Ihrem Template-Verzeichnis, z. B. benutzer/templates/translation.
Schritt 3: Zuweisen der 24 Produkte
Der Kategorie "Adventskalender" werden nun die gewünschten 24 Produkte zugewiesen. Jedes der Produkte ist dann ein Türchen im Kalender.
Schritt 4: Fallback für ausverkaufte Produkte (optional)
Für den Fall, dass ein Produkt im Adventskalender ausverkauft sein sollte, kann manuell ein Fallback eingebunden werden. Der Shop zeigt hinter dem betreffenden Türchen das hinterlegte Ersatzprodukt an, wenn das ursprüngliche Produkt ausverkauft ist.
Fügen Sie hierzu den folgenden Code auf dem Adventskalender-Template ein:
...
{@PR-Data}
{PR-SoldOut}
{PR-LoadData(alternative Produktnummer,1)}
...
{/PR-LoadData(alternative Produktnummer,1)}
{/PR-SoldOut}
{/@PR-Data}
...
Referenz: PR-SoldOut
Schritt 5: Sortierung der Produkte aufheben (optional)
Die Reihenfolge der Produkte aus der Warenwirtschaft oder aus der kommaseparierten Liste bestimmt, welches Produkt sich hinter welchem Türchen versteckt.
Damit die Reihenfolge aus der Warenwirtschaft korrekt übernommen wird, muss gegebenenfalls die Sortierung der Produkte im Shop zurückgesetzt werden. Dazu muss die Listbox statisch im Adventskalender-Template platziert werden und "Keine Sortierung" ausgewählt werden:
...
<select name="ws_catsort" id="cat_sortselect" class="form-control" style="display: none;">
<option value="" selected>Keine Sortierung</option>
...
</select>
...
Wegweiser: Sortieren von Produktlisten
Schritt 6: Kalender zeitgesteuert aktivieren/deaktivieren
Soll beim Öffnen der Kalenderseite der Kalender vor dem 1. Dezember und/oder nach dem 24. Dezember nicht sichtbar sein, sondern nur ein allgemeiner Text, dann kann man dies mit Hilfe von WS-Event() steuern.
Fügen Sie hierzu den folgenden Code auf dem Adventskalender-Template ein:
...
{WS-Event(,2024-11-30-23:59)}
<!--Timer oder Erklärungstext wann der Kalender startet und der Kunde wieder vorbeischauen soll -->
{/WS-Event(,2024-11-30-23:59,)}
...
{WS-Event(2024-12-01-00:01,2024-12-24-00:00)}
<!-- Kalender und seine Türchen sichtbar -->
{/WS-Event(2024-12-01-00:01,2024-12-24-00:00)}
...
{WS-Event(2024-12-25-00:01,)}
<!-- Kalender ist wieder deaktiviert - Weihnachten ist vorbei -->
{/WS-Event(2024-12-25-00:01,)}
...
Referenz: WS-Event()
Schritt 7: Design der Türchen
Das Design und die Positionierung der Türchen erfolgen über CSS.
IDs im Adventskalender-Template zuweisen
Mithilfe der Produktnummer und/oder eines Counters bekommt jedes Türchen eine ID zugewiesen.
Fügen Sie hierzu den folgenden Code auf dem Adventskalender-Template ein:
...
{@PR-Data}
~DC-Counter1_inc~
<div class="tuerchen_~DC-Counter1~ id="tuerchen_~PR-Number~_~DC-Counter1~">
Inhalt
</div>
{/@PR-Data}
...
Referenz: DC-Counter1...3
CSS-Datei anpassen
Anhand der soeben zugewiesenen ID kann das Türchen mit einem weihnachtlichen Türchen-Bild versehen werden (direkt in der CSS-Datei).
Außerdem können die Türchen in einer beliebigen Reihenfolge auf der Seite platziert werden (z. B. durcheinander anstatt der Reihe nach von 1 bis 24).
Im aktuellen Design verwenden wir für das Drehen der Türchen einen CSS-Effekt namens Flipcard (https://www.w3schools.com/howto/howto_css_flip_card.asp). Es kann grundsätzlich aber jeder Effekt verwendet werden.
Schritt 8: Aktiv-/Inaktiv-Zustand der Türchen je nach Kalendertag
Die Reihenfolge der Produkte bestimmt das Türchen, d. h.
Produkt 1 = Türchen 1
Produkt 2 = Türchen 2
Produkt 24 = Türchen 24
Die Zahl des Türchens entspricht dann auch dem Datum, d. h.
Produkt 1 = Türchen 1 = 01.12.2024
Produkt 2 = Türchen 2 = 02.12.2024
Produkt 24 = Türchen 24 = 24.12.2024
Über einen Counter setzt man die Zahl des Türchens und diesen Counter kann man dann zum Vergleichen des aktuellen Tags verwenden, um einen Aktiv-/Inaktiv-Status bei den Türchen zu setzen.
Ergänzen Sie hierzu den folgenden, fett-markierten Code auf dem Adventskalender-Template:
...
{@PR-Data}
~DC-Counter1_inc~
<div class="tuerchen_~DC-Counter1~ id="tuerchen_~PR-Number~_~DC-Counter1~">
{DC-CompareStringInList($DC-DateTime_day$,$DC-Counter1$)}Aktuelles Türchen{/DC-CompareStringInList($DC-DateTime_day$,$DC-Counter1$)}"
{DC-CompareDigitGT($DC-Counter2$,$DC-DateTime_day$)} Das Datum ist schon überschritten = vergangenes Türchen. {/DC-CompareDigitGT($DC-Counter2$,$DC-DateTime_day$)}
{DC-CompareDigitLT($DC-Counter2$,$DC-DateTime_day$)} Das Datum ist noch nicht erreicht = zukünftiges Türchen. {/DC-CompareDigitLT($DC-Counter2$,$DC-DateTime_day$)}
</div>
{/@PR-Data}
...
Referenz: DC-Counter1...3
Schritt 9: Öffnen der Türchen
Öffnet man ein Türchen, gelangt man zum Produkt.
Das Öffnen kann somit ein Direktlink zum Produkt sein (man verlässt das Adventskalender-Template) oder man öffnet das Produkt in einem Modal/Layer.
Referenz: PR-Link
Haben Sie alle Schritte durchgeführt, ist der Adventskalender vollständig integriert.
2.2 Adventskalender als statische Seite
Schritt 1: Freischaltung/Aktivierung
Es ist keine Freischaltung/Aktivierung seitens WEBSALE nötig.
Schritt 2: Statisches Template anlegen und Zuweisen der 24 Produkte
Soll die Darstellung über eine Informationsseite realisiert werden, muss hierzu ein Template angelegt werden, z. B. tpl_adventskalender.htm. Speichern Sie dieses Template in Ihrem Template-Verzeichnis, z. B. benutzer/templates/translation. Die Produktzuweisung erfolgt dann über eine kommaseparierte Liste von Produktnummern.
Beispiel:
In der Textpflege werden bei der Textvariable ProductsForAdventCalendar die gewünschten 24 Produkte kommasepariert eingetragen:
ProductsForAdventCalendar = 111111,111112,111113 … 111124
Auf dem Template, z. B. tpl_adventskalender.htm, wird dann für die Anzeige der Produkte folgender Code benötigt:
...
<!-- Übergabe der Produktliste an die Loop über die Textvariable -->
~DC-DynamicLoop1_set(%%ProductsForAdventCalendar%%)~
<!-- Schleife über die gewünschten Produkte -->
{DC-DynamicLoop1}
{@DC-DynamicLoop1}
{PR-LoadData($DC-DynamicLoop1_data$,0)}
~PR-Name~<br>
~PR-Price~<br>
{/PR-LoadData($DC-DynamicLoop1_data$,0)}
{/@DC-DynamicLoop1}
{/DC-DynamicLoop1}
...
Referenz: DC-DynamicLoopX
Referenz: PR-LoadData()
Mithilfe der Produktnummern und den Tags DC-DynamicLoopX und PR-LoadData() werden die Produkte geladen.
Schritt 3: Kalender aktivieren/deaktivieren
Soll beim Öffnen der Kalenderseite der Kalender erst einmal nicht sichtbar sein, sondern nur ein allgemeiner Text, dann kann man dies mithilfe von WS-Event() steuern:
...
{WS-Event(,2024-11-30-23:59)}
Timer oder Erklärungstext wann der Kalender startet und der Kunde wieder vorbeischauen soll
{/WS-Event(,2024-11-30-23:59,)}
...
{WS-Event(2024-12-01-00:01,2024-12-24-00:00)}
Kalender und seine Türchen sichtbar
{/WS-Event(2024-12-01-00:01,2024-12-24-00:00)}
...
{WS-Event(2024-12-25-00:01,)}
Kalender ist wieder deaktiviert - Weihnachten ist vorbei
{/WS-Event(2024-12-25-00:01,)}
...
Referenz: WS-Event()
Schritt 4: Design der Türchen
Das Design und die Positionierung der Türchen erfolgen über CSS. Mithilfe der Produktnummer und/oder eines Counters bekommt jedes Türchen eine ID zugewiesen, z. B.
...
{@DC-DynamicLoop1}
{PR-LoadData($DC-DynamicLoop1_data$,0)}
~DC-Counter1_inc~
...
<div class="tuerchen_~DC-Counter1~ id="tuerchen_~PR-Number~_~DC-Counter1~">
Inhalt
</div>
...
{/PR-LoadData($DC-DynamicLoop1_data$,0)}
{/@DC-DynamicLoop1}
...
Referenz: DC-Counter1...3
Mithilfe dieser ID kann das Türchen mit einem weihnachtlichen Türchen-Bild versehen werden.
Außerdem kann es an einer beliebigen Stelle auf der Seite platziert werden, schließlich sollen die Türchen ja nicht in der Reihenfolge von 1 bis 24 dargestellt werden.
Schritt 5: Aktiv-/Inaktiv-Zustand der Türchen
Die Reihenfolge der Produkte bestimmt das Türchen, d. h.
Produkt 1 = Türchen 1
Produkt 2 = Türchen 2
Produkt 24 = Türchen 24
Die Zahl des Türchens entspricht dann auch dem Datum, d. h.
Produkt 1 = Türchen 1 = 01.12.2024
Produkt 2 = Türchen 2 = 02.12.2024
Produkt 24 = Türchen 24 = 24.12.2024
Über einen Counter setzt man die Zahl des Türchens und diesen Counter kann man dann zum Vergleichen des aktuellen Tags verwenden, um einen Aktiv-/Inaktiv-Status bei den Türchen zu setzen:
...
{@DC-DynamicLoop1}
{PR-LoadData($DC-DynamicLoop1_data$,0)}
~DC-Counter1_inc~
<div class="tuerchen_~DC-Counter1~ id="tuerchen_~PR-Number~_~DC-Counter1~">
{DC-CompareStringInList($DC-DateTime_day$,$DC-Counter1$)}Aktuelles Türchen{/DC-CompareStringInList($DC-DateTime_day$,$DC-Counter1$)}"
{DC-CompareDigitGT($DC-Counter2$,$DC-DateTime_day$)} Das Datum ist schon überschritten = vergangenes Türchen. {/DC-CompareDigitGT($DC-Counter2$,$DC-DateTime_day$)}
{DC-CompareDigitLT($DC-Counter2$,$DC-DateTime_day$)} Das Datum ist noch nicht erreicht = zukünftiges Türchen. {/DC-CompareDigitLT($DC-Counter2$,$DC-DateTime_day$)}
</div>
{/PR-LoadData($DC-DynamicLoop1_data$,0)}
{/@DC-DynamicLoop1}
...
Darüber kann gesteuert werden, wie sich die Türchen verhalten sollen und wie sie aussehen sollen.
Schritt 6: Öffnen der Türchen
Öffnet man ein Türchen, gelangt man zum Produkt.
Das Öffnen kann somit ein Direktlink zum Produkt sein (man verlässt die Adventskalender-Seite) oder man öffnet das Produkt in einem Modal/Layer.
Referenz: PR-Link
Haben Sie alle Schritte durchgeführt, ist der Adventskalender vollständig integriert.