Anleitung zur Installation und Konfiguration von Countdown Promotion für Magento 2

Das ModulKowal_CountdownPromotionergänzt Magento 2 um einen Countdown zum Aktionsende. Der Countdown kann auf der Kategorieliste und der Produktseite angezeigt werden, wenn das Produkt über einen aktiven Sonderpreis und ein festgelegtes Enddatum der Aktion verfügt.

Der sichtbare Countdown wird nach dem Laden der Seite durch JavaScript erstellt. Das Backend übermittelt an das Frontend ausschließlich technische Daten, darunter die Produkt-ID und den Zeitstempel des Aktionsendes.

Anforderungen

Stellen Sie vor der Installation sicher, dass der Shop folgende 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 Typsmagento2-module,
• Zugriff auf die Magento-CLI,
• Zugriff auf das Modul-Repository.

Installation über Composer

Wechseln Sie in das Stammverzeichnis des Magento-Projekts.

Fügen Sie das Kowal-Composer-Repository zur Projektkonfiguration hinzu:

Die Zugangsdaten zum Composer-Repository (E-Mail-Adresse des Kunden und Lizenz-Token) erhalten Sie nach dem Kauf per E-Mail. Sie sind außerdem nach dem Login im Kundenbereich unter kowal.storeverfügbar. Ersetzen Sie TWOJ_EMAIL_KLIENTA durch die E-Mail-Adresse Ihres Kontos und TWOJ_TOKEN durch den erhaltenen Token. Führen Sie die Befehle im Magento-Stammverzeichnis aus.

composer config repositories.kowal composer https://repo.kowal.store
composer config http-basic.repo.kowal.store "TWOJ_EMAIL_KLIENTA" "TWOJ_TOKEN"
composer require kowal/module-countdown-promotion

Nach der Installation legt Composer das Modul in folgendem Verzeichnis ab:

vendor/kowal/module-countdown-promotion

Aktivierung des Moduls in Magento

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

bin/magento module:enable Kowal_CountdownPromotion
bin/magento setup:upgrade
bin/magento cache:flush

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

bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento indexer:reindex
bin/magento cache:flush

Produktkonfiguration

Gehen Sie bei jedem Produkt, für das der Countdown angezeigt werden soll, wie folgt vor:

1. Legen SieCountdown PromotionaufYes.
2. Legen SieSpecial Price.
3. Legen SieSpecial Price To Date.
4. Legen Sie optionalSpecial Price From Date.

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

• Das Attributcountdown_promotionist aktiviert,
• special_priceist festgelegt,
• der Sonderpreis ist niedriger als der reguläre Preis,
• special_from_dateist leer oder die Aktion hat bereits begonnen,
• special_to_dateliegt in der Zukunft.

Aktivieren Sie bei konfigurierbaren ProduktenCountdown Promotionam übergeordneten Produkt. Das Modul kann das Aktionsdatum des übergeordneten Produkts oder aktive Aktionsdaten der verknüpften einfachen Produkte verwenden, wenn die Aktion für Varianten eingerichtet wurde.

Modulkonfiguration

Die Moduloptionen sind im Magento-Admin-Panel verfügbar:

Stores > Configuration > Catalog > Countdown Promotion > Appearance

Leeren Sie nach einer Änderung der Konfiguration den Cache:

bin/magento cache:flush

Einstellungen für die Countdown-Position

FeldCategory Placementlegt die Position des Countdowns auf der Kategorieliste fest.

Verfügbare Optionen:

• Below price– Countdown unterhalb des Preises,
• 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 über einen eigenen CSS-Selektor angegeben wird.

Wenn SieCustom CSS selectorauswählen, füllen Sie das FeldCategory Custom CSS Selectoraus. Das ausgewählte Element sollte überdata-product-idverfügen oder sich in einer Produktkachel befinden, die.price-box[data-product-id].

Beispielselektoren:

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

FeldProduct Page Custom CSS Selectorgilt nur für die Produktseite. Geben Sie den Selektor des Elements ein, hinter dem der Countdown eingefügt werden soll.

Beispiele:

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

Wenn das Feld leer ist, verwendet das Modul den standardmäßigen Selektor:

.product-info-main .price-box

Einstellungen für Texte und Zeitformat

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

Promocja kończy się za:

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

FeldText 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.

FeldDisplayed Time Templatekönnen Sie auswählen, welche Zeiteinheiten im Countdown angezeigt werden.

Verfügbare Vorlagen:

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

Die Symbole der Zeiteinheiten können in separaten Feldern geändert werden:

• Days Symbol, standardmäßigd,
• Hours Symbol, standardmäßigg,
• Minutes Symbol, standardmäßigm,
• Seconds Symbol, standardmäßigs.

Beispiel: Wenn SieHours Symbolaufhsetzen, kann der Countdown02d 05h 30m 10sanstelle von02d 05g 30m 10s.

Countdown erst kurz vor dem Aktionsende anzeigen

FeldShow Countdown Days Before Endlegt 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, dass keine Einschränkung gilt.

Darstellungseinstellungen

Mit dem Modul können Sie die Darstellung des Countdowns ohne Codeänderungen konfigurieren.

Verfügbare Felder:

• Background Color– Hintergrundfarbe,
• Text Color– grundlegende Textfarbe,
• Label Color– Farbe der Beschriftung 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.

Prüfung nach der Implementierung

Prüfen Sie nach der Installation und Konfiguration Folgendes:

1. Ein einfaches Produkt mit aktiver Aktion auf der Produktseite.
2. Ein einfaches Produkt mit aktiver Aktion auf der Kategorieliste.
3. Ein Produkt ohne aktiven Sonderpreis.
4. Ein Produkt mit einemSpecial Price To Datein der Vergangenheit.
5. Ein Produkt mit leeremSpecial Price To Date.
6. Ein Produkt mit einem Sonderpreis, der gleich oder höher als der reguläre Preis ist.
7. Die KonfigurationShow Countdown Days Before End.
8. Verschiedene Vorlagen unterDisplayed 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 Browserkonsole auf JavaScript-Fehler.
12. Den HTML-Quelltext darauf, ob er bereits ein fertiges Element.countdown-promotion.

Bekannte Einschränkungen

Das Modul verwendet Aktionen, die auf den standardmäßigen Magento-Feldern basieren:

• special_price,
• special_from_date,
• special_to_date.

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

Bei Themes, die die Preisdarstellung oder die Struktur der Produktkachel stark verändern, müssen möglicherweise eigene CSS-Selektoren festgelegt werden.

Häufige Probleme

Der Countdown ist nicht sichtbar

Prüfen Sie, ob:

• für das ProduktCountdown Promotion = Yes,
• für das ProduktSpecial Price,
• der Sonderpreis ist niedriger als der reguläre Preis,
• Special Price To Datein der Zukunft liegt,
• Special Price From Datenicht 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 Position

Ändern SieCategory Placementoder legen Sie einen eigenenCategory Custom CSS Selectorfest. Verwenden Sie auf der ProduktseiteProduct Page Custom CSS Selector.

Änderungen an der Darstellung sind nicht sichtbar

Leeren Sie den Magento-Cache:

bin/magento cache:flush

In der Produktionsumgebung kann es außerdem erforderlich sein, die statischen Assets gemäß dem Deployment-Prozess des Shops zu aktualisieren.