Come aggiungere un carrello laterale AJAX a PrestaShop 8 e 9 (senza modificare il tema)

Quando un cliente aggiunge un prodotto in un negozio PrestaShop 1.7, 8 o 9 standard, il tema mostra un popup di conferma. Per cambiare una quantità, rimuovere un articolo o inserire un coupon, il cliente deve aprire una pagina del carrello separata e poi ritrovare la strada verso i prodotti.

Un carrello laterale mantiene tutto questo nella pagina in cui il cliente si trova già. Questa guida mostra cosa fa PrestaShop di serie, i due modi per aggiungere un carrello laterale AJAX e una configurazione passo passo che non tocca i file del tuo tema.

Cosa fa PrestaShop di serie

In PrestaShop il carrello è gestito dal modulo Carrello incluso nel negozio. Nel tema Classic funziona così:

• Il cliente fa clic su «Aggiungi al carrello» e una finestra modale conferma che il prodotto è stato aggiunto.
• La finestra modale offre due pulsanti: continuare lo shopping o procedere al checkout.
• Qualsiasi modifica al carrello (quantità, rimozione di un prodotto, un buono sconto) avviene nella pagina del carrello, con un caricamento completo della pagina.
• Su smartphone la finestra modale copre gran parte dello schermo e la pagina del carrello è un passaggio in più prima del checkout.

Questo flusso funziona, ma ogni modifica al carrello allontana il cliente dall’elenco dei prodotti. Circa il 70% dei carrelli online viene abbandonato, secondo il Baymard Institute, e i passaggi tra «aggiungi al carrello» e «paga» sono uno dei punti in cui le persone abbandonano.

Cosa cambia con un carrello laterale AJAX

Un carrello laterale AJAX è un pannello che scorre dal lato dello schermo quando si aggiunge un prodotto. La pagina sottostante resta dov’era.

• Le quantità si modificano con i pulsanti più e meno, senza ricaricare la pagina.
• I prodotti si rimuovono dal pannello e i totali si aggiornano subito.
• I codici sconto si inseriscono nello stesso pannello.
• Una barra della spedizione gratuita mostra quanto manca per raggiungere la soglia.
• Il pulsante del checkout è sempre a portata di tocco.

Approfondisci: carrello AJAX o ricaricamento della pagina in PrestaShop e cosa significa per la conversione →

Due modi per aggiungere un carrello laterale

Opzione 1: integrarlo nel tuo tema

Uno sviluppatore può sostituire la finestra modale del carrello con un pannello personalizzato. Questo significa modificare i template del tema, intercettare gli eventi del carrello di PrestaShop in JavaScript, chiamare il controller del carrello via AJAX e definire lo stile del risultato per desktop e mobile.

Offre il pieno controllo, ma il lavoro resta all’interno del tema. Un aggiornamento del tema può sovrascriverlo e ogni nuova funzione (coupon nel pannello, una barra della spedizione, suggerimenti di prodotti) è un altro pezzo di codice personalizzato da mantenere.

Opzione 2: installare un modulo

Un modulo di carrello laterale aggiunge il pannello tramite gli hook di PrestaShop. I file del tema restano intatti, il pannello sopravvive agli aggiornamenti del tema e le opzioni si attivano nelle impostazioni del modulo invece di essere programmate.

Il resto della guida usa Sliding Cart Block, il nostro modulo di carrello laterale AJAX per PrestaShop 1.7.8, 8 e 9. I passaggi per altri moduli sono simili: caricamento, configurazione, controllo degli hook, test.

Passo passo: aggiungere un carrello laterale senza modificare il tema

1. Verifica i requisiti

• PrestaShop 1.7.8 o successivo, inclusi PrestaShop 8 e 9.
• PHP 7.2 o successivo (PrestaShop 9 richiede PHP 8.1 o successivo).
• Un account del back office con i permessi per gestire i moduli.

Se nello stesso momento prevedi di passare a PrestaShop 9, analizza prima gli altri moduli.

Verifica gratuita della compatibilità dei moduli con PrestaShop 9 →

2. Carica il modulo

1. Nel back office vai su Moduli → Gestione moduli.
2. Fai clic su «Carica un modulo» nell’angolo in alto a destra.
3. Trascina il file ZIP del modulo nell’area di caricamento.
4. Al termine dell’installazione, fai clic su «Configura».

3. Scegli come si apre il carrello

Le prime impostazioni stabiliscono cosa succede dopo «Aggiungi al carrello»:

• Aprire automaticamente il pannello del carrello dopo l’aggiunta di un prodotto, oppure tenerlo chiuso e aggiornare solo l’icona del carrello.
• Un’impostazione separata per gli smartphone, con un breakpoint sulla larghezza dello schermo (480 px di default). Molti negozi tengono il pannello chiuso sugli schermi piccoli e lo aprono su desktop.
• Pannello a sinistra o a destra, modalità chiara o scura e layout a tutta larghezza sugli smartphone.
• Una barra laterale opzionale che resta aperta sugli schermi larghi (1300 px e oltre di default).

4. Attiva ciò che il carrello deve mostrare

• Pulsanti della quantità, immagini dei prodotti e attributi selezionati (taglia, colore).
• Campo coupon e risparmio totale.
• Barra della spedizione gratuita. Legge la soglia della spedizione gratuita dalle impostazioni dei corrieri, quindi non c’è nessun importo da reinserire.
• Fino a tre livelli di premio sulla barra di avanzamento, per esempio uno sconto, un regalo e la spedizione gratuita.
• Suggerimenti di prodotti nel pannello e nel popup di aggiunta al carrello.
• Un messaggio di ordine minimo che disattiva il pulsante del checkout al di sotto dell’importo minimo.

5. Controlla gli hook

Il pannello è agganciato tramite hook, quindi non serve modificare alcun template. Se il carrello non compare dopo l’installazione, vai su Design → Posizioni e verifica che il modulo sia agganciato a displayHeader e displayNav.

Se è attivo un altro modulo del carrello, può comparire un secondo carrello o un secondo popup. Disattiva l’altro modulo prima del test.

6. Svuota la cache e fai un test

Svuota la cache di PrestaShop in Parametri avanzati → Prestazioni, poi fai un test come cliente:

• Aggiungi un prodotto da una pagina di categoria e da una pagina prodotto.
• Modifica una quantità e rimuovi un prodotto nel pannello.
• Applica un codice sconto.
• Controlla la barra della spedizione gratuita sotto e sopra la soglia.
• Ripeti su uno smartphone, poi effettua un ordine di prova.

Tutte le impostazioni spiegate nella documentazione di Sliding Cart Block →

Cosa misurare dopo la modifica

Confronta le quattro settimane prima e dopo la modifica, separatamente per desktop e mobile:

• Tasso di passaggio dall’aggiunta al carrello al checkout.
• Tasso di abbandono del carrello.
• Valore medio dell’ordine, se hai attivato la barra della spedizione gratuita o i suggerimenti di prodotti.

Come misurare l’abbandono del carrello in PrestaShop →

Pattern UX del carrello su mobile per PrestaShop →

Domande frequenti

Devo modificare il tema per aggiungere un carrello laterale?

No. Un modulo aggiunge il pannello tramite gli hook di PrestaShop, quindi i file del tema restano come sono. Alcuni temi richiedono qualche riga di CSS per adattare colori o spaziature.

Il carrello laterale sostituisce la pagina del carrello?

No. La pagina del carrello e il checkout continuano a funzionare come prima. Il carrello laterale è un livello in più che gestisce le azioni più comuni senza lasciare la pagina.

Funziona su PrestaShop 9?

Sliding Cart Block funziona su PrestaShop 1.7.8, 8 e 9. Se aggiorni l’intero negozio, controlla negli altri moduli il codice che PrestaShop 9 ha rimosso.

Rallenterà il negozio?

Il pannello usa un proprio controller AJAX e carica solo i dati di cui il carrello ha bisogno. La pagina prodotto non si ricarica quando il carrello cambia.

I clienti possono usare codici sconto nel carrello laterale?

Sì. Nel pannello si può attivare un campo coupon espandibile e i totali si aggiornano non appena il codice viene applicato.