> ## Documentation Index > Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt > Use this file to discover all available pages before exploring further. # Adventskalender > 24 Produkte als Adventskalender darstellen, über eine eigene Kategorie oder eine statische Seite, mit tagesabhängigen Türchen und zeitgesteuerter Freischaltung. 24 Türchen, hinter jedem ein Angebot. Der Adventskalender ist kein eigenes Modul, sondern eine Darstellungsform für 24 Produkte. Alles, was dafür gebraucht wird, steckt im Template. ![20200915 Adventskalender](https://mintcdn.com/websaleag-44ee7ea6/7EOsbAvQZg2u3Pju/images/20200915_adventskalender.png?fit=max\&auto=format\&n=7EOsbAvQZg2u3Pju\&q=85\&s=d377a67daf120da2dc8520e29fbb2c64) ## Zwei Wege zu denselben 24 Produkten | Weg | Woher die Produkte kommen | Wann er passt | | - | - | - | | eigene Kategorie | aus der Warenwirtschaft, über die Kategoriezuordnung | wenn der Kalender wie eine Kategorie gepflegt werden soll | | statische Seite | aus einer Liste von Produktnummern in einer Textvariablen | wenn der Kalender außerhalb der Warenwirtschaft gepflegt wird | Alles Weitere, also Gestaltung der Türchen, Tagesabhängigkeit und Freischaltung, ist in beiden Fällen gleich und steht weiter unten. Eine Freischaltung durch WEBSALE ist für keinen der beiden Wege nötig. ## Weg 1: Als eigene Kategorie Legen Sie in der Warenwirtschaft eine Kategorie an, beispielsweise "Adventskalender", und ordnen Sie ihr die 24 Produkte zu. Die Reihenfolge der Zuordnung bestimmt, welches Produkt hinter welchem Türchen liegt. Die Kategorie bekommt ein eigenes Template, beispielsweise `ws_category_adventskalender.htm`. Alternativ steuern Sie die abweichende Darstellung über eine `ST-CatIndex`-Klammerung im gewöhnlichen Kategorietemplate. Die Produkte stehen dann in der üblichen Schleife zur Verfügung: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {@PR-Data} {/@PR-Data} ``` ### Die Sortierung abschalten Die Reihenfolge aus der Warenwirtschaft gilt nur, solange der Shop die Liste nicht umsortiert. Setzen Sie die Auswahlliste für die Sortierung deshalb unsichtbar auf das Template und wählen Sie darin "keine Sortierung" vor: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
``` Verwenden Sie `~CAT-SortSelectName~` und `~CAT-NoSortSelect~` statt eines fest geschriebenen Feldnamens. Die internen Namen können sich ändern, die Tags nicht. ### Ersatzprodukt für ausverkaufte Türchen ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {@PR-Data} {PR-SoldOut} {PR-LoadData(Ersatzproduktnummer,1)} {/PR-LoadData(Ersatzproduktnummer,1)} {/PR-SoldOut} {!PR-SoldOut} {/!PR-SoldOut} {/@PR-Data} ``` Der zweite Block fehlt in der bisherigen Beschreibung. Ohne ihn bleibt ein Türchen leer, solange das Produkt **nicht** ausverkauft ist, also im Normalfall. Referenz: [PR-SoldOut](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md) · [PR-LoadData()](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md#die-tags-im-uberblick) · [ST-CatIndex](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation.md#die-tags-im-uberblick) · Wegweiser: Produktlisten sortieren ## Weg 2: Als statische Seite Legen Sie ein Template an, beispielsweise `tpl_adventskalender.htm`. Die Produktnummern stehen kommasepariert in einer Textvariablen, die Sie in der Textpflege bearbeiten: ```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ProductsForAdventCalendar = 111111,111112,111113, … ,111124 ``` ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ~DC-DynamicLoop1_set(%%ProductsForAdventCalendar%%)~ {DC-DynamicLoop1} {@DC-DynamicLoop1} {PR-LoadData($DC-DynamicLoop1_data$,0)} {/PR-LoadData($DC-DynamicLoop1_data$,0)} {/@DC-DynamicLoop1} {/DC-DynamicLoop1} ``` Dieser Weg hat den Vorteil, dass die Reihenfolge ohne Umweg über die Warenwirtschaft festgelegt wird. Wer im nächsten Jahr andere Produkte einsetzen will, ändert eine Zeile in der Textpflege. Referenz: [DC-DynamicLoopX](https://dokumentation.websale.de/v8s/referenz/tags/dc/schleifen.md) · [PR-LoadData()](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md#die-tags-im-uberblick) ## Die Türchen gestalten Jedes Türchen braucht eine eigene Kennung, damit es im Stylesheet angesprochen und frei auf der Fläche platziert werden kann. Dafür zählt ein Zähler die Durchläufe mit. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ~DC-Counter1_reset~ {@PR-Data} ~DC-Counter1_inc~
{/@PR-Data} ``` > [!WARNING] > > Das `~DC-Counter1_reset~` **vor** der Schleife ist nicht optional. Von `DC-Counter1` bis `DC-Counter3` gibt es nur drei Stück, und sie gelten für die gesamte Seite. Wurde `DC-Counter1` weiter oben schon verwendet, beginnt der Kalender sonst bei einer beliebigen Zahl. > > In der bisherigen Beschreibung fehlt hinter dem Klassennamen das schließende Anführungszeichen: > > ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} >
> ``` > > Dadurch verschmelzen Klasse und Kennung zu einem einzigen Attributwert, und weder die eine noch die andere lässt sich im Stylesheet ansprechen. Achten Sie beim Übernehmen darauf. Die Türchen müssen auf der Seite nicht in der Reihenfolge 1 bis 24 stehen. Über das Stylesheet platzieren Sie sie beliebig, beispielsweise mit einem Raster und `order` oder mit absoluten Positionen. Für den Umschlageffekt eignet sich eine der gängigen Flipcard-Lösungen aus CSS. Referenz: [DC-Counter1…3](https://dokumentation.websale.de/v8s/referenz/tags/dc/rechnen.md#die-tags-im-uberblick) ## Welches Türchen heute dran ist Die Zahl des Türchens entspricht dem Tag im Dezember. Türchen 7 gehört also zum 7. Dezember. Über den Vergleich des Zählers mit dem Tagesdatum bekommt jedes Türchen seinen Zustand. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ~DC-DateTime_set~ ~DC-Counter1_reset~ {@PR-Data} ~DC-Counter1_inc~
{DC-CompareStringInList($DC-DateTime_day$,$DC-Counter1$)} {/DC-CompareStringInList($DC-DateTime_day$,$DC-Counter1$)} {DC-CompareDigitLT($DC-Counter1$,$DC-DateTime_day$)} {/DC-CompareDigitLT($DC-Counter1$,$DC-DateTime_day$)} {DC-CompareDigitGT($DC-Counter1$,$DC-DateTime_day$)} {/DC-CompareDigitGT($DC-Counter1$,$DC-DateTime_day$)}
{/@PR-Data} ``` > [!WARNING] > > **`~DC-DateTime_set~` muss vor der ersten Zeitabfrage stehen.** > > Alle `DC-DateTime`-Tags beziehen sich auf den Zeitpunkt, den dieses Tag gesetzt hat. In der bisherigen Beschreibung fehlt es, und damit steht die Tagesabfrage auf unsicherem Grund. > > Die bisherige Beschreibung vergleicht an den beiden unteren Stellen `DC-Counter2`, erhöht aber nur `DC-Counter1`. `DC-Counter2` bleibt deshalb stehen, und jedes Türchen wird gleich eingestuft. In der Fassung oben ist durchgängig `DC-Counter1` eingesetzt. `DC-DateTime_day` gibt den Tag ohne führende Null aus, also `7` und nicht `07`. Der Zähler ebenso. Der Vergleich mit `DC-CompareStringInList()` passt deshalb. Verwenden Sie an dieser Stelle **nicht** `~DC-DateTime_day(true)~`, sonst stünde `07` gegen `7` und das heutige Türchen würde nie gefunden. Der Zustand entscheidet nur über die Darstellung. Ob ein Produkt tatsächlich erst am passenden Tag bestellbar ist, regeln Sie darüber nicht. Dafür brauchen die Produkte eigene Gültigkeitszeiträume oder eine Aktion. Referenz: [DC-DateTime\_set](https://dokumentation.websale.de/v8s/referenz/tags/dc/datum-und-zeit.md#die-tags-im-uberblick) · [DC-DateTime\_day()](https://dokumentation.websale.de/v8s/referenz/tags/dc/datum-und-zeit.md#die-tags-im-uberblick) · [DC-CompareStringInList()](https://dokumentation.websale.de/v8s/referenz/tags/dc/vergleiche.md) · [DC-CompareDigitLT()](https://dokumentation.websale.de/v8s/referenz/tags/dc/vergleiche.md#die-tags-im-uberblick) ## Den Kalender zeitgesteuert ein- und ausblenden Vor dem 1. Dezember und nach dem Fest soll statt der Türchen ein Hinweis stehen. Das übernimmt `WS-Event()`. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} {WS-Event(,2026-11-30-23:59)} {/WS-Event(,2026-11-30-23:59)} {WS-Event(2026-12-01-00:00,2026-12-24-23:59)} {/WS-Event(2026-12-01-00:00,2026-12-24-23:59)} {WS-Event(2026-12-25-00:00,)} {/WS-Event(2026-12-25-00:00,)} ``` > [!WARNING] > > Die Zeiträume müssen lückenlos aneinander anschließen. In der bisherigen Beschreibung endet der mittlere Zeitraum am **24. Dezember um 00:00 Uhr** und der letzte beginnt am 25. Dezember um 00:01 Uhr. Am 24. Dezember, dem Tag des letzten Türchens, wäre damit keiner der drei Blöcke aktiv und die Seite bliebe leer. > > Achten Sie außerdem darauf, dass die öffnende und die schließende Klammerung **genau denselben** Zusatz tragen. In der bisherigen Beschreibung steht im schließenden Tag ein Komma mehr. > > Die Jahreszahlen stehen fest im Template. Der Kalender muss deshalb jedes Jahr angefasst werden. Notieren Sie das dort, wo Sie Ihre jährlichen Aufgaben führen, sonst bleibt der Kalender im nächsten Jahr dauerhaft unsichtbar. `WS-Event()` arbeitet mit der Serverzeit. Für einen Kalender, der um Mitternacht umspringen soll, ist das die richtige Grundlage, weil alle Besucher denselben Stand sehen. Referenz: [WS-Event()](https://dokumentation.websale.de/v8s/referenz/tags/ws/shop-seite-und-technik.md) ## Die Türchen öffnen Ein Klick auf das Türchen führt zum Produkt. Dafür genügt ein Link über `~PR-Link~`. Alternativ öffnen Sie das Produkt in einem überlagernden Fenster, dann bleibt der Käufer im Kalender. Referenz: [PR-Link](https://dokumentation.websale.de/v8s/referenz/tags/pr/bilder-und-links.md#die-tags-im-uberblick) ## Verwandte Themen * Wegweiser: [Produktlisten sortieren](https://dokumentation.websale.de/v8s/funktionen-fuer-produktlisten/produktlisten-sortieren.md) * Anwendungsbeispiel: [Rechnen und Vergleichen im Template](https://dokumentation.websale.de/v8s/anwendungsbeispiele/appex-rechnen-und-vergleichen.md) * Referenz: [DC- (Datum und Zeit)](https://dokumentation.websale.de/v8s/referenz/tags/dc/datum-und-zeit.md) * Referenz: [DC- (Rechnen)](https://dokumentation.websale.de/v8s/referenz/tags/dc/rechnen.md) ## Related topics - [Anwendungsbeispiele](https://dokumentation.websale.de/v8s/anwendungsbeispiele/anwendungsbeispiele.md) - [DC- (Datum und Zeit)](https://dokumentation.websale.de/v8s/referenz/tags/dc/datum-und-zeit.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.