Saisonale Shop-Dekoration nach Zeitplan — Dokumentation

Saisonale Shop-Dekoration nach Zeitplan (das Modul dfthemescheduler) schmückt Ihren PrestaShop-Shop automatisch für jedes kommerzielle Highlight. Sie erstellen datierte Kampagnen — Weihnachten, Black Friday, Sale, Valentinstag — die Topbar, Banner, Farbpalette, visuelle Effekte und einen Startseitenblock kombinieren. Jede Kampagne schaltet sich zu den geplanten Terminen von selbst ein und aus, ganz ohne Cronjob.

Überblick

Das Modul beruht auf einer einfachen Idee: Eine Kampagne ist eine Reihe visueller Elemente, die an einen Zeitraum gebunden sind. Fällt das aktuelle Datum in diesen Zeitraum, wird die Kampagne „live“ und ihr Umstyling wird auf den Storefront angewendet. Außerhalb kehrt der Shop ohne Spuren zu seinem normalen Erscheinungsbild zurück.

Es wird immer nur eine Kampagne angezeigt. Überschneiden sich mehrere Kampagnen, gewinnt die mit der höchsten Priorität. So können Sie eine lange Weihnachtskampagne mit einem höher priorisierten Black-Friday-Peak in der Mitte kombinieren.

Jede Kampagne kann wahlweise folgende Elemente kombinieren: eine Topbar mit Nachricht und Countdown, ein Bannerbild pro Sprache, eine Sieben-Farben-Palette, einen Ambiente-Effekt (Schnee, Konfetti, Herzen, Blätter, Sterne, Feuerwerk), einen HTML-Block auf der Startseite und eigenes CSS. Alle Elemente sind optional.

Installation

Installieren Sie das Modul wie jedes PrestaShop-Modul:

1. Gehen Sie im Backoffice zu Module > Modul-Manager.
2. Klicken Sie auf Modul hochladen und wählen Sie die Datei dfthemescheduler.zip.
3. Klicken Sie nach der Installation auf Konfigurieren, um den Kampagnenplaner zu öffnen.

Das Modul erstellt seine Tabellen, registriert seine Anzeige-Hooks und fügt einen Admin-Tab hinzu, der über die Schaltfläche Konfigurieren erreichbar ist. Es ist keine externe Abhängigkeit erforderlich: kein Composer, kein jQuery, kein Drittdienst.

Eine Kampagne erstellen

Klicken Sie im Konfigurationsbildschirm auf Kampagne hinzufügen. Das Formular ist vom Wichtigsten zum Optionalsten gegliedert.

Allgemeine Informationen

• Kampagnenname: interne Bezeichnung, zum Beispiel „Weihnachten 2026″ oder „Black Friday“. Er wird Besuchern nie angezeigt.
• Aktiviert: Hauptschalter. Eine deaktivierte Kampagne wird nie angezeigt, auch nicht innerhalb ihres Zeitraums.
• Priorität: eine Ganzzahl. Bei Überschneidung gewinnt die höchste Priorität. Lassen Sie den Wert auf 0, wenn Sie nur eine Kampagne gleichzeitig betreiben.

Termine

Die Felder Startdatum und Enddatum verwenden eine native Datums- und Uhrzeitauswahl, sekundengenau. Die Termine werden in der Serverzeit Ihres Shops interpretiert.

Jährliche Wiederholung

Setzen Sie das Häkchen bei Jedes Jahr wiederholen, damit eine Kampagne automatisch zu denselben Terminen wiederkehrt, Jahr für Jahr. Nur Monat, Tag und Uhrzeit werden verglichen: Das Jahr wird ignoriert.

Das Modul unterstützt nativ Kampagnen über den Jahreswechsel. Eine Kampagne vom 20. Dezember bis zum 6. Januar funktioniert einwandfrei und reaktiviert sich jeden Winter, ohne dass Sie sie doppeln müssen.

Topbar

Das Feld Topbar-Nachricht (mehrsprachig) zeigt eine Leiste am oberen Rand aller Seiten. Es akzeptiert einfaches HTML: Links, Fettschrift. Lassen Sie es leer, um die Leiste auszublenden.

Aktivieren Sie Countdown anzeigen, um einen Echtzeit-Countdown bis zum Enddatum der Kampagne hinzuzufügen, im Format „12T 04:31:07″. Bei einer wiederkehrenden Kampagne zielt der Countdown automatisch auf das nächste Auftreten des Enddatums.

Die Farben der Leiste (Hintergrund und Text) werden im Abschnitt Palette eingestellt.

Bannerbild

Sie können ein unterschiedliches Banner pro Sprache hochladen, mit anklickbarem Link und Alternativtext. Akzeptierte Formate sind jpg, png, gif und webp. Eine großzügige Breite wird empfohlen (zum Beispiel 1920 × 300).

Das Feld Bannerposition bestimmt den Theme-Bereich, in dem das Bild erscheint:

• Obere Leiste — displayBanner: Standardposition, am Seitenanfang.
• Unter dem Header, volle Breite — displayNavFullWidth: direkt unter dem Hauptmenü.
• Über dem Inhalt — displayWrapperTop: über dem Seitenkörper.

Farbpalette

Eine Kampagne stellt sieben Farben bereit: Primär, Sekundär, Links, Header-Hintergrund, Footer-Hintergrund, Topbar-Hintergrund und Topbar-Text.

Diese sieben Werte werden stets bereitgestellt als CSS-Variablen (--dfts-primary, --dfts-secondary usw.), die Ihr Theme oder Ihr eigenes CSS wiederverwenden kann.

Aktivieren Sie Palette auf Theme anwenden, damit das Modul diese Farben selbst auf Buttons, Links, Header und Footer anwendet. Lassen Sie die Option deaktiviert, wenn Sie das Umstyling ausschließlich über die CSS-Variablen und Ihr eigenes Stylesheet steuern möchten.

Visuelle Effekte

Das Feld Visueller Effekt bietet sechs Animationen in reinem JavaScript, auf einem Vollbild-Canvas gezeichnet: Schnee, Konfetti, Herzen, Herbstblätter, funkelnde Sterne und Feuerwerk. Wählen Sie Keiner, um den Effekt zu deaktivieren.

Die Intensität (niedrig, mittel, hoch) regelt die Partikeldichte. Die Partikelanzahl ist begrenzt, um die Leistung zu schonen.

Effekte werden nur geladen, wenn eine Kampagne aktiv ist. Sie schalten sich für Besucher mit aktivierter Bewegungsreduzierung im System automatisch ab und pausieren, wenn der Tab nicht sichtbar ist.

Startseitenblock und eigenes CSS

Das Feld Startseitenblock (mehrsprachig, visueller Editor) zeigt freien HTML-Inhalt auf der Startseite für die gesamte Dauer der Kampagne — ideal für ein Angebot, ein angereichertes Werbebanner oder eine saisonale Nachricht.

Das Feld Eigenes CSS geht noch weiter. Das CSS wird vor der Einbindung bereinigt (Versuche, den Style-Container zu verlassen, werden neutralisiert) und nur geladen, wenn die Kampagne aktiv ist. Sie können darin die Variablen --dfts-* verwenden.

Sichere Vorschau

Jede Kampagne verfügt über einen Vorschau-Link, geschützt durch einen einzigartigen Token mit 32 Zeichen. Klicken Sie in der Kampagnenliste auf die Schaltfläche Preview: Der Shop öffnet sich mit dem angewandten Umstyling der Kampagne, genau so, wie ihn Ihre Besucher am Stichtag sehen werden.

Die Vorschau bleibt während Ihrer Navigation bestehen: Sie können alle Seiten des Shops durchlaufen. Eine feste Leiste „Vorschau: {Name} — Beenden“ erscheint unten links; klicken Sie auf Beenden, um zur normalen Anzeige zurückzukehren.

Jahresplaner

Am oberen Rand der Kampagnenliste zeigt das Backoffice ein Übersichts-Dashboard: Anzahl der Kampagnen, aktive Kampagnen, die aktuell „live“ laufende Kampagne und die nächste startende Kampagne mit der Anzahl der verbleibenden Tage.

Darunter stellt eine Zwölf-Monats-Zeitleiste jede Kampagne als farbige Leiste dar, positioniert nach ihren Terminen. Ein vertikaler Marker zeigt den aktuellen Tag, wiederkehrende Kampagnen über den Jahreswechsel werden als zwei Segmente dargestellt, und jede Leiste ist anklickbar, um die Kampagne direkt zur Bearbeitung zu öffnen.

Duplizieren, exportieren, importieren

Aus der Liste erstellt die Aktion Duplizieren eine Kopie der Kampagne mit einem neuen Vorschau-Token, standardmäßig deaktiviert, deren Bannerbilder physisch kopiert werden — das Löschen des einen betrifft nie das andere. Shop-Zuordnungen bleiben erhalten.

Die Schaltfläche JSON exportieren (in der Werkzeugleiste) lädt alle Ihre Kampagnen in eine Datei herunter. Das Formular JSON importieren im Dashboard erlaubt es, diese Datei in einen anderen Shop einzuspielen. Importierte Kampagnen kommen standardmäßig deaktiviert an; Bannerbilder sind nicht im Export enthalten.

Multishop und Mehrsprachigkeit

Im Multishop-Kontext wird jede Kampagne den Shops Ihrer Wahl über den Abschnitt Shop-Zuordnung des Formulars zugeordnet. Eine Kampagne wird nur in den Shops angezeigt, mit denen sie verknüpft ist.

Die Topbar-Nachricht, das Banner (Bild, Link, Alternativtext) und der Startseitenblock sind pro Sprache übersetzbar. Füllen Sie jede Sprache über die Sprach-Tabs des Formulars aus.

Integration für Theme-Entwickler

Wenn eine Kampagne aktiv ist, fügt das Modul Klassen am body-Tag hinzu: dfts-active, dfts-campaign-{id}, dfts-effect-{effekt} und dfts-preview im Vorschaumodus. So können Sie Ihr CSS präzise ansteuern.

Ein JavaScript-Event dfts:ready wird zudem auf dem document ausgelöst, sobald das Skript initialisiert ist, mit der Kampagnenkonfiguration im Detail. In Kombination mit den CSS-Variablen --dfts-* ermöglicht dies maßgeschneiderte Integrationen, ohne das Modul anzufassen.

Leistung

Das Modul ist per Design leichtgewichtig. Das Auflösen der aktiven Kampagne benötigt eine einzige memoized SQL-Abfrage pro Seitenaufruf. Das Front-CSS und -JavaScript werden nur geladen, wenn eine Kampagne tatsächlich aktiv ist. Es wird kein Klassen-Override verwendet: ausschließlich native PrestaShop-Hooks.

Fehlerbehebung

Das Banner erscheint nicht

Ihr Theme implementiert wahrscheinlich den gewählten Positions-Hook nicht. Ändern Sie die Bannerposition auf einen anderen Wert aus der Liste.

Die Farben werden nicht angewendet

Stellen Sie sicher, dass die Option Palette auf Theme anwenden aktiviert ist. Ist sie es und einige Elemente bleiben dennoch unverändert, verwendet Ihr Theme spezifische Selektoren: Fügen Sie einige Regeln im Feld für eigenes CSS hinzu und stützen Sie sich auf die Variablen --dfts-*.

Der Effekt animiert nicht

Animationen sind für Besucher mit aktivierter Bewegungsreduzierung im Betriebssystem bewusst deaktiviert und pausieren, wenn der Tab im Hintergrund ist. Prüfen Sie außerdem, dass ein anderer Effekt als „Keiner“ ausgewählt ist.

Zwei Kampagnen überschneiden sich

Das ist das erwartete Verhalten: Es wird nur eine Kampagne angezeigt, die mit der höchsten Priorität. Passen Sie die Prioritäten an, um zu bestimmen, welche Vorrang hat.

Die Kampagne startet nicht zur erwarteten Zeit

Die Termine werden in der Serverzeit interpretiert, die von Ihrer Ortszeit abweichen kann. Prüfen Sie die Zeitzone Ihres Shops in den PrestaShop-Einstellungen.