Guida PrestaShop, tutorial 4: un tema per il nostro sito

In questa lezione impareremo come installare un nuovo tema ecambiare l'aspetto visivo del nostro sito. La chiave del successo risiede in una grafica accattivante, ma allo stesso semplice da utilizzare. E per i più esperti, ecco qualche accenno alla struttura dei temi!

Siamo giunti al quarto appuntamento della guida dedicata a PrestaShop. Nella puntate precedenti abbiamo iniziato a conoscere questo fantastico CMS che ci consentirà di intraprendere, nel breve periodo e senza alcuno sforzo, un’attività di vendita online. Dopo aver effettuato l’installazione e la configurazione di base, siamo, quindi, pronti per allestire il portale di e-commerce.                                                       

In questo tutorial ci occuperemo della personalizzazione grafica del sito. L’impatto visuale è di fondamentale importanza ed incide notevolmente sul successo ottenuto dal portale. Per intuirne la rilevanza basti pensare ad un qualsiasi negozio fisico: se il locale commerciale si presenta curato, pulito e soprattutto ordinato, il cliente riuscirà a trovare con semplicità il prodotto di cui ha bisogno e sarà invogliato nell’acquisto. Al contrario, qualora il negozio si presenti disordinato e confusionario, il cliente, disorientato, tenderà a rivolgersi presso un altro esercizio, seppur i prezzi siano molto competitivi.  Il portale, dunque, seguendo lo stesso concetto del negozio fisico, deve essere dotato di una grafica accattivante, ma allo stesso tempo ordinata e semplice da utilizzare.  Gli utenti avvezzi agli acquisti online, nella maggior parte dei casi hanno già idea del prodotto da comperare: la struttura del sito deve, quindi, essere tale da consentire al cliente di rintracciare il prodotto in pochi clic e concludere l’acquisto nel minor numero possibile di passaggi. Siti molto complessi dal punto di vista grafico, seppur “belli da vedere”, rischiano di appesantire il portale, rallentare il processo di acquisto e conseguentemente allontanare i possibili acquirenti.

Un consiglio che sentiamo di darvi è quello di orientarvi sui temi si ultima generazione, ossia sui temi cosiddetti responsive. Si tratta di template grafici che sono facilmente visualizzabili e usabili anche da chi si collega con un dispositivo mobile, tipo smartphone o tablet. Si consideri, infatti, che la percentuale di coloro che effettuano acquisti da questa tipologia di dispositivi è in costante crescita e si prevede che nel breve periodo di tempo gli acquisiti da smartphone superino gli acquisti condotti dal computer.

Nella Rete sono disponibili tantissimi temi per PrestaShop, tutti pronti all’uso. Chiunque non sia un esperto programmatore e non abbia alcuna idea di come si realizzi un tema a partire dai linguaggi di programmazione, può scaricare un template e installarlo sul proprio portale direttamente dal pannello di amministrazione. Purtroppo i temi gratuiti disponibili per PrestaShop sono davvero pochi. In compenso la maggior parte dei temi a pagamento sono davvero ben fatti e la cifra richiesta è comunque piuttosto contenuta (un buon tema lo si può comprare con un budget che varia dalle 40 alle 90 euro).

Sul sito PrestaShop Addons, nella sezione Temi PrestaShop, sono disponibili tantissimi temi suddivisi per categorie. Dalla barra laterale sinistra è possibile utilizzare dei filtri per individuare immediatamente la tipologia di template che stiamo ricercando: possiamo indicare la categoria di attività, il colore predominante che dovrà avere il sito, la compatibilità con la versione che stiamo utilizzando di PrestaShop e il budget a disposizione.

 Temi PrestaShop

Individuato il tema che pensiamo possa rappresentare al meglio, dal punto di vista grafico, la nostra attività, procediamo con l’eventuale acquisto e con il download della cartella zip che lo contiene.

A questo punto siamo pronti per procedere con l’installazione del tema.

Installazione del tema

Dopo aver scelto il tema che rappresenti al meglio la nostra attività commerciale, possiamo procedere con la sua installazione. Prima, però, è bene specificare che PrestaShop, così come altri CMS, è una piattaforma strutturata in moduli. Questi elementi sono delle strutture basilari che consentono al software di svolgere determinate funzioni. Esistono tantissimi moduli disponibili sia gratuitamente, sia a pagamento. Durante l’installazione del CMS sono stati caricati tutti i moduli di default, che riguardano le funzionalità principali del sistema: gestione del menu, gestione dei temi, gestione dei prodotti, delle categorie e così via. Nelle prossime lezioni approfondiremo l’argomento, imparando come scaricare e installare nuovi moduli.

Ritornando all’installazione del tema, PrestaShop mette a disposizione un modulo che consente in soli due clic la variazione del template grafico del nostro portale. Accediamo al pannello di controllo e dalla sezione Moduli facciamo clic su Moduli. Portiamoci nella casella di testo Cerca posizionata in alto a sinistra e iniziamo ad inserire il testo Import/Export di un tema. Si aprirà proprio sotto un menu a tendina: quando visualizzeremo il blocco corrispondente clicchiamoci sopra.

 PrestaShop ricerca modulo 

Nella pagina centrale comparirà il modulo richiesto. Facciamo clic su Configura per accedere alle impostazioni.

PrestaShop configurazione tema

Per installare il tema che abbiamo scaricato sul nostro PC dobbiamo portarci nella sezione Importa dal computer. Clicchiamo su Scegli file e dalla finestra che si apre raggiungiamo la cartella zip del tema. Clic su Apri. A questo punto basterà cliccare su Successivo per avviare l’installazione del tema. 

PrestaShop import tema

Se tutto andrà a buon fine, vedremo comparire una schermata verde che ci informerà sulla correttezza dei processi di installazione. Al contrario, qualora dovesse comparire una schermata rossa, soffermiamoci a leggere attentamente l’errore restituito, per poter procedere con l’eventuale correzione. Nella maggior parte dei casi potrebbe verificarsi che il tema prescelto non sia compatibile con la versione di PrestaShop installata: per tale motivo è sempre bene verificare prima dell’acquisto la compatibilità. Qualora siamo sicuri della correttezza di quest’ultimo aspetto, ma permangono degli errori, potremo seguire la procedura alternativa che andiamo a spiegare nella pagina successiva.

Una via alternativa

Esiste una via alternativa che consente di installare il tema senza utilizzare il modulo Import/Export di un tema. Questa opzione potrebbe essere sfruttata da chi, per esempio, durante la fase di installazione ha registrato degli errori, ma è certo della compatibilità del template con la propria versione di PrestaShop.

L’alternativa consiste nel caricare i file contenuti nella cartella zip del tema, direttamente sul server remoto. Abbiamo quindi bisogno di avviare FileZilla per accedere allo spazio Web FTP (giunti a questa lezione sappiamo certamente come utilizzare questo software. Chiunque avesse ancora qualche problema può dare uno sguardo a questa pagina).

Estraiamo i file contenuti nello zip in una nuova cartella. In FileZilla, dal quadrante Sito locale, portiamoci nel percorso contentente il tema decompresso. Dal quadrante Sito remoto portiamoci all’interno della cartella themes. A questo punto operiamo un drag&drop della cartella contenetente il tema dal sito locale al sito remoto.

PrestaShop caricamento tema

Terminata la procedura di caricamento dei file, dobbiamo verificare che il tema sia disponibile e funzionante per il nostro portale.

Impostazioni principali

Nelle precedenti pagine abbiamo visto due differenti modi di installare il template. A questo punto non ci resta che settare il tema prescelto come tema di default, sostituendo di fatto il tema gratuito messo a disposizione da PrestaShop durante l’installazione.

Dal menu principale del back office portiamoci in Preferenze e facciamo clic su Temi. Accederemo in tal modo all’omonima pagina, dalla quale possiamo gestire le impostazioni grafiche principali del portale. La prima tabella in alto elenca tutti i temi installati. In corrispondenza di ogni riga, cliccando sulla icona di Modifica è possibile accedere alla schermata dove variare il nome o la directory del template.

PrestaShop nome tema

In basso alla tabella è presente la sezione Aspetto tema. Da Seleziona il tema per il negozio MioSito è possibile scegliere il tema predefinito per il portale, semplicemente selezionandolo.

PrestaShop scelta tema

Poco più sotto, nella sezione Aspetto, è possibile caricare il le immagini riguardanti il Logo dell’intestazione, il Logo intestazione per dispositivi mobili, il Logo che comparirà nelle email, il Logo che comparirà nelle fatture e la g (ossia l’icona che viene visualizzata sul lato sinistro dell’Url che compare nel browser, o sull’intestazione della pagina Web). Sempre nella stessa sezione è possibile impostare il carattere di separazione (utilizzato per il percorso di navigazione categorie/prodotto),scegliere se attivare il tema anche per i dispositivi mobile e scegliere il colore che verrà utilizzato nel template delle email che verranno inviate agli utenti del sistema.  

Settati tutti i parametri non resta che cliccare su Salva in alto a destra della pagina. Il nostro portale di e-commerce ha adesso assunto un altro aspetto: per rendersene conto basterà accedere al front office digitando l’indirizzo Web del sito o cliccando su Visualizza il mio negozio, ultima opzione in alto alla pagina a destra.

Struttura del tema

Chiunque volesse apportare ulteriori modifiche dovrà addentrarsi all’interno delle cartelle e dei file del tema e mettere mano alla programmazione. Per gli utenti mediamente esperti diciamo che la struttura del tema non è per nulla complicata. Al contrario, si tratta di una delle strutture più facili e funzionali che si possa avere per la gestione dei temi grafici.

Per studiarne la struttura, basterà portarsi nella cartella themes presente sul server remoto. Ogni sua sottocartella rappresenta un nuovo tema grafico. Nel nostro caso troveremo due cartelle: la prima nominata default, che contiene la grafica iniziale messa a disposizione da PrestaShop, la seconda prende lo stesso nome del tema che abbiamo scelto di installare nelle pagine precedenti. Aprendo questa seconda cartella noteremo immediatamente la presenza di un file index.php, di una serie di file .tpl e di cartelle del tipo cache, css, js, moduli, ect.

Il linguaggio utilizzato da PrestaShop per la gestione della grafica è di tipo Smarty. Si tratta di un motore per template (scritto in PHP), che consente di dividere la programmazione in PHP alla base del motore del sito (business logic), dall’aspetto grafico del portale (presentation logic) e quindi dal codice HTML. Tutto ciò è reso possibile tramite l’utilizzo di Smarty tag che, posizionati all’interno del documento, racchiudono delle funzioni oppure delle variabili.

Sulla base di questa struttura, il file index.php e i file .tpl, ossia i file che contengono il codice HTML, interagiscono tra di loro. In particolare, se apriamo il file index.php (anche con il semplice Blocco note), notiamo che all’interno di esso vengono richiamati i file come header.php che a sua volta richiama il header.tpl, e il file footer.php che a sua volta richiama il file footer.tpl.

All’interno dei file .tpl sono contenuti i famosi HOOK di PrestaShop. Si tratta di veri e propri ganci che posizionati all’interno del codice, hanno la funzione di agganciare i moduli che vengono inseriti all’interno della pagina Web. Impareremo nelle prossime lezioni che, quando inseriamo un modulo dal back office, dovremo indicare la posizione in cui questo dovrà comparire. Ad esempio, se decidiamo di inserire il modulo del carrello sul lato destro della pagina nel file tpl comparirà la voce {$HOOK_RIGHT_COLUMN}. I ganci devono essere dichiarati all’interno dei file php contenuti nella cartella principale del tema.

Analizzato il tema grafico del sito, nella prossima lezione ci dedicheremo alla stesura dei contenuti. Vedremo, quindi, come popolare le pagine principali del sito: home page, chi siamo, dove siamo, contatti ed altro. Continuate a seguirci!