Vista Prodotto 360° (df360spin) — Documentazione
Installare, configurare e alimentare il visualizzatore prodotto 360° df360spin: preparazione delle immagini spin, impostazioni globali, creazione di una sequenza e buone pratiche di scatto.
Panoramica
Vista Prodotto 360° (df360spin) aggiunge alle tue schede prodotto un visualizzatore interattivo che ricostruisce una rotazione completa dell’articolo a partire da una semplice sequenza di immagini. Il visitatore trascina il prodotto con il mouse o con il dito per ruotarlo, con riproduzione automatica, schermo intero, contatore di immagini e navigazione da tastiera. Il modulo non sovrascrive alcun template: si inserisce tramite un hook di visualizzazione che scegli tu.
Una vista 360° non è un modello 3D: è una serie di foto scattate tutt’intorno al prodotto. La qualità del risultato dipende innanzitutto dalla regolarità del tuo scatto.
Preparare le immagini
Fotografa il prodotto su un piatto rotante scattando un numero regolare di viste equidistanti, con la stessa inquadratura e la stessa illuminazione. Ruota il piatto di un angolo costante tra uno scatto e l’altro (ad esempio 10° per 36 immagini, cioè 360° ÷ 36).
Numero di immagini consigliato
- 24 immagini (15° per passo): rotazione discreta, sequenza leggera.
- 36 immagini (10° per passo): buon equilibrio tra fluidità e peso, consigliato nella maggior parte dei casi.
- 72 immagini (5° per passo): rotazione molto fluida per prodotti di alto valore, sequenza più pesante.
Il modulo accetta fino a 120 fotogrammi per sequenza. Sotto le 24 immagini, la rotazione appare a scatti.
Denominazione e formato
Nomina i file in ordine di rotazione, con zeri iniziali per garantire il corretto ordinamento: frame_01.jpg, frame_02.jpg, … Il modulo ordina automaticamente le immagini per nome file all’importazione. Esporta in JPG, PNG o WebP a una dimensione coerente. Le immagini più larghe della larghezza massima configurata vengono ridimensionate automaticamente lato server.
Uno sfondo neutro e uniforme (bianco o grigio chiaro) e un’illuminazione fissa danno la rotazione più pulita. Blocca l’esposizione e il bilanciamento del bianco della fotocamera per evitare variazioni di luminosità da un’immagine all’altra.
Installazione
- Nel back office, apri Moduli > Gestore dei moduli, fai clic su Carica un modulo e seleziona il file ZIP
df360spin. - Una volta installato, fai clic su Configura per impostare le opzioni globali.
- Sotto Catalogo appare una nuova scheda Viste 360° Spin per gestire le tue sequenze.
Impostazioni globali
Dalla pagina di configurazione del modulo definisci il comportamento predefinito di tutti i visualizzatori:
- Posizione di visualizzazione: sotto le miniature del prodotto (consigliato), nel blocco delle informazioni aggiuntive o nel piè di pagina della scheda prodotto.
- Riproduzione automatica predefinita: avvia la rotazione continua al caricamento. Può essere sovrascritta sequenza per sequenza.
- Velocità di riproduzione (ms per immagine): per quanto tempo viene mostrata ogni immagine in riproduzione automatica. Più basso è il valore, più veloce è la rotazione. A titolo indicativo, 60 ms su 36 immagini danno un giro completo in circa 2 secondi.
- Sensibilità di trascinamento: numero di pixel di trascinamento necessari per avanzare di un fotogramma. Un valore basso rende la rotazione più reattiva.
- Larghezza massima dei fotogrammi (px): oltre questa larghezza, le immagini importate vengono ridimensionate automaticamente.
- Lazy loading: carica le immagini solo quando il visualizzatore entra nell’area visibile dello schermo.
Creare una sequenza 360°
- Apri Catalogo > Viste 360° Spin e poi fai clic su Aggiungi una sequenza 360°.
- Nel campo Prodotto, digita il nome, il riferimento o l’identificativo del prodotto: appare un elenco di suggerimenti, seleziona il prodotto corretto.
- Lascia la sequenza attiva e scegli la modalità di riproduzione automatica (usa l’impostazione globale, attivata o disattivata).
- Salva: appare il pannello di gestione dei fotogrammi.
Un prodotto può avere una sola sequenza per negozio. In multi-negozio, ogni negozio gestisce la propria sequenza per lo stesso prodotto.
Importare e ordinare i fotogrammi
- Trascina e rilascia le tue immagini nell’area di rilascio, oppure fai clic per selezionarle. Puoi inviarne più di una alla volta.
- Le immagini vengono caricate a lotti con una barra di avanzamento, poi ordinate per nome file.
- Riordinale trascinando le miniature; il nuovo ordine viene salvato automaticamente.
- Passa il mouse su una miniatura e fai clic sulla croce rossa per eliminare un’immagine.
- Fai clic su Anteprima della rotazione per riprodurre la sequenza direttamente nel back office prima di pubblicare.
Esperienza lato cliente
Nella scheda prodotto, il visitatore trascina il prodotto per ruotarlo in entrambi i sensi, con il mouse o con il dito, con un’inerzia al termine del gesto. La barra dei controlli offre un pulsante riproduci / pausa, un contatore di immagini e un pulsante schermo intero. Da tastiera, le frecce sinistra e destra avanzano fotogramma per fotogramma e la barra spaziatrice avvia o mette in pausa la rotazione. La preferenza di sistema per il movimento ridotto viene rispettata: la riproduzione automatica non si avvia se l’utente l’ha disattivata nel proprio sistema.
Risoluzione dei problemi
Il visualizzatore non appare
Verifica che la sequenza sia attiva, che contenga almeno due immagini e che la posizione di visualizzazione scelta nelle impostazioni corrisponda a un hook presente nel tuo tema. Il modulo mira ai temi basati su classic.
La rotazione è a scatti
Aumenta il numero di immagini della sequenza (punta a 36 o più) e verifica la regolarità dell’angolo tra uno scatto e l’altro.
Le immagini si caricano lentamente
Lascia attivo il lazy loading, riduci la larghezza massima dei fotogrammi nelle impostazioni e privilegia il formato WebP all’esportazione.
Compatibilità
- PrestaShop 8.0 a 9.x, tema classic e temi figli.
- Multi-negozio: una sequenza per prodotto e per negozio.
- Schermo touch e mouse, schermo intero del browser.
- Vanilla JS senza jQuery, nessun override di template.