Struttura template PrestaShop 1.7

Ciò di cui parleremo oggi è una guida sui template PrestaShop 1.7, guida che con il tempo si cercherà di tenere sempre aggiornata.

Cos’è PrestaShop?

PrestaShop è un CMS (Content Management System) per lo sviluppo di e-commerce. Risulta tra i più utilizzati al mondo e si ritrova in quarta posizione, dopo i classici WooCommerce, Shopify e Magento!

Negli ultimi anni sta scalando la classifica, ed è in lotta in primis con Magento e Shopify per giocarsi la seconda posizione in classifica.

Vi riporto un grafico della classifica aggiornato ad oggi 10 maggio 2017.

Grafico classifica e-commerce

Differenze principali dei template tra PrestaShop 1.6 e 1.7?

Le differenze di per se visive sono la revisione completa del Back Office, infatti sia graficamente che come organizzazione è stato completamente smantellato e rivisto il Back Office per l’appunto.

Lato sviluppatori invece è completamente diverso, infatti ora si basa su Symfony come struttura, e quindi vi è una organizzazione diversa anche delle cartelle e dei file. Per facilitare il tutto è sempre presente un’installazione da browser, ma per i più coraggiosi è possibile un’installazione da console.

Come già detto il nuovo PrestaShop presenta una struttura completamente diversa, quindi anche il tema avrà un proprio schema che solo a pochi tratti ricorderà quello delle versioni precedenti.

Se ti interessa invece lavorare sulla precedente versione, scopri come Creare siti e-commerce professionali con Prestashop 1.6.

Se sei uno sviluppatore, e hai voglia di iniziare a sviluppare con PrestaShop devi possedere il miglior manuale di sviluppo (in inglese). PrestaShop Module Development.

In questa guida entreremo nel dettaglio per quanto possibile.

Path Theme Config

Vi sono alcuni file fondamentali che vi elenchiamo di seguito:

Theme.yml (contiene tutte le configurazioni del tema ed è suddiviso in blocchi)

Blocchi file:

  • settaggi globali
  • informazioni tema
  • informazioni meta
  • definizione dei layout
  • gestione degli assets

Ora vedremo nel dettaglio le specifiche dei vari blocchi.

PrestaShop 1.7 Info Theme

Informazioni del tema:

  • name deve contenere il nome, che è lo stesso nome della cartella in cui sarà contenuto il tema
  • display_name il nome visualizzato nel Back Office
  • version la versione attuale del nostro tema
  • author le informazioni dell’autore (suddivise in altri blocchi come name, email, url)

 

Definizione dei layout (i settaggi della struttura del tema):

theme_settings che conterrà vari blocchi sotto di esso:

  • default_layout il nome del layout di base, che sarà attivo quando non specificato
  • layouts anche qui varie sotto-blocchi dove bisogna elencare per ogni pagina quale layout usare

 

Informazioni sui meta:

Conterrà per ogni layout le informazioni di esso, come il nome pubblico e la descrizione.

 

Gestione degli assets:

Gli assets sono tutti i file css (fogli di stile, per la presentazione della parte grafica) e i file javascript. Inseriti rispettivamente nelle cartelle assets/js (per i javascript) e assets/css (per i fogli di stile).

Si può assegnare ad ognuno una priorità di caricamento che va da 0 a 100, la posizione del codice se nell’header o nel footer, se scrivibile inline e il tipo di media.

Di base nella cartella principale del tema si ritroveranno due file già precompilati, che sono theme.css e theme.js .

 

Settaggi Globali (global settings):

Contiene la configurazione di base del tema, la gestione (installazione e disinstallazione) dei moduli utilizzati e la definizione dei relativi hook, la grandezza delle immagini (varie dimensioni utilizzabili poi sul tema).

 

Dopo aver parlato di alcuni file principali e obbligatori per un tema, parleremo anche della struttura delle cartelle, delle estensioni (extend) di tema e delle inclusioni (include), ma prima un elenco delle cartelle di base sono riportate nell’immagine di seguito:

Struttura Cartelle PrestaShop 1.7

Click per ingrandire

Ma parliamo un po’ di queste cartelle:

  • assets (come anticipato prima contiene fogli di stile, javascript e immagini)
  • config (contiene i file di configurazione)
  • _dev (contiene tutti i file e gli assets della fase di sviluppo non unificati*)
  • modules (qui saranno presenti gli override dei template dei moduli)
  • plugins (contiene le estensioni aggiuntive per smarty)
  • templates (qui saranno presenti tutti i template del tema suddivisi per ulteriori cartelle)
  • preview.png (l’anteprima nel back office del tema, un’immagine unica che lo rappresenti, obbligatori anch’essa)

* in fase di sviluppo tutti i file rimarranno separati, una volta in produzione verranno tutti riuniti in un unico file che verrà a sua volta minificato.

Smarty

E ora qualche parola per smarty, template engine già utilizzato anche nelle vecchie versioni di PrestaShop, ma lievemente modificato per la versione aggiornata.

Sarà possibile creare dei blocchi di codice, per poter lavorare in maniera più semplice, soprattutto per file di grosse dimensioni. Grazie ai blocchi sarà possibile avere una gestione semplificata e migliore dei template.

 

Cosa non presente nelle versioni precedenti è la possibilità di estendere i temi, o includervi facilmente altri template.

Per estender un template di base basterà richiamarlo all’inizio in questo modo:

{extend file=$layout}
RESTO DEL CODICE

Altrettanto facile è includere template dentro altri template, nel seguente modo:

{block name='<name>'}
{include file='<name>'}
{/block}

 

Ora un pò più nel dettaglio per lo sviluppo

Con l’avvento di PrestaShop 1.7 è stato modificato anche il processo di sviluppo di un tema, bisogna infatti seguire vari passaggi, per andare dalla fase di sviluppo a quella di produzione.

In primis bisogna decidere come vogliamo che sia impostato il nostro layout, e qui dobbiamo decidere una versione di base, più altre eventuali versioni.

Si parlerà quindi di full layout (tutta pagina), layout con sidebar a sinistra, a destra o entrambe le posizioni e così via.

Uno dei file sempre obbligatori del template è quello della homepage, il page.tpl che sarà impostato nel Back Office.

Per chi non volesse iniziare un tema completamente da zero, PrestaShop fornisce uno pacchetto iniziale, lo starter theme. Per la gestione dei css verrà utilizzato Stylus.

Stylus di per se è un css dinamico, che lavora con variabili ed ereditarietà. Per maggiori info vi riportiamo al sito ufficiale.

npm

Per la compilazione verrà utilizzato npm (un package manager per javascript). I comandi base di npm sono:

  • watch (compila i file stylus in tempo reale)
  • build (compila i file stylus e li minimizza in un unico file presente in assets/css)
  • build-watch (che è un mix dei precedenti due comandi)

 

Spero di essere stato abbastanza esaustivo in questo prima guida di PrestaShop su InsiDevCode, cercherò di aggiornare la guida per renderla il più completo possibile. Non resta quindi che rimanere sintonizzati, e se avete domande contattateci pure in privato o con un commento qui sotto.

Se hai invece bisogno di supporto contattaci e scarica la guida gratuita su Come installare PrestaShop in 7 semplici passaggi. Comprensiva di molti Bonus unici!

 

Fonte immagine copertina: PrestaShop News

 

Seguiteci anche su Facebook, Google Plus, Tumblr, Twitter e Telegram, per restare sempre in contatto con noi e con le nostre guide.



Cerca

Seguici

Live da Facebook
Live da Twitter
Seguici su Telegram
Canale InsiDevCode Telegram