Installations- und Konfigurationsanleitung für Countdown Promotion für Magento 2

Das Modul Kowal_CountdownPromotion fügt Magento 2 einen Countdown bis zum Ende der Aktion hinzu. Der Countdown kann im Kategorie-Listing sowie auf der Produktseite sichtbar sein, wenn das Produkt einen aktiven Sonderpreis und ein festgelegtes Enddatum der Aktion hat.

Der sichtbare Countdown wird nach dem Laden der Seite durch JavaScript erzeugt. Das Backend übergibt an das Frontend nur technische Daten, unter anderem die Produkt-ID sowie den Timestamp des Aktionsendes.

Anforderungen

Stellen Sie vor der Installation sicher, dass der Shop die Anforderungen erfüllt:

• Magento Open Source oder Adobe Commerce 2.4.x,
• PHP 7.4 oder PHP 8.1+ entsprechend der Magento-Version,
• Möglichkeit zur Installation von Composer-Paketen des Typs magento2-module,
• Zugriff auf Magento CLI,
• Zugriff auf das Modul-Repository.

Installation über Composer

Wechseln Sie in das Stammverzeichnis des Magento-Projekts.

Für das Git-Repository fügen Sie das Modul-Repository zur Composer-Konfiguration hinzu:

composer config --global --auth github-oauth.github.com composer config repositories.kowal-countdown-promotion vcs https://github.com/kowalco/countdown-promotioncomposer require kowal/module-countdown-promotion

Nach der Installation legt Composer das Modul im folgenden Verzeichnis ab:

vendor/kowal/module-countdown-promotion

Aktivierung des Moduls in Magento

Führen Sie die Magento-Befehle aus dem Stammverzeichnis des Shops aus:

bin/magento module:enable Kowal_CountdownPromotionbin/magento setup:upgradebin/magento cache:flush

In der Produktionsumgebung sollten in der Regel auch die im Projekt verwendeten Deployment-Befehle ausgeführt werden:

bin/magento setup:di:compilebin/magento setup:static-content:deploy -fbin/magento indexer:reindexbin/magento cache:flush

Produktkonfiguration

Für jedes Produkt, bei dem der Countdown erscheinen soll:

1. Setzen Sie Countdown Promotion auf Yes.
2. Legen Sie Special Price fest.
3. Legen Sie Special Price To Date fest.
4. Legen Sie optional Special Price From Date fest.

Der Countdown erscheint nur dann, wenn alle Bedingungen erfüllt sind:

• das Attribut countdown_promotion ist aktiviert,
• special_price ist festgelegt,
• der Sonderpreis ist niedriger als der reguläre Preis,
• special_from_date ist leer oder die Aktion hat bereits begonnen,
• special_to_date ist auf ein Datum in der Zukunft gesetzt.

Aktivieren Sie bei konfigurierbaren Produkten Countdown Promotion am übergeordneten Produkt. Das Modul kann das Aktionsdatum des übergeordneten Produkts oder die aktiven Aktionsdaten der verknüpften einfachen Produkte verwenden, wenn die Aktion auf Varianten eingestellt ist.

Modulkonfiguration

Die Moduloptionen sind im Magento-Adminbereich verfügbar:

Stores > Configuration > Catalog > Countdown Promotion > Appearance

Leeren Sie nach einer Konfigurationsänderung den Cache:

bin/magento cache:flush

Einstellungen zur Position des Countdowns

Das Feld Category Placement legt die Position des Countdowns im Kategorie-Listing fest.

Verfügbare Optionen:

• Below price - Countdown unter dem Preis,
• Bottom of product image - Countdown am unteren Rand des Produktbildes,
• Top of product image - Countdown am oberen Rand des Produktbildes,
• Custom CSS selector - Countdown bei dem Element, das mit einem eigenen CSS-Selektor angegeben wurde.

Wenn Sie Custom CSS selector auswählen, füllen Sie das Feld Category Custom CSS Selector aus. Das ausgewählte Element sollte data-product-id haben oder sich in einer Produktkachel befinden, die .price-box[data-product-id] enthält.

Beispielselektoren:

.price-box[data-product-id].product-item-info .price-box[data-product-id].product-item-details .price-box[data-product-id]

Das Feld Product Page Custom CSS Selector betrifft nur die Produktseite. Geben Sie den Selektor des Elements ein, nach dem der Countdown hinzugefügt werden soll.

Beispiele:

.product-info-main .product-info-price#custom-price-target

Wenn das Feld leer ist, verwendet das Modul den Standardselektor:

.product-info-main .price-box

Einstellungen für Texte und Zeitformat

Das Feld Text Before Countdown legt den Text vor dem Countdown fest, zum Beispiel:

Promocja kończy się za:

Wenn das Feld leer ist, wird das Label vor dem Countdown nicht angezeigt und der Countdown-Wert selbst wird zentriert.

Das Feld Text Before End Date legt den Text vor dem Enddatum der Aktion fest, zum Beispiel:

Promocja do:

Wenn das Feld leer ist, wird unter dem Countdown nur das Datum angezeigt.

Mit dem Feld Displayed Time Template können Sie den Umfang der im Countdown angezeigten Zeiteinheiten auswählen.

Verfügbare Templates:

• 00d 00g 00m 00s,
• 00d 00g 00m,
• 00d 00g,
• 00d,
• 00g 00m 00s,
• 00m 00s.

Die Symbole der Zeiteinheiten können über separate Felder geändert werden:

• Days Symbol, standardmäßig d,
• Hours Symbol, standardmäßig g,
• Minutes Symbol, standardmäßig m,
• Seconds Symbol, standardmäßig s.

Beispiel: Wenn Sie Hours Symbol auf h setzen, kann der Countdown 02d 05h 30m 10s statt 02d 05g 30m 10s anzeigen.

Countdown erst kurz vor dem Ende der Aktion anzeigen

Das Feld Show Countdown Days Before End legt fest, wie viele Tage vor dem Ende der Aktion der Countdown sichtbar werden soll.

Beispiele:

• leeres Feld - der Countdown wird sofort angezeigt, sobald die Aktionsbedingungen erfüllt sind,
• 1 - der Countdown erscheint am letzten Tag der Aktion,
• 3 - der Countdown erscheint in den letzten 3 Tagen der Aktion,
• 7 - der Countdown erscheint in den letzten 7 Tagen der Aktion.

Das Feld akzeptiert ganze Zahlen. Ein leerer Wert bedeutet keine Einschränkung.

Design-Einstellungen

Das Modul ermöglicht die Konfiguration des Countdown-Designs ohne Codeänderungen.

Verfügbare Felder:

• Background Color - Hintergrundfarbe,
• Text Color - Basisfarbe des Textes,
• Label Color - Farbe des Labels vor dem Countdown,
• Timer Color - Farbe des Countdown-Werts,
• Border Color - Rahmenfarbe,
• Font Size - Schriftgröße.

Die Farbfelder verwenden einen Color Picker und speichern Hex-Werte, zum Beispiel:

#ffffff#333333#d32f2f

Die Schriftgröße wird aus einer Liste ausgewählt:

• 12px,
• 14px,
• 16px,
• 18px.

Kontrolle nach der Implementierung

Prüfen Sie nach Installation und Konfiguration:

1. Ein einfaches Produkt mit aktiver Aktion auf der Produktseite.
2. Ein einfaches Produkt mit aktiver Aktion im Kategorie-Listing.
3. Ein Produkt ohne aktiven Sonderpreis.
4. Ein Produkt mit einem Datum Special Price To Date in der Vergangenheit.
5. Ein Produkt mit leerem Special Price To Date.
6. Ein Produkt mit einem Sonderpreis, der gleich oder höher als der reguläre Preis ist.
7. Die Konfiguration Show Countdown Days Before End.
8. Verschiedene Templates Displayed Time Template.
9. Die Änderung der Symbole für Zeiteinheiten.
10. Die Änderung von Farben und Schriftgröße nach dem Leeren des Caches.
11. Die Browser-Konsole, ob keine JavaScript-Fehler vorhanden sind.
12. Den rohen HTML-Quelltext, ob er kein fertiges Element .countdown-promotion enthält.

Bekannte Einschränkungen

Das Modul verwendet Aktionen auf Basis der standardmäßigen Magento-Felder:

• special_price,
• special_from_date,
• special_to_date.

Katalogpreisregeln, Adobe Commerce Scheduled Updates sowie Varianten konfigurierbarer Produkte mit vollständig unabhängigen Aktionsdaten können eine separate Integration erfordern.

Themes, die das Rendering des Preises oder die Struktur der Produktkachel stark verändern, können die Einrichtung eigener CSS-Selektoren erfordern.

Häufige Probleme

Der Countdown ist nicht sichtbar

Prüfen Sie, ob:

• das Produkt Countdown Promotion = Yes hat,
• für das Produkt Special Price festgelegt ist,
• der Sonderpreis niedriger als der reguläre Preis ist,
• Special Price To Date auf ein Datum in der Zukunft gesetzt ist,
• Special Price From Date nicht auf ein zukünftiges Datum verweist,
• der Magento-Cache geleert wurde,
• der für die Kategorie festgelegte CSS-Selektor auf das richtige Produktelement verweist.

Der Countdown befindet sich an der falschen Stelle

Ändern Sie Category Placement oder legen Sie einen eigenen Category Custom CSS Selector fest. Verwenden Sie auf der Produktseite Product Page Custom CSS Selector.

Designänderungen sind nicht sichtbar

Leeren Sie den Magento-Cache:

bin/magento cache:flush

In der Produktion kann zusätzlich eine Aktualisierung der statischen Assets gemäß dem Deployment-Prozess des Shops erforderlich sein.