CSS e JavaScript personalizzati
Inietta regole CSS e JavaScript direttamente nel modulo senza modificare i file del tema, e aggancia eventi chiave del ciclo di vita del video con callback dedicati.
Disponibile dalla v3.2.0
Panoramica
La sezione CSS / JS personalizzato offre uno spazio dedicato nel Back Office per estendere e personalizzare il comportamento front-end del modulo. Il CSS inserito viene aggiunto dopo il foglio di stile predefinito del modulo, quindi le tue regole vincono sempre la gara di specificità. Il JavaScript inserito viene caricato come file separato e ha accesso a jQuery e a tutte le variabili front-office di PrestaShop.
Oltre al CSS e JS generali, la sezione espone tre callback JavaScript strutturati che si attivano nei momenti precisi: immediatamente dopo che le miniature video vengono inserite nella pagina, quando si fa clic su qualsiasi miniatura e quando viene rilevata una visita da dispositivo mobile o viewport ridotto. Questi callback consentono di aggiungere analytics, reinizializzare slider o applicare comportamenti specifici per il touch senza modificare direttamente i file del modulo.
Il CSS personalizzato viene salvato in views/css/pv_custom.css e il JavaScript personalizzato in views/js/pv_custom.js all'interno della cartella del modulo. Entrambi i file vengono caricati solo nelle pagine dove il modulo è attivo e solo quando contengono contenuto.
Configurazione
Vai su Moduli > Gestione moduli > Product Video > Configura, quindi naviga nella scheda CSS / JS personalizzato.
CSS personalizzato
| Campo | Predefinito | Descrizione |
|---|---|---|
| Inserisci CSS personalizzato qui | (vuoto) | Regole CSS caricate dopo il foglio di stile predefinito del modulo. Scrivi CSS standard puntando alle classi degli elementi del modulo. Non servono tag <style>. |
JavaScript globale
| Campo | Predefinito | Descrizione |
|---|---|---|
| JavaScript globale | (vuoto) | JavaScript che viene eseguito in ogni pagina dove il modulo è attivo. Scrivi codice puro — nessun tag <script>. jQuery ($) e tutte le variabili globali front-office di PrestaShop sono disponibili. |
JavaScript per dispositivi mobili
| Campo | Valori | Predefinito | Descrizione |
|---|---|---|---|
| JavaScript per dispositivi mobili | Qualsiasi JS | (vuoto) | JavaScript che viene eseguito solo quando il visitatore usa un dispositivo mobile o quando la larghezza del viewport è uguale o inferiore al valore di Breakpoint mobile. |
| Breakpoint mobile (px) | Intero | 768 | Soglia di larghezza del viewport in pixel. Quando la finestra del browser è larga quanto questo valore o meno, il JavaScript per dispositivi mobili si attiva — anche su un browser desktop. Il callback mobile si attiva anche quando la pagina viene ridimensionata attraverso questa soglia. |
Valori comuni per il breakpoint: 480 (mobile), 768 (tablet), 992 (desktop piccolo), 1200 (desktop).
Callback avanzati
Questi callback sono funzioni JavaScript con nome che il modulo chiama in momenti specifici del ciclo di vita. Devi scrivere solo il corpo della funzione — il modulo gestisce la chiamata al momento giusto.
| Campo callback | Firma della funzione | Quando si attiva | Variabili disponibili |
|---|---|---|---|
| JS: Dopo inserimento miniature | afterVideoInsert() | Immediatamente dopo che le miniature video vengono inserite nel DOM, incluso dopo cambi di combinazione e aggiornamenti AJAX | — |
| JS: Gestore clic miniatura | afterVideoClick(is_video, e) | Quando si fa clic su qualsiasi miniatura del prodotto | is_video (booleano — true per miniature video, false per miniature immagine), e (l'oggetto evento jQuery del clic) |
Il callback Dopo inserimento miniature può attivarsi più di una volta per caricamento pagina (ad esempio, dopo un cambio di combinazione prodotto). Scrivi codice che sia sicuro da eseguire più volte.
Puoi chiamare
e.preventDefault()oe.stopPropagation()all'interno del Gestore clic miniatura se necessario, anche se ciò potrebbe impedire il comportamento predefinito di apertura video del modulo.
Come funziona
Caricamento CSS
Quando un visitatore carica una pagina prodotto (o qualsiasi pagina dove il modulo è attivo), il modulo verifica se views/css/pv_custom.css contiene del contenuto. In caso affermativo, viene aggiunto alla pagina come foglio di stile separato posizionato dopo il CSS predefinito del modulo. Questo ordine garantisce che le tue regole personalizzate sovrascrivano quelle predefinite del modulo senza bisogno di !important.
Caricamento JavaScript
Tutto il JS personalizzato — codice globale, codice mobile e callback — viene compilato in un unico file, views/js/pv_custom.js, al salvataggio della configurazione. Il modulo carica questo file dopo i propri script, quindi il tuo codice può fare riferimento in sicurezza a qualsiasi variabile o funzione già definita dal modulo.
Internamente il file usa separatori di commento (/* ---------- */) per delimitare ogni sezione. Il Back Office legge questi delimitatori per popolare correttamente ogni area di testo alla riapertura della configurazione.
Temporizzazione del callback mobile
Il callback mobile si attiva in due condizioni: il server rileva uno user-agent mobile (variabile is_mobile), oppure la larghezza del viewport del visitatore è uguale o inferiore al valore di Breakpoint mobile. Il controllo viene eseguito al caricamento della pagina e ad ogni ridimensionamento del browser, con un debounce di 250 ms. Il callback si attiva solo quando lo stato passa da non-mobile a mobile, non ad ogni evento di ridimensionamento.
Callback Dopo inserimento miniature
La funzione afterVideoInsert viene chiamata all'interno della routine insertThumbnails del modulo, direttamente dopo che le miniature sono state aggiunte al DOM. Questo è il momento ideale per reinizializzare uno slider, allegare gestori di eventi personalizzati o applicare stili che dipendono dalla presenza delle miniature.
Gestore clic miniatura
La funzione afterVideoClick viene chiamata ad ogni clic su una miniatura, con is_video impostato a true per le miniature video e false per le miniature immagine (non video). L'argomento e è l'oggetto evento jQuery grezzo del gestore clic.
Esempi di utilizzo
Esempio: Personalizzare l'overlay del badge video
Si desidera che le miniature video mostrino un'icona play bianca invece del colore predefinito:
.pv-badge-icon {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.55);
}
Incolla questo in Inserisci CSS personalizzato qui e salva.
Esempio: Inviare un evento Google Analytics 4 quando si fa clic su una miniatura video
Nel campo JS: Gestore clic miniatura, inserisci:
if (is_video) {
gtag('event', 'video_thumbnail_click', {
event_category: 'Product Video',
event_label: window.location.pathname
});
}
Il callback riceve is_video come booleano, quindi l'evento viene inviato solo per i clic effettivi sui video.
Esempio: Reinizializzare uno slider Slick dopo l'inserimento delle miniature
Se il tuo tema usa uno slider Slick per la galleria immagini e i video vengono iniettati in modo asincrono, lo slider potrebbe non includerli. Nel campo JS: Dopo inserimento miniature, inserisci:
if ($.fn.slick && $('.product-images').hasClass('slick-initialized')) {
$('.product-images').slick('reinit');
}
Questo verifica in sicurezza che Slick sia presente e già inizializzato prima di chiamare reinit.
Esempio: Adattare la larghezza del video solo su schermi ridotti
Nel campo JavaScript per dispositivi mobili, con Breakpoint mobile impostato a 640:
$('.pv-video-wrapper').css('max-width', '100%');
Questo viene eseguito solo quando il viewport del visitatore è largo 640 px o meno.
Note importanti
- Sono necessari permessi di scrittura sui file. Il modulo scrive direttamente su
views/css/pv_custom.csseviews/js/pv_custom.jsall'interno della propria cartella. Se il server web non può scrivere su quei file, viene mostrato un errore nel Back Office dopo il salvataggio. Verifica che la cartella del modulo sia scrivibile dall'utente del server web. - Svuota la cache di PrestaShop dopo il salvataggio se le modifiche non compaiono immediatamente sul front-office. Vai su Parametri avanzati > Prestazioni e clicca su Svuota la cache.
- Il Breakpoint mobile controlla solo il callback mobile, non il layout CSS responsive del modulo. La modifica di questo valore non influenza quando si attivano le media query integrate del modulo.
- Nessun tag
<script>o<style>. Scrivi solo codice puro in tutte le aree di testo. Il modulo racchiude e carica il tuo codice correttamente. - I file CSS e JS sono inclusi nel backup/ripristino della configurazione. Quando usi la funzione Backup configurazione / Carica configurazione del modulo, il tuo CSS e JS personalizzati vengono salvati e ripristinati insieme a tutte le altre impostazioni.
- Multi-shop: I file CSS e JS personalizzati sono salvati su disco all'interno della cartella del modulo, che è condivisa tra tutti i negozi. Se gestisci più negozi, tutti i negozi caricano lo stesso CSS e JS personalizzati. Non esiste un override per singolo negozio per questa funzionalità.
Risoluzione dei problemi
| Problema | Soluzione |
|---|---|
| Il CSS personalizzato non è visibile sul front-office | Svuota la cache di PrestaShop in Parametri avanzati > Prestazioni > Svuota la cache. Verifica anche che non ci siano errori di sintassi CSS — una regola non chiusa può invalidare silenziosamente tutto ciò che segue. |
| Il salvataggio fallisce con un errore di scrittura file | L'utente del server web non ha accesso in scrittura a views/css/ o views/js/ all'interno della cartella del modulo. Correggi i permessi della cartella (tipicamente 755 per le directory, 644 per i file, di proprietà dell'utente del server web). |
| Il JS mobile si attiva su uno schermo desktop | La finestra del browser desktop è più stretta del valore del Breakpoint mobile. Allarga la finestra del browser o abbassa il breakpoint. Ricorda che il controllo viene eseguito anche al ridimensionamento. |
| Il callback Dopo inserimento miniature causa un errore JS alla seconda esecuzione | Il callback si attiva ogni volta che le miniature vengono inserite, incluso dopo i cambi di combinazione. Proteggi il tuo codice dall'esecuzione doppia — ad esempio, verifica if ($('.my-element').length === 0) prima di creare elementi. |
| Il callback Gestore clic miniatura non si attiva | Il callback è collegato solo alle miniature gestite da questo modulo, all'interno della posizione di visualizzazione Galleria immagini. Verifica che il Posizionamento galleria immagini sia attivo e che le miniature video vengano visualizzate nella pagina prodotto. |
| Il JS personalizzato è stato salvato ma la vecchia versione continua a essere eseguita | Il browser potrebbe servire una versione in cache di pv_custom.js. Esegui un ricaricamento forzato (Ctrl+Shift+R / Cmd+Shift+R) e svuota anche la cache di PrestaShop. |
Domande frequenti
Devo includere i tag <script> o <style> nelle aree di testo?
No. Scrivi solo codice CSS o JavaScript puro. Il modulo racchiude e carica ogni blocco nel tipo di file corretto automaticamente.
Il mio CSS personalizzato sovrascriverà gli stili predefiniti del modulo?
Sì. Il file CSS personalizzato viene caricato dopo il foglio di stile predefinito del modulo, quindi le tue regole hanno la priorità senza bisogno di !important nella maggior parte dei casi.
Il callback mobile si attiva per i dispositivi mobili reali o solo in base alla larghezza dello schermo?
Entrambi. Si attiva se il server rileva uno user-agent mobile, oppure se la larghezza del viewport del visitatore è uguale o inferiore al valore del Breakpoint mobile — whichever è vero. Su desktop, il ridimensionamento della finestra del browser al di sotto del breakpoint lo attiva ugualmente.
Posso usare il callback afterVideoClick per impedire l'apertura del video?
Sì. Chiama e.preventDefault() o e.stopPropagation() all'interno del corpo del callback. Tieni presente che ciò impedirà anche il comportamento predefinito di apertura video del modulo per i clic interessati.
Cosa succede al mio codice personalizzato quando aggiorno il modulo?
I file CSS e JS personalizzati (pv_custom.css e pv_custom.js) sono archiviati separatamente dai file core del modulo e non vengono sovrascritti durante un aggiornamento del modulo. Il tuo codice personalizzato viene preservato.
Il JS personalizzato è disponibile sia per i temi PS 1.6 che PS 1.7+?
Sì. Il modulo carica pv_custom.js tramite il meccanismo standard di PrestaShop addJS(), che funziona su tutte le versioni supportate (PrestaShop 1.6, 1.7, 8 e Thirty Bees).
Posso puntare a elementi esterni al modulo nel mio CSS personalizzato?
Sì. Il file CSS è un foglio di stile globale nella pagina, quindi puoi puntare a qualsiasi elemento visibile sul front-office. Tuttavia, puntare a elementi esterni al modulo potrebbe entrare in conflitto con gli stili del tuo tema o con altri moduli.
Funzionalità correlate
- Compatibilità con il tema — Selettori CSS e impostazioni di adattamento strutturale per abbinare il layout del tuo tema
- Integrazione slider — Usa il callback Dopo inserimento miniature per reinizializzare lo slider immagini del tema dopo l'iniezione dei video