L'aspetto del front-end dell'ecommerce PrestaShop, chiamato comunemente template, può esser variato direttamente dall'interfaccia di PrestaShop senza dover intervenire sul codice.
Modificare un template o cambiarlo?
In base alle reali necessità a volte più che pensare di modificare un template esistente può esser più conveniente pensare di cambiare tutto il template.
PrestaShop offre la possibilità di cambiare il template in maniera rapida, ovviamente con le dovute precauzioni, acquistando un template sul
o direttamente presso aziende specializzate nella realizzazione di template.
Riassumendo, PrestaShop offre la possibilità di:
- Cambiare il template base con un altro template acquistato o realizzato ad hoc.
- Aggiungere funzionalità al template esistente grazie a moduli aggiuntivi che verranno visualizzate all'interno del nostro template
- Apportare delle modifiche al template esistente lavorando sul codice sorgente del template
Cambiare template su PrestaShop
Cambiare template è un operazione relativamente semplice che può esser effettuata dal backend del sito.
Bisogna però considerare che molti template di PrestaShop che vengono acquistati spesso presentano degli errori o delle limitazioni, quindi consigliamo di valutare bene l'acquisto prima di effettuarlo o farvi seguire da una web agency specializzata in ecommerce che saprà analizzare le caratteristiche del template.
Per cambiare il template accedete al backend di Prestashop e andate su Impostazioni > Temi
All'interno di questa sezione avrete la possibilità di:
- Visualizzare il tema corrente e le relative opzioni.
- Attivare un tema tra quelli attualemente installati.
- Installare un nuovo tema che abbiamo realizzato o acquistato.
- Duplicare un tema tra quelli installati, per poi procedere ad effettuare delle modifiche al tema copiato
Aggiungere funzionalità al template
Questo può esser fatto attravarso l'utilizzo di moduli che permettono di inserire contenuti e funzionalità aggiuntive.
La gestione dei moduli su Prestashop avviene nella voce di menù "Moduli e Servizi > Moduli e Servizi";
in questa sezione troviamo tutti i moduli prenseti nella nostra installazione di Prestashop e quelli che possono esser attivati o acquistati.
Il funzionamento è semplice: I template di PrestaShop lavorarno usando il concetto di "posizioni", chiamati anche ancoraggi o hook, e ogni modulo viene agganciato a determinate "posizioni" in modo da comparire dove vogliamo.
Alcuni esempi di posizioni, tra le molte disponibili, sono:
- displayLeftColumn
- displayRightColumn
- displayHome
- displayFooter
- ecc...
Per vedere dove un determinato modulo è aggianciato possiamo cliccare sul pulsante "configura" relativo al modulo e poi, in alto a destra, cliccare su posizioni.
Vuoi imparare a usare meglio Prestashop?
Leggi la guida per l'amministratozione di un ecommerce su PrestaShop che abbiamo preparato.
Se invece vuoi alcune informazioni tecniche continua a leggere questo articolo.
Modificare un template su Prestashop
Utilizzando un software FTP andiamo nella root dell'istallazione di Prestashop e cerchiamo la cartella themes.
Ogni cartella che si trova all’interno della cartella themes contiene un tema.
Se non hai installato nessun tema personalizzato vedrai solo la cartella default-boostrap che rappresenta il tema di default di Prestashop.
Apriamola, e ci troveremo davati una marea di files e cartelle (non spaventarti, alla fine di questa guida riuscirai a gestirli a meravigila).
In ogni caso gli unici files da cui dobbiamo partire per modificare il template sono:
- index.php
- index.tpl
- header.tpl
- footer.tpl
- global.css
Avremo quindi una serie di files con estensione .php che riguarderanno l’aspetto “tecnico” del tema, e poi avremo i files .tpl che conterranno il codice html, e i files .css per i fogli di stile.
Cosa sono i files .tpl?
Dobbiamo ricordare che Prestashop utilizza per i temi il linguaggio di programmazione chiamato Smarty.
Smarty è un motore di template scritto in php, la sua peculiarità è quella di consentire una netta separazione tra aspetto grafico e programmazione.
All'interno dei files .tpl troveremo codice html e codice smarty e questi file posso essere aperti con un qualsiasi editor
Come funzionano i template di Prestashop?
Il meccanismo è piuttosto semplice, una volta capita questa dinamica il nostro lavoro sarà tutto in discesa.
Poniamo che il nostro negozio si trovi su www.mionegozio.it, quando digitiamo questo indirizzo nel browser, il server caricherà il file index.php presente nella roote del sito
Le informazioni contenute in questo file index.php, quindi, determinano tutto ciò che accadrà durante la navigazione del sito.
Per capire cosa succede quando carichiamo il nostro negozio, abbiamo bisogno di capire cosa fa il file index.php.
Il contenuto del file index.php di Prestashop potrebbe essere il seguente:
< ?php
include(dirname(__FILE__).'/config/config.inc.php');
include(dirname(__FILE__).'/header.php');
$smarty->assign('HOOK_HOME', Module::hookExec('home'));
$smarty->display(_PS_THEME_DIR_.'index.tpl');
include(dirname(__FILE__).'/footer.php');
?>
La prima riga dice di caricare il file config.inc.php, che si trova a sua volta nella cartella config.
Questo è il file di configurazione di Prestashop e controlla se tutto è installato correttamente, definisce il tema da utilizzare, i percorsi e una serie di impostazioni che hanno a che fare con la configurazione.
La seconda riga dice di caricare il file header.php contenuto nella cartella principale del sito (nella root).
La quarta riga richiama il file index.tpl contenuto nella cartella del tema di default, e l’ultima riga richiama il footer.php contenuto nella root.
Iniziamo ad analizzare i files contenuti nella cartella principale.
Andiamo nella root e apriamo header.php, per il momento le stringhe che ci interessano sono sostanzialmente due:
$smarty->display(_PS_THEME_DIR_.'header.tpl');
Dice di aprire il file header.tpl che si trova all’interno della cartella del tema di default
$css_files[_THEME_CSS_DIR_.'global.css'] = 'all';
Richiama il file global.css, ossia il foglio di stile, dalla cartella del tema di default
Apriamo footer.php, chè è l’ultimo dei files che vengono richiamati all’interno della cartella principale:
1 2 3 4 5 6 7 8 9 10 11 12 |
< ?php
if (isset($smarty))
{
$smarty->assign(array(
'HOOK_RIGHT_COLUMN' => Module::hookExec('rightColumn'),
'HOOK_FOOTER' => Module::hookExec('footer'),
'content_only' => intval(Tools::getValue('content_only'))));
$smarty->display(_PS_THEME_DIR_.'footer.tpl');
}
?>
|
Oltre a richiamare i ganci right column e footer, il file footer.php richiama footer.tpl.
Il codice dei files header.php e footer.php può variare leggermente a seconda delle diverse versioni di Prestashop, ma la dinamica è sostanzialmente la stessa.
Ricapitolando, quando apriamo il nostro negozio Prestashop:
- il primo file ad essere caricato è index.php
- index.php richiama i files header.php, index.tpl e footer.php
- header.php richiama header.tpl e global.css.
- footer.php richiama footer.tpl.