Come aggiungere un pulsante «Carica altri» o lo scroll infinito alle pagine di categoria di PrestaShop

Una pagina di categoria di PrestaShop mostra un numero fisso di prodotti e una fila di numeri di pagina in fondo. Per vederne altri, il cliente fa clic su «2», attende il caricamento completo della pagina e ricomincia dall’inizio dell’elenco.

Un pulsante «Carica altri» o lo scroll infinito aggiungono invece i prodotti successivi alla stessa pagina. Questa guida spiega come scegliere tra i due, come mantenere le pagine paginate visibili a Google e come configurarlo su PrestaShop 1.7 e 8 senza modificare il tema.

Pulsante «Carica altri» o scroll infinito automatico?

Entrambi caricano i prodotti successivi via AJAX. La differenza è chi decide quando succede.

• Carica altri: il cliente fa clic su un pulsante sotto la griglia dei prodotti. Il footer resta raggiungibile e il cliente decide quanto caricare.
• Scroll infinito: i prodotti successivi si caricano automaticamente quando il cliente si avvicina alla fine dell’elenco. Su smartphone la navigazione è più rapida, ma il footer è più difficile da raggiungere.

Una scelta pratica predefinita per la maggior parte dei negozi è il pulsante «Carica altri», provando il caricamento automatico nelle categorie in cui i clienti scorrono molti prodotti di fila, come moda o arredamento.

Pulsante «Carica altri» o scroll infinito automatico: il confronto completo →

Mantieni scansionabili le pagine paginate

I motori di ricerca non scorrono la pagina e non cliccano sui pulsanti. Se i prodotti delle pagine 2, 3 e 4 compaiono solo dopo un’azione JavaScript, un crawler potrebbe non vederli mai.

Le linee guida di Google su paginazione e caricamento incrementale delle pagine si riassumono in poche regole:

• Ogni pagina della categoria mantiene il proprio URL, come ?page=2.
• Ogni pagina rimanda alla successiva con un normale link che un crawler può seguire.
• Caricare altri prodotti nella pagina non rimuove quei link dall’HTML.

La configurazione sicura mantiene nella pagina la paginazione nativa di PrestaShop e la nasconde visivamente solo quando JavaScript è attivo. I visitatori vedono il pulsante «Carica altri» e i crawler trovano comunque i link a tutte le pagine.

Paginazione o scroll infinito in PrestaShop: il lato SEO →

Passo passo: aggiungere «Carica altri» o lo scroll infinito alle pagine di categoria

I passaggi seguenti usano Infinite Scroll, il nostro modulo per PrestaShop 1.7 e 8. Funziona tramite hook, quindi i file del tema restano intatti.

1. Carica il modulo

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

2. Scegli la modalità di caricamento

• Tipo di caricamento infinito: «Pulsante Carica altri» (predefinito) o «Allo scorrimento».
• Stile del loader: un messaggio di testo o una di sei animazioni.
• Testi: l’etichetta del pulsante, il messaggio «Caricamento…» e il messaggio mostrato quando non ci sono altri prodotti.
• Colori del pulsante, del loader e del testo.

3. Decidi dove attivarlo

Il modulo funziona nelle pagine di categoria e anche in quelle di ricerca, marca, fornitore, nuovi prodotti, più venduti e prezzi ribassati. Un blocco opzionale nella home page carica i prodotti di una categoria a tua scelta, pochi alla volta.

4. Controlla i selettori nei temi personalizzati

Il modulo deve sapere dove si trovano i prodotti e la paginazione nel tuo tema. I valori predefiniti corrispondono al tema Classic:

• Contenitore dei prodotti: #products .products.row
• Paginazione: .pagination
• Link alla pagina successiva: .page-list .next
• Singolo prodotto: .products.row article

In un tema personalizzato, apri una pagina di categoria, fai clic destro su un prodotto, scegli «Ispeziona» e copia nelle impostazioni del modulo i nomi delle classi usati dal tema. Non serve modificare il codice.

5. Fai un test con i filtri

La ricerca a faccette è il punto in cui il caricamento dei prodotti si blocca più spesso. Prova questi casi in una pagina di categoria:

• Carica altri prodotti, poi applica un filtro (marca, prezzo o un attributo).
• Applica prima un filtro, poi carica altri prodotti.
• Cambia l’ordinamento e carica di nuovo altri prodotti.
• Apri la pagina 2 direttamente dal suo URL e verifica che mostri ancora i prodotti giusti.

Il modulo legge i filtri attivi e l’ordinamento, quindi i prodotti successivi corrispondono a ciò che il cliente ha selezionato.

6. Controlla il risultato su uno smartphone

• Carica alcuni blocchi di prodotti e verifica che le immagini compaiano senza salti della pagina.
• Usa il pulsante per tornare in cima per raggiungere di nuovo i filtri.
• Apri un prodotto, torna indietro e verifica che la pagina di categoria funzioni ancora.

Tutte le impostazioni di Infinite Scroll spiegate nella documentazione →

Velocità e immagini

I prodotti caricati in seguito non devono rallentare la prima visualizzazione della pagina. Le immagini aggiunte dal modulo usano il lazy loading nativo, la decodifica asincrona e una priorità di recupero bassa. Sono supportati anche i temi che usano un proprio lazy loading con attributi data-src.

Ottimizzazione delle pagine di categoria di PrestaShop: la guida completa →

Domande frequenti

Lo scroll infinito danneggia la SEO in PrestaShop?

No, se ogni pagina della categoria mantiene il proprio URL e i link di paginazione restano nell’HTML. I problemi iniziano quando i prodotti delle pagine successive si raggiungono solo scorrendo o cliccando.

Funziona con la ricerca a faccette?

Sì. I prodotti successivi seguono i filtri attivi e l’ordinamento, inclusi marca, prezzo e attributi.

Quali versioni di PrestaShop sono supportate?

Infinite Scroll funziona su PrestaShop 1.7 e 8.

Posso usare un pulsante «Carica altri» invece del caricamento automatico?

Sì. Il pulsante è la modalità predefinita. Il caricamento automatico allo scorrimento si attiva con un solo interruttore nelle impostazioni.

Devo modificare il tema?

No. Il tema Classic funziona con le impostazioni predefinite. Per i temi personalizzati può essere necessario inserire i relativi selettori CSS nelle impostazioni del modulo.