Tema figlio in PrestaShop: personalizzare il design senza perdere le modifiche con gli aggiornamenti

È la storia di molti negozi: qualcuno ha cambiato il colore dei pulsanti, ha spostato un blocco della scheda prodotto e ha ritoccato il template del carrello, tutto direttamente nei file del tema. Ha funzionato per anni. Finché è uscita una nuova versione del tema con correzioni importanti, è stata aggiornata e tutte quelle modifiche sono sparite. Oppure, peggio, nessuno ha osato aggiornare e il tema è rimasto bloccato su una versione che non si adatta più al core.

Il tema figlio esiste proprio per evitare questo.

Cos'è un tema figlio

È un tema che dichiara un altro tema come padre e che contiene solo i file che vuoi cambiare. Quando PrestaShop ha bisogno di un template, lo cerca prima nel tema figlio; se non lo trova, usa quello del padre. Il risultato è che nel figlio hai unicamente le tue personalizzazioni, separate dal codice del produttore del tema.

Da PrestaShop 1.7 il meccanismo è nel core e si dichiara nel file di configurazione del tema, config/theme.yml, indicando il nome del tema padre. I temi di serie (Classic e, in PrestaShop 9, Hummingbird) si possono usare come padre, così come la maggior parte dei temi commerciali, anche se conviene verificarlo con il loro autore.

Cosa va nel tema figlio

Fogli di stile e script propri

Il tuo CSS e il tuo JavaScript vanno in file propri del tema figlio. Puoi scegliere se il figlio carica anche i file del padre (la norma, per ereditare tutto il design e aggiungere solo sopra) o se li sostituisce. Scrivere i tuoi stili in un file a parte, caricato dopo quelli del padre, è il modo più pulito per cambiare colori, margini o caratteri senza toccare nulla del produttore.

Template che cambi davvero

Se devi modificare la struttura di una pagina, copi nel figlio solo quel template, nello stesso percorso relativo che ha nel padre, e lo modifichi lì. Per esempio, la scheda prodotto o un blocco specifico del carrello. Tutti gli altri continuano ad arrivare dal padre.

Ancora meglio: molti template di PrestaShop sono organizzati in blocchi Smarty. Un template del figlio può estendere quello del padre e ridefinire solo un blocco, invece di copiarlo per intero. Così, se il produttore corregge qualcosa in un'altra parte di quel template, la correzione ti arriva.

Template dei moduli

I moduli fatti bene permettono al tema di sovrascrivere i loro template. Si collocano nella cartella modules/ del tema, con il nome del modulo e lo stesso percorso che il template ha all'interno del modulo. Funziona allo stesso modo in un tema figlio: personalizzi l'aspetto di un modulo senza toccare il modulo, e quando il modulo si aggiorna, il tuo template resta al suo posto.

Cosa non va nel tema figlio

• Modifiche alla logica. Il tema è presentazione. Se ti serve che qualcosa funzioni in un altro modo, quello è un modulo, non un template con condizioni complicate.
• Override di classi del core. Vivono in un'altra cartella e hanno i loro rischi durante gli aggiornamenti. Il fatto che una modifica sia nel tema figlio non la protegge se in realtà dipende da un override.
• Copie complete del tema padre. Se copi tutti i template nel figlio «per sicurezza», il padre non serve più a nulla: nessuna correzione ti arriva e torni al problema iniziale.

Come aggiornare il tema padre

Con il tema figlio, aggiornare il padre è una procedura prevedibile:

1. Su una copia del negozio, sostituisci il tema padre con la nuova versione.
2. Fai l'elenco dei template presenti nel figlio e, per ciascuno, confronta la vecchia versione del padre con la nuova. Se il produttore ha cambiato quel template, devi riportare le sue modifiche nella tua copia del figlio o verificare se il tuo blocco ridefinito si adatta ancora.
3. Controlla il tuo CSS: se il padre ha cambiato nomi di classi o la struttura dell'HTML, alcuni dei tuoi stili non si applicheranno più.
4. Svuota la cache dei template e dei file combinati, e scorri le pagine principali: home page, categoria, scheda, carrello, checkout e account cliente.
5. Prova un ordine completo. I template del checkout sono quelli che cambiano di più e quelli che fanno più danni se si guastano.

Se tieni un controllo di versione del tuo tema figlio (anche solo salvare una copia datata prima di ogni modifica), questo processo è molto più rapido: sai cosa hai cambiato tu e quando.

Se hai già modificato il tema direttamente

È la situazione più comune, e ha rimedio:

1. Procurati il pacchetto originale della stessa versione del tema che hai installato.
2. Confronta file per file il tuo tema con l'originale. Le differenze sono le tue personalizzazioni (e, a volte, cose che nessuno ricorda di aver fatto).
3. Crea un tema figlio con l'originale come padre e porta lì solo quelle differenze: il CSS nel suo file, i template modificati nel loro percorso.
4. Attiva il tema figlio su una copia e confronta pagina per pagina con il negozio attuale.

Da lì in poi, puoi aggiornare il padre con la procedura precedente. È il modo per recuperare la possibilità di tenere aggiornato il tema, che fa parte del tenere aggiornato l'intero negozio: un tema bloccato finisce per impedire l'aggiornamento del core.

Errori comuni

• Attivare il figlio e perdere la configurazione grafica del tema (moduli agganciati agli hook, posizioni). Cambiando tema, PrestaShop può applicare la configurazione dichiarata dal nuovo tema; controlla le posizioni dei moduli dopo averlo attivato.
• Dimenticare le immagini e i font che il CSS del figlio richiama con percorsi relativi al padre.
• Modificare il CSS combinato o in cache invece del file sorgente. Si perde non appena viene rigenerato.
• Personalizzare dal back office del produttore e dai file allo stesso tempo, senza sapere quale prevale.

Come risolverlo in PrestaShop

RKR Editor CSS/JS de themes ti permette di modificare dal back office il CSS e il JS del tuo tema, compresi i temi figlio, senza FTP: apre custom.css e custom.js con un clic (e li crea se il tuo tema non li ha), cerca in tutti i file del tema indicando la riga, fa una copia prima di ogni salvataggio per tornare indietro da un menu a tendina e rifiuta di salvare se qualcuno ha cambiato il file su disco da quando l'hai aperto. Lavora solo con CSS, JS, SCSS e LESS all'interno della cartella del tema, e la modifica dei template .tpl è disattivata e riservata al SuperAdmin. Se ti serve creare il tema figlio, separare personalizzazioni fatte sul tema originale o aggiornare il padre, con un pacchetto di ore di assistenza di Rekire lo facciamo su una copia del tuo negozio.