Opencart template: realizziamone uno (2a parte)

Riprendiamo il discorso intrapreso qualche giorno fa sui template di opencart.
Se il nostro obiettivo è creare un nuovo template per opencart, non possiamo di certo accontentarci di modificare semplicemente lo stile (css) del template di default. Dobbiamo intervenire più a fondo, ma per farlo dobbiamo capire come “gira” questo splendido ecommerce opensource…

Non è questa la sede per parlare di un pattern obbligato come l’MVC, tuttavia è necessario entrare un po’ più in profondità e comprendere quali sono le logiche che usa opencart per instradare le richieste dell’utente. In questo modo, saremo in grado di controllarle…

Portiamoci sulla demo pubblica di opencart: http://demo.opencart.com/
Quando noi visitiamo tale sito, verà aperto il file http://demo.opencart.com/index.php
Da questo file dobbiamo partire.

Editiamolo con cautela (in locale, sulla nostra versione di opencart) e scendiamo giù, fino alla riga 211 (circa) e comunque fino a quando non troviamo questo codice:


// Router
if (isset($request->get['route'])) {
$action = new Action($request->get['route']);
} else {
$action = new Action('common/home');
}


Lasciamo perdere dissertazioni informatiche su cosa è un controller e prendiamo la parte pratica.
Ritorniamo su http://demo.opencart.com/ e, nella home page della demo di opencart, posizioniamo il mouse (senza fare click) sul logo “Your*Store”, in alto a sinistra.
Lasciando il mouse fermo sul logo, osserviamo il nostro browser in basso a sinistra. Troveremo qualcosa del tipo:

http://demo.opencart.com/index.php?route=common/home

Se confrontiamo questo link e il codice sopra riportato, noteremo delle forti attinenze…
Perché?
Il codice dice a opencart di cercare, nel link che noi premiamo, il parametro “route”. Se non lo trova ci instrada sulla “common/home” (vedremo tra poco cosa significa). Se invece trova il parametro si posiziona sul valore indicato da tale parametro.
Facendo un giro sui vari link presenti nella home di opencart, troveremo sempre “?route=qualcosa/qualcosaltro”.
Quindi è “route” che regola ciò che opencart mostra all’utente.

Approfondiamo.
Come si comporta dunque opencart quando riceve un link del tipo:

http://demo.opencart.com/index.php?route=common/home

Quello che stiamo per dire ora è di fondamentale importanza:
il parametro “route” indica a opencart dove andare a prelevare le informazioni da elaborare e poi mostrare all’utente. In particolare il valore “common/home” viene tradotto da opencart in

Questa è un regola sempre valida!
Applichiamola.
Su http://demo.opencart.com/ spostiamo il mouse su una categoria. In basso a sinistra del browser leggeremo qualcosa del tipo:

http://demo.opencart.com/index.php?route=product/category&path=20

Applicando la regola appena enunciata dovrebbe quindi esistere un file sul nostro HD chiamato category.php posizionato in catalog/controller/product/category.php
E’ vero? Certo che è vero! Ed è quel file che decide cosa avviene quando l’utente preme uno di tali link!

Continuiamo a scavare e riprendiamo il giro dall’inizio, ossia da
http://demo.opencart.com/index.php?route=common/home
Andiamo in “catalog/controller/common/” e editiamo (sempre con ESTREMA cautela) il file home.php.
Il file è composto dalla sola funzione index() ad un certo punto della quale troviamo questo codice:


if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/common/home.tpl')) {
$this->template = $this->config->get('config_template') . '/template/common/home.tpl';
} else {
$this->template = 'default/template/common/home.tpl';
}


che significa:
se trovi un template impostato lato amministrazione esegui il file home.tpl di quel template, altrimenti esegui home.tpl del tema di default.
Portiamoci allora nel nostro template (ottenuto come mostrato nel primo articolo) e editiamo il file

catalog/view/theme/alessandro/template/common/home.tpl

et voilà! E’ lui, alla fine di tutto questo giro, che costruisce l’interfaccia grafica.
La prima riga

indica che dovranno essere mostrati l’header, la colonna di sinistra e quella di destra. Poi, nelle righe successive, il file dice a opencart:

• di mostrare il messaggio di benventuo, se settato
• di mostrare in sequenza i moduli settati
• di motrare il footer

In definitiva, tramite il parametro “route”, il giro di opencart è:
web -> controller di riferimento -> file tpl del nostro template -> web

Perché è importante capire tutto ‘sto giro?
Perché se per esempio (come spesso avviene), non vogliamo mostrare da subito il nostro negozio, ma vogliamo mostrare prima una pagina introduttiva (per esempio senza colonne laterali) e poi ricondurre l’utente alla “solita” interfaccia, non potremo farlo senza avere chiaro quanto qui spiegato.

Questo articolo è quindi propedeutico 😀
Nel prossimo, partendo da quello che abbiamo imparato oggi, proveremo a realizzare qualcosa di pratico.