Istruzioni di installazione e configurazione di Countdown Promotion per Magento 2

Il moduloKowal_CountdownPromotionaggiunge a Magento 2 un conto alla rovescia per la fine della promozione. Il contatore può essere visibile nel listing di categoria e nella scheda prodotto quando il prodotto ha un prezzo speciale attivo e una data di fine promozione impostata.

Il contatore visibile viene creato da JavaScript dopo il caricamento della pagina. Il backend trasmette al frontend solo dati tecnici, tra cui l'ID del prodotto e il timestamp di fine promozione.

Requisiti

Prima dell'installazione, assicurati che il negozio soddisfi i requisiti:

• Magento Open Source o Adobe Commerce 2.4.x,
• PHP 7.4 oppure PHP 8.1+ in base alla versione di Magento,
• possibilità di installare pacchetti Composer di tipomagento2-module,
• accesso alla CLI Magento,
• accesso al repository del modulo.

Installazione tramite Composer

Vai alla directory principale del progetto Magento.

Aggiungi il repository Composer Kowal alla configurazione del progetto:

I dati di accesso al repository Composer, ovvero l indirizzo e-mail del cliente e il token di licenza, saranno inviati via e-mail dopo l acquisto. Sono disponibili anche nel pannello cliente dopo l accesso su kowal.store. Sostituisci TWOJ_EMAIL_KLIENTA con l indirizzo e-mail del tuo account e TWOJ_TOKEN con il token ricevuto. Esegui i comandi nella directory principale di Magento.

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

Dopo l'installazione, Composer collocherà il modulo nella directory:

vendor/kowal/module-countdown-promotion

Abilitazione del modulo in Magento

Esegui i comandi Magento dalla directory principale del negozio:

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

In un ambiente di produzione, di solito è necessario eseguire anche i comandi di deployment utilizzati nel progetto:

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

Configurazione del prodotto

Per ogni prodotto per il quale deve comparire il contatore:

1. ImpostaCountdown PromotionsuYes.
2. ImpostaSpecial Price.
3. ImpostaSpecial Price To Date.
4. Facoltativamente, impostaSpecial Price From Date.

Il contatore apparirà solo quando sono soddisfatte tutte le condizioni:

• l'attributocountdown_promotionè abilitato,
• special_priceè impostato,
• il prezzo speciale è inferiore al prezzo regolare,
• special_from_dateè vuoto oppure la promozione è già iniziata,
• special_to_dateè impostato nel futuro.

Per i prodotti configurabili, abilitaCountdown Promotionsul prodotto padre. Il modulo può utilizzare la data della promozione del prodotto padre oppure le date di promozione attive dei prodotti semplici collegati, quando la promozione è impostata sulle varianti.

Configurazione del modulo

Le opzioni del modulo sono disponibili nel pannello di amministrazione Magento:

Stores > Configuration > Catalog > Countdown Promotion > Appearance

Dopo aver modificato la configurazione, svuota la cache:

bin/magento cache:flush

Impostazioni della posizione del contatore

CampoCategory Placementdefinisce la posizione del contatore nel listing di categoria.

Opzioni disponibili:

• Below price- contatore sotto il prezzo,
• Bottom of product image- contatore nella parte inferiore dell'immagine del prodotto,
• Top of product image- contatore nella parte superiore dell'immagine del prodotto,
• Custom CSS selector- contatore presso l'elemento indicato con un selettore CSS personalizzato.

Quando selezioniCustom CSS selector, compila il campoCategory Custom CSS Selector. L'elemento selezionato dovrebbe averedata-product-idoppure trovarsi nel riquadro del prodotto che contiene.price-box[data-product-id].

Esempi di selettori:

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

CampoProduct Page Custom CSS Selectorriguarda solo la scheda prodotto. Inserisci il selettore dell'elemento dopo il quale il contatore deve essere aggiunto.

Esempi:

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

Se il campo è vuoto, il modulo utilizza il selettore predefinito:

.product-info-main .price-box

Impostazioni dei testi e del formato del tempo

CampoText Before Countdown imposta il testo prima del contatore, ad esempio:

Promocja kończy się za:

Se il campo è vuoto, l'etichetta prima del contatore non viene visualizzata e il solo valore del conto alla rovescia viene centrato.

CampoText Before End Date imposta il testo prima della data di fine promozione, ad esempio:

Promocja do:

Se il campo è vuoto, sotto il contatore viene visualizzata solo la data.

CampoDisplayed Time Templateconsente di scegliere l'intervallo di unità di tempo mostrate nel contatore.

Template disponibili:

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

I simboli delle unità di tempo possono essere modificati con campi separati:

• Days Symbol, predefinitod,
• Hours Symbol, predefinitog,
• Minutes Symbol, predefinitom,
• Seconds Symbol, predefinitos.

Esempio: se impostiHours Symbolsuh, il contatore può visualizzare02d 05h 30m 10sinvece di02d 05g 30m 10s.

Mostrare il contatore solo prima della fine della promozione

CampoShow Countdown Days Before Enddefinisce quanti giorni prima della fine della promozione il contatore deve diventare visibile.

Esempi:

• campo vuoto - il contatore viene mostrato subito dopo il soddisfacimento delle condizioni della promozione,
• 1- il contatore apparirà nell'ultimo giorno della promozione,
• 3- il contatore apparirà negli ultimi 3 giorni della promozione,
• 7- il contatore apparirà negli ultimi 7 giorni della promozione.

Il campo accetta numeri interi. Un valore vuoto indica l'assenza di limitazioni.

Impostazioni dell'aspetto

Il modulo consente di configurare l'aspetto del contatore senza modificare il codice.

Campi disponibili:

• Background Color- colore dello sfondo,
• Text Color- colore di base del testo,
• Label Color- colore dell'etichetta prima del contatore,
• Timer Color- colore del valore del conto alla rovescia,
• Border Color- colore del bordo,
• Font Size- dimensione del carattere.

I campi colore utilizzano un color picker e salvano valori hex, ad esempio:

#ffffff
#333333
#d32f2f

La dimensione del carattere viene scelta da un elenco:

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

Controllo dopo il deployment

Dopo l'installazione e la configurazione, verifica:

1. Prodotto semplice con promozione attiva nella scheda prodotto.
2. Prodotto semplice con promozione attiva nel listing di categoria.
3. Prodotto senza prezzo speciale attivo.
4. Prodotto con dataSpecial Price To Datenel passato.
5. Prodotto conSpecial Price To Date.
6. Prodotto con prezzo speciale uguale o superiore al prezzo regolare.
7. La configurazioneShow Countdown Days Before End.
8. Diversi templateDisplayed Time Template.
9. La modifica dei simboli delle unità di tempo.
10. La modifica dei colori e della dimensione del carattere dopo lo svuotamento della cache.
11. La console del browser, per verificare che non ci siano errori JavaScript.
12. Il sorgente HTML grezzo, per verificare che non contenga un elemento.countdown-promotion.

Limitazioni note

Il modulo utilizza promozioni basate sui campi standard di Magento:

• special_price,
• special_from_date,
• special_to_date.

Le regole di catalogo, Adobe Commerce Scheduled Updates e le varianti di prodotti configurabili con date di promozione completamente indipendenti possono richiedere un'integrazione separata.

I temi che modificano in modo significativo il rendering del prezzo o la struttura del riquadro prodotto possono richiedere l'impostazione di selettori CSS personalizzati.

Problemi più frequenti

Il contatore non è visibile

Verifica che:

• il prodotto abbiaCountdown Promotion = Yes,
• il prodotto abbiaSpecial Price,
• il prezzo speciale è inferiore al prezzo regolare,
• Special Price To Datesia impostato nel futuro,
• Special Price From Datenon indichi una data futura,
• la cache Magento sia stata svuotata,
• per la categoria, il selettore CSS impostato indichi l'elemento prodotto corretto.

Il contatore si trova nel punto sbagliato

ModificaCategory Placementoppure imposta unCategory Custom CSS Selectorpersonalizzato. Nella scheda prodotto usaProduct Page Custom CSS Selector.

Le modifiche dell'aspetto non sono visibili

Svuota la cache Magento:

bin/magento cache:flush

In produzione potrebbe essere necessario anche aggiornare gli asset statici secondo il processo di deployment del negozio.