Finalmente è uscito il nuovo manuale per gli utenti di magento.
Con questo manuale viene spiegato in ogni sua parte il noto programma di ecommerce Magento. Una guida per chi intende usare questo ottimo prodotto per fare della sua attività un’attività online.
Continua a leggere: Nuovo manuale per gli utenti di magento
Il Layout è un componente virtuale di Magento. Modificando i componenti layout puoi costruire la tua pagina del negozio dinamicamente aggiornabile.
Diagramma 1
Il Layout è compreso dal layout di default e aggiornamenti di layout che sono costituiti da una semplice sintassi XML molto facile da capire.
Con questi comandi di layout potrai modificare ed assegnare dei blocchi strutturali o di relazione e anche controllare le funzionalità del negozio lato utente ( come ad es: la visualizzazione di un specifico blocco di javascript in una pagina).
I files di Layout sono separati a seconda della loro funzionalità, ogni modulo porta con sè i suoi file di configurazione di layout (per l’istanza ‘catalog.xml’ c’è un file di layout per il modulo catalogo, ‘customer.xml’ è per il modulo costumer…etc).
Questi files di layout sono presenti in app/design/frontend/tua_interfaccia/tuo_tema/layout/ e ogni file è ulteriormente separato da handles (vedi il diagramma 1), ogni handle (con l’eccezione di <default>) assegna degli aggiornamenti nella specifica pagina del negozio.
Alcuni file di configurazione possono contenere l’handle <default>.
Quando Magento analizza i files di layout prima prende gli aggiornamenti di layout assegnati nell’handle di <default> di quasi tutti i files di configurazione, leggendoli nell’ordine di assegnazione impostato in app/etc/modules/Mage_All.xml.
Analizza quindi la pagina specifica con gli aggiornamenti di layout e finalizza la costruzione della pagina del negozio.
Il sistema è stato creato in questo modo per permettere l’aggiunta e la rimozione di moduli senza influenzare gli altri moduli già presenti nel sistema.
Il layout contiene un piccolo set di tags XML che fungono da istruzioni dettagliate per l’applicazione su come costruire una pagina, su cosa costruire nella stessa pagina (blocchi) e il comportamento di ciascun blocco di costruzione.
Il miglior modo per approcciarsi al layout è quella di considerare tutte le possibilità di visualizzazione nel nostro template. Per poter fare questo, di seguito alcune proprietà comportamentali di ogni tag dello schema XML_
Handle (diagramma 1) è un identificatore tramite il quale l’applicazione determina cosa dovrà fare con gli aggiornamenti nidificati al suo interno.
Se il nome dell’handle è <default>, allora l’appicazione saprà che gli aggiornamenti nidificati al suo interno dovranno essere caricati su tutte le pagine del negozio prima di caricare il layout specifico per quella pagina (Diciamo ‘quasi tutti’, perché alcune pagine come il popup per l’immagine del prodotto non viene caricato)
Se Magento trova altri handles diversi da <default>, saranno assegnati gli aggiornamenti nidificati al suo interno alla pagina specifica definita nell’handle.
L’istanza, <catalog_product_view> conterrà gli aggiornamenti di layout per la Pagina di visualizzazione dei prodotti, mentre l’istanza <catalog_product_compare_index> conterrà quelli per la pagina di comparazione dei prodotti.
Gli Handles sono identificatori che non dovrebbero mai essere necessari modificare.
Magento determina il comportamento e la rappresentazione visiva di ogni blocco di costruzione di una pagina tramite l’etichetta <block>.
Abbiamo già citato i due tipi di blocchi che Magento impiega – blocchi strutturali e blocchi di contenuto. Il miglior modo di distinguere tra i due è quello di esaminare il comportamento assegnato visualizzando gli attributi del blocco. Il blocco strutturale solitamente contiene l’attributo ‘as’ attraverso il quale l’applicazione potrà comunicare con l’area designata (attraverso il metodo getChildHtml) in un template.
Ci sono molti altri usi di questo attributo ‘as’ nel layout di default perchè questo layout è nato per “costruire il terreno di lavoro” sul quale si baserà la pagina specifica di layout che poi andrà a definire moduli da aggiungere o togliere.
Per l’istanza nel layout di default ci sono dei blocchi strutturali quali ‘left‘, ‘right‘, ‘content‘ e ‘footer‘. Non per dire che questi blocchi non possono esistere negli aggiornamenti di layout ma perchè non settarli nel default layout in quanto sono blocchi ricorsivi in tutte le pagine?
Vediamo ora gli attributi visualizzabili per l’etichecca <block>.
catalog/category/view.phtml’, l’applicazione caricherà il file di template: ‘app/design/frontend/template/catalog/category/view.phtml.Diagramma 3
<reference> è usato per creare un riferimento ad un’altro blocco. Creando una referenza ad un’altro blocco, gli aggiornamenti interni all’etichetta <reference> saranno applicati all’etichetta correlata <block> (vedi diagramma 3).
Al fine di creare il riferimento dovrai etichettare il riferimento usando l’attributo nome che si riferisce all’attributo nome del blocco. Es: <reference name=”right”> si riferirà al blocco <block name=”right”>.
Diagramma 4
L’unica cosa che bisogna ricordarsi nel settare un file XML è quando un tag viene aperto bisogna chiuderlo in questo modo (<xml_tag></xml_tag>) oppure (<xml_tag/>) esattamente come vuole lo standard (X)HTML.
Smarty in pratica è diviso in 2 cartelle di files. La prima è il “core” (cuore) dell’applicazione che ci genera il template e l’altra cartella contiene tutte le funzioni secondarie che possiamo integrare o modificare a nostro piacimento. Questo è un grande punto di forza di questo sistema di templating, infatti possiamo aggiungere quante funzioni o se vogliamo chiamarli plugins che vogliamo.
Ora vedremo come fare a richiamare una funzione.
Supponiamo di voler stampare un’immagine sul nostro template. L’unica cosa che andremo a scrivere sul nostro codice php:
<?php //includo il file con il core dell'applicazione require_once('Smarty/libs/Smarty.class.php'); //setto la lingua come parametro (esempio di variabile che mi fà cambiare le immagini dei templates) if(empty($_SESSION['lang']) && empty($_GET['lang'])) if(empty($param['lang'])) $lang='ita'; else $lang=$_GET['lang']; else $lang=$_SESSION['lang']; //setto una array globale che contierrà tutte le variabili da assegnare al template, questo per praticità nel codice $T_VARS = array(); //a questo punto non mi resta altro che inizializzare il template engine e configurarlo per le mie esigenze //inizializzo la classe smarty $t = new Smarty; //setto la cartella da dove pescare i miei template $t->template_dir = dirname(__file__).'/templates-'.$lang.'/main/'; //setto la cartella dove il template engine dovrà salvare i templates compilati $t->compile_dir = dirname(__file__).'/templates_c/'.$lang.'/'; //setto il delimitatore sinistroe destro che per comodità di sviluppo in fase di progettazione con dreamweaver lo imposto come apertura tag php $t->left_delimiter = "<?"; $t->right_delimiter = "?>"; //assegno l'immagine che mi interessa $T_VARS['image']="prova.jpg"; //assegno l'array globale delle variabili $t->assign('T',$T_VARS); //visaulizzo il template (che risiederà dentro la cartella impostata con la variabile $t->template_dir) $t->display('struttura.html'); // ora sarà visualizzato il template struttura.html con la possibilità sul template di accedere a tutti gli elementi dell'array $T_VARS ma sul template questo array si chiamerà $T in quanto ho assegnato $T_VARS al nome di variabile T . ?>
e lato template avremo :
<?html_image file=$T.image?>
In questo modo diciamo al “core” di smarty di andare a pescare il plugin html_image. Il plugin non è altro che una funzione chiamata con questa sintassi :
function smarty_function_html_image($params, &$smarty)
ed il file che la contiene deve avere la sintassi : function.html_image.php
Il che significa che noi possiamo creare quanti plugins vogliamo rispettando la sintassi del nome della funzione e del nome del file che contiene la funzione. Per esempio se dovessimo cambiare il plugin che genera il codice di inserimento dell’immagine possiamo creare un nuovo plugin richiamabile dal template tramite la parola chiave html_image_pers.
Chiameremo dunque il file function.html_image_pers.php e all’interno creeremo una funzione chiamata smarty_function_html_image_pers($params, &$smarty). I parametri passati alla funzione sono obbligatori in quanto il parametro $params passa alla funzione sotto forma di array tutti i parametri impostati sul template (come fossero parametri di un tag html) e il parametro &$smarty passa la referenza dell’istanza di smarty.
A questo punto con i valori dei parametri richiesti ed impostati lato template possiamo generare tramite questa funzione l’output che vogliamo sul nostro template. Infatti Smarty andrà semplicemente a sostituire il valore tornato da questa funzione al posto del tag immesso sull’html del template.
Smarty è secondo il mio parere il miglior template engine per php. Il template engine è gratuito e lo scaricate a questo indirizzo Download Smarty Template Engine.
A questo punto siamo pronti per la prima lezione di come installare ed usare Smarty.
Una volta scaricato il file zip lo decomprimiamo e rinominiamo la cartella con un nome a piacimento ad esempio Smarty.
Apriamo la cartella e vedremo una lista di cartelle e files, per il funzionamento è necessaria solo la cartella libs.
A questo punto dovremmo tener presente che a Smarty servono 2 cartelle, una nella quale salvare i templates da noi creati ed una nella quale andare a salvare i templates compilati da Smarty stesso.
Creiamo quindi le nostre 2 cartelle (templates e templates_c) dove la seconda cartella stà per templates compilati.
Vi anticipo già che ho riscontrato un baco nella compilazione quindi se abbiamo dei templates che si riferiscono e immagini diverse a seconda di qualche parametro dinamico sarà opportuno creare una struttura di directory da riprodurre a specchio nelle 2 directory appena create.
Es. abbiamo un applicazione
<?php //includo il file con il core dell'applicazione require_once('Smarty/libs/Smarty.class.php'); //setto la lingua come parametro (esempio di variabile che mi fa cambiare le immagini dei templates) if(empty($_SESSION['lang']) && empty($_GET['lang'])) if(empty($param['lang'])) $lang='ita'; else $lang=$_GET['lang']; else $lang=$_SESSION['lang']; //setto una array globale che contierrà tutte le variabili da assegnare al template, questo per praticità nel codice $T_VARS = array(); //a questo punto non mi resta altro che inizializzare il template engine e configurarlo per le mie esigenze //inizializzo la classe smarty $t = new Smarty; //setto la cartella da dove pescare i miei template $t->template_dir = dirname(__file__).'/templates-'.$lang.'/main/'; //setto la cartella dove il template engine dovrà salvare i templates compilati $t->compile_dir = dirname(__file__).'/templates_c/'.$lang.'/'; //setto il delimitatore sinistro che per comodità di sviluppo in fase di progettazione con dreamweaver lo imposto come apertura tag php $t->left_delimiter = "<?"; //e il delimitatore destro $t->right_delimiter = "?>"; //assegno l'array globale delle variabili $t->assign('T',$T_VARS); //visaulizzo il template (che risiederà dentro la cartella impostata con la variabile $t->template_dir) $t->display('struttura.html'); // ora sarà visualizzato il template struttura.html con la possibilità sul template di accedere a tutti gli elementi dell'array $T_VARS ma sul template questo array si chiamerà $T in quanto ho assegnato $T_VARS al nome di variabile T . ?>
In questa piccola applicazione abbiamo potuto vedere come utilizzare questo template engine lato php.
Possiamo subito notare che è facile e sopratutto ci sono pochissime righe di codice da scrivere, cosa molto importante per separare il codice php dalla sua visualizzazione.
Notiamo il fatto che è stata introdotta anche la variabile $lang. Infatti, se noi volessimo distinguere i templates per 2 lingue come italiano ed inglese, cosa che capita molto facilmente, dovremmo necessariamente creare 2 cartelle diverse sia per i templates originali che per quelli compilati. In questo modo i templates in italiano avranno quasi sicuramente delle immagini linkate con delle scritte in italiano e punteranno alle immagini giuste e quelli in inglese saranno comunque corretti.
Ora passiamo a come far visualizzare qualunque dato che sia inserito nel nostro Array $T_VARS.
Apriamo il file di template ’struttura.html’ :
<?include file=$T.page?>
Vediamo sopra come l’istruzione Smarty inizi con <? e finisca con ?> ovvero i delimitatori che abbiamo fissato prima nel file php.
L’array in smarty è accessibile tramite il punto
Infatti all’istruzione include passiamo il parametro file con valore $T.page (pagina da includere) . Invece di includere una pagina potremmo semplicemente stampare un valore:
<?$T.valore?>
fare un ciclo:
<?foreach from=$T.myArray item=$foo?> <li><?$foo.valore?></li> <?/foreach?>
o molto altro ancora.
Più avanti vedremo come fare operazioni più complesse.