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 sfârșit a promoției setată.

Cronometrul vizibil este creat de JavaScript după încărcarea paginii. Backendul transmite către frontend doar date tehnice, inclusiv ID-ul produsului și timestamp-ul de final al promoției.

Cerințe

Înainte de instalare, asigurați-vă 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

Accesați directorul rădăcină al proiectului Magento.

Adăugați repository-ul Composer Kowal în configurația proiectului:

Datele de acces la repository-ul Composer, adresa de e-mail a clientului și tokenul de licență, le veți primi prin e-mail după achiziție. Sunt disponibile și în panoul clientului după autentificare pe kowal.store. Înlocuiți TWOJ_EMAIL_KLIENTA cu adresa de e-mail a contului dumneavoastră, iar TWOJ_TOKEN cu tokenul primit. Executați comenzile în directorul rădăcină Magento.

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

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

vendor/kowal/module-countdown-promotion

Activarea modulului în Magento

Rulați 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 implementare 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. Setați Countdown Promotion la Yes.
2. Setați Special Price.
3. Setați Special Price To Date.
4. Opțional, setați Special Price From Date.

Cronometrul va apărea numai dacă sunt îndeplinite toate condițiile:

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

Pentru produsele configurabile, activați Countdown Promotion pe produsul părinte. Modulul poate utiliza 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ățați cache-ul:

bin/magento cache:flush

Setări pentru poziționarea cronometrului

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

Opțiuni disponibile:

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

Când selectați Custom CSS selector, completați câmpul Category Custom CSS Selector. Elementul selectat trebuie să aibă data-product-id sau să se afle în tile-ul 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. Introduceți 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ări pentru texte și formatul timpului

Câmpul Text Before Countdown setează textul afișat înaintea 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 afișat înaintea datei de sfârșit 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ă setați 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 restricției.

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 pickerul și salvează valori hex, de exemplu:

#ffffff#333333#d32f2f

Dimensiunea fontului este selectată din listă:

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

Verificare după implementare

După instalare și configurare, verificați:

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 sau mai mare decât prețul obișnuit.
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 verifica dacă nu există erori JavaScript.
12. Sursa HTML brută, pentru a verifica dacă nu conține un element gata pregătit .countdown-promotion.

Limitări cunoscute

Modulul utilizează 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 integrare separată.

Temele care modifică semnificativ randarea prețului sau structura tile-ului de produs pot necesita setarea unor selectori CSS proprii.

Cele mai frecvente probleme

Cronometrul nu este vizibil

Verificați dacă:

• produsul are Countdown Promotion = Yes,
• produsul are setat Special Price,
• prețul special este mai mic decât prețul obișnuit,
• 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 într-un loc greșit

Schimbați Category Placement sau setați propriul Category Custom CSS Selector. Pe pagina produsului, utilizați Product Page Custom CSS Selector.

Modificările de aspect nu sunt vizibile

Curățați cache-ul Magento:

bin/magento cache:flush

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