Instrucțiuni de instalare și configurare Countdown Promotion pentru Magento 2

Modulul Kowal_CountdownPromotion adaugă în Magento 2 un cronometru pentru finalul promoției. Cronometrul poate fi vizibil în listarea categoriei și pe pagina produsului atunci când produsul are un preț special activ și o dată de finalizare a promoției setată.

Cronometrul vizibil este creat de JavaScript după încărcarea paginii. Backend-ul transmite către frontend doar date tehnice, printre care ID-ul produsului și timestamp-ul finalului promoției.

Cerințe

Înainte de instalare, asigură-te că magazinul îndeplinește cerințele:

• Magento Open Source sau Adobe Commerce 2.4.x,
• PHP 7.4 sau PHP 8.1+ conform versiunii Magento,
• posibilitatea de a instala pachete Composer de tip magento2-module,
• acces la CLI Magento,
• acces la repository-ul modulului.

Instalare prin Composer

Mergi în directorul rădăcină al proiectului Magento.

Pentru repository-ul Git, adaugă repository-ul modulului în configurația Composer:

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

După instalare, Composer va plasa modulul în directorul:

vendor/kowal/module-countdown-promotion

Activarea modulului în Magento

Rulează comenzile Magento din directorul rădăcină al magazinului:

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

În mediul de producție, de obicei trebuie rulate și comenzile de deployment utilizate în proiect:

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

Configurarea produsului

Pentru fiecare produs la care trebuie să apară cronometrul:

1. Setează Countdown Promotion la Yes.
2. Setează Special Price.
3. Setează Special Price To Date.
4. Opțional, setează Special Price From Date.

Cronometrul va apărea doar atunci când sunt îndeplinite toate condițiile:

• atributul countdown_promotion este activat,
• special_price este setat,
• prețul special este mai mic decât prețul regulat,
• special_from_date este gol sau promoția a început deja,
• special_to_date este setat în viitor.

Pentru produsele configurabile, activează Countdown Promotion pe produsul părinte. Modulul poate folosi data promoției din produsul părinte sau datele active ale promoției din produsele simple asociate, atunci când promoția este setată pe variante.

Configurarea modulului

Opțiunile modulului sunt disponibile în panoul de administrare Magento:

Stores > Configuration > Catalog > Countdown Promotion > Appearance

După modificarea configurației, curăță cache-ul:

bin/magento cache:flush

Setările poziției cronometrului

Câmpul Category Placement definește poziția cronometrului în listarea categoriei.

Opțiuni disponibile:

• Below price - cronometrul sub preț,
• Bottom of product image - cronometrul în partea de jos a imaginii produsului,
• Top of product image - cronometrul în partea de sus a imaginii produsului,
• Custom CSS selector - cronometrul lângă elementul indicat prin propriul selector CSS.

Când alegi Custom CSS selector, completează câmpul Category Custom CSS Selector. Elementul selectat trebuie să aibă data-product-id sau să se afle în cardul produsului care conține .price-box[data-product-id].

Exemple de selectori:

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

Câmpul Product Page Custom CSS Selector se aplică doar paginii produsului. Introdu selectorul elementului după care trebuie adăugat cronometrul.

Exemple:

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

Dacă acest câmp este gol, modulul folosește selectorul implicit:

.product-info-main .price-box

Setările textelor și ale formatului de timp

Câmpul Text Before Countdown setează textul dinaintea cronometrului, de exemplu:

Promocja kończy się za:

Dacă acest câmp este gol, eticheta dinaintea cronometrului nu este afișată, iar valoarea numărătorii inverse este centrată.

Câmpul Text Before End Date setează textul dinaintea datei de finalizare a promoției, de exemplu:

Promocja do:

Dacă acest câmp este gol, sub cronometru este afișată doar data.

Câmpul Displayed Time Template permite alegerea intervalului de unități de timp afișate în cronometru.

Șabloane disponibile:

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

Simbolurile unităților de timp pot fi modificate prin câmpuri separate:

• Days Symbol, implicit d,
• Hours Symbol, implicit g,
• Minutes Symbol, implicit m,
• Seconds Symbol, implicit s.

Exemplu: dacă setezi Hours Symbol la h, cronometrul poate afișa 02d 05h 30m 10s în loc de 02d 05g 30m 10s.

Afișarea cronometrului doar înainte de finalul promoției

Câmpul Show Countdown Days Before End stabilește cu câte zile înainte de finalul promoției cronometrul trebuie să devină vizibil.

Exemple:

• câmp gol - cronometrul este afișat imediat după îndeplinirea condițiilor promoției,
• 1 - cronometrul va apărea în ultima zi a promoției,
• 3 - cronometrul va apărea în ultimele 3 zile ale promoției,
• 7 - cronometrul va apărea în ultimele 7 zile ale promoției.

Câmpul acceptă numere întregi. O valoare goală înseamnă lipsa unei limitări.

Setări de aspect

Modulul permite configurarea aspectului cronometrului fără modificări în cod.

Câmpuri disponibile:

• Background Color - culoarea fundalului,
• Text Color - culoarea de bază a textului,
• Label Color - culoarea etichetei dinaintea cronometrului,
• Timer Color - culoarea valorii numărătorii inverse,
• Border Color - culoarea chenarului,
• Font Size - dimensiunea fontului.

Câmpurile de culoare folosesc color picker și salvează valorile hex, de exemplu:

#ffffff#333333#d32f2f

Dimensiunea fontului se alege din listă:

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

Verificare după implementare

După instalare și configurare, verifică:

1. Produs simplu cu promoție activă pe pagina produsului.
2. Produs simplu cu promoție activă în listarea categoriei.
3. Produs fără preț special activ.
4. Produs cu data Special Price To Date în trecut.
5. Produs cu Special Price To Date gol.
6. Produs cu preț special egal cu sau mai mare decât prețul regulat.
7. Configurația Show Countdown Days Before End.
8. Diferite șabloane Displayed Time Template.
9. Modificarea simbolurilor unităților de timp.
10. Modificarea culorilor și a dimensiunii fontului după curățarea cache-ului.
11. Consola browserului, pentru a vedea dacă nu există erori JavaScript.
12. Sursa HTML brută, pentru a vedea dacă nu conține un element gata pregătit .countdown-promotion.

Limitări cunoscute

Modulul folosește promoții bazate pe câmpurile standard Magento:

• special_price,
• special_from_date,
• special_to_date.

Regulile de catalog, Adobe Commerce Scheduled Updates și variantele produselor configurabile cu date de promoție complet independente pot necesita o integrare separată.

Temele care modifică semnificativ randarea prețului sau structura cardului de produs pot necesita setarea propriilor selectori CSS.

Cele mai frecvente probleme

Cronometrul nu este vizibil

Verifică dacă:

• produsul are Countdown Promotion = Yes,
• produsul are Special Price setat,
• prețul special este mai mic decât prețul regulat,
• Special Price To Date este setat în viitor,
• Special Price From Date nu indică o dată viitoare,
• cache-ul Magento a fost curățat,
• pentru categorie, selectorul CSS setat indică elementul corect al produsului.

Cronometrul este în locul greșit

Schimbă Category Placement sau setează propriul Category Custom CSS Selector. Pe pagina produsului, folosește Product Page Custom CSS Selector.

Modificările de aspect nu sunt vizibile

Curăță cache-ul Magento:

bin/magento cache:flush

În producție, poate fi necesară și reîmprospătarea asseturilor statice conform procesului de deployment al magazinului.