Opencart template: realizziamone uno (3a parte)
Approfondimenti, Guide e tutorial, Trucchi e soluzioni

Opencart template: realizziamone uno (3a parte)

 , , ,

Eccoci alla terza parte del nostro viaggio nei tempate di opencart.
In questo articolo modificheremo finalmente la struttura dell’interfaccia grafica di opencart per renderla più simile alle nostre esigenze. Cercheremo di far partire opencart mostrando all’utente qualcosa di simile alla seguente interfaccia:
nuova home page
Non è ovviamente importante per questo articolo l’estetica…

Nel precedente articolo abbiamo imparato (l’abbiamo imparato, vero?) il “giro” di opencart, ossia:

web->controller->tpl->web

Quindi, per ottenere quello che vogliamo dovremo:

  • modificare il file index.php
  • creare i nuovi file nella cartella controller
  • creare i corrispettivi file nella cartella template/common
  • creare il foglio di stile (css)

Siamo pronti?
Si parte…

Per prima cosa modifichiamo il redirect che opencart esegue per la home page.
Non facciamo più partire home.tpl, ma benvenuto.tpl (che creeremo in seguito).
Andiamo in index.php e trasformiamo questo codice

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

in quest’altro

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

allo scopo di reindirizzare su benvenuto.tpl tutte le richieste prive del parametro route.

Andiamo in catalog\controller\common e duplichiamo il file home.php. Diamo al duplicato nome benvenuto.php.
Editiamo benvenuto.php e, per prima cosa, modifichiamo il nome della classe (da ControllerCommonHome a ControllerCommonBenvenuto)
Ora sostituiamo tutte le occorrenze del termine “home” in “benvenuto”. Infine cerchiamo questo codice:

$this->children = array(
'common/column_right',
'common/column_left',
'common/footer',
'common/header'
);

e aggiungiamoci la riga
‘common/nuovoHeader’
ottenendo

$this->children = array(
'common/column_right',
'common/column_left',
'common/footer',
'common/header',
'common/nuovoHeader'
);

Salviamo.

Duplichiamo catalog\controller\common\header.php e chiamiamo il duplicato nuovoHeader.php (ma dai!).
Editiamo tale file, modifichiamo il nome della classe (come per benvenuto.php) da ControllerCommonHeader a ControllerCommonNuovoHeader. Poi aggiungiamo la seguente definizione (più o meno a metà file)
$this->data['benvenuto'] = HTTP_SERVER . 'index.php?route=common/benvenuto';
allo scopo di far riconoscere a opencart la variabile $benvenuto
Per finire andiamo in catalog\view\theme\alessandro\template\common e duplichiamo i file home.tpl in benvenuto.tpl e header.tpl in nuovoHeader.tpl.
Per fare in modo che la nostra home page sia costituita da benvenuto, editiamo
catalog\view\theme\alessandro\template\common\nuovoHeader.tpl e sostituiamo le occorrenze della variabile $home con la variabile $benvenuto

Siamo pronti.
Se adesso proviamo la nostra interfaccia non dovrebbe cambiare nulla rispetto a prima sebbene abbiamo fatto tutte queste modifiche.

E’ tutto ok? Se non lo è verifichiamo i passi appena fatti, oppure verifichiamo che io non abbia scritto schiocchezze…

Se è tutto ok, possiamo finalmente smontare l’interfaccia grafica di opencart a nostro piacimento.

Nella prima riga della nostra benvenuto.tpl si cercano le variabili $header, $column_left e $column_right.
Noi non vogliamo le colonne esterne, ma solo la parte centrale, pertanto, senza portarla per le lunghe riduciamo il nostro benvenuto.tpl a questo:



In nuovoHeader.tpl modifichiamo tutti i richiami a common/home in common/benvenuto, poi cerchiamo la riga
$this->id = 'header';
trasformandola in
$this->id = 'nuovoHeader';
Infine riduciamo la parte html del file a questo:



Il tag body non viene chiuso perchè sarà poi chiuso dal footer.

Il nostro file css è il seguente:

html {
overflow: -moz-scrollbars-vertical;
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
text-align: center;
}
body, td, th, input, textarea, select, a {
font-size: 12px;
}
form {
padding: 0px;
margin: 0px;
display: inline;
}
#container {
margin-left: auto;
margin-right: auto;
text-align: left;
background-position:center -4px;
background-color:#0085ca;
//background-repeat:no-repeat;
//background-image: url('../image/sfondo.jpg');
position:relative;
height: 100% !important
}
#intro {
margin-left:50px;
margin-right:50px;
}
#header {
height:50px;
background-color:#AAA;
}
#content {
height:250px;
background-color:#DDD;
}

salviamolo in stylesheet/mioStile.css e modifichiamo nuovoHeader.tpl in modo che lo richiami:


In questa sede non possiamo andare oltre.

In breve ecco cosa succede:

home.php -> controller/common/benvenuto.php -> controller/common/nuovoHeader.php -> template/common/benvenuto.tpl -> template/common/nuovoHeader.tpl -> stylesheet/mioStile.css

Il “come” questo avviene dovremmo averlo capito leggendo questo articolo.
Entrare in ulteriori dettagli sarebbe troppo lungo e complesso.
Ma adesso ne sappiamo qualcosa in più!
Non ci resta che smanettare un po’! 😀
Buoni template a tutti!!!

17 commenti

  1. fabio

    ciao e complimenti per la guida.
    volevo chiederti se sai come posso permettere, in fase di registrazione, di far selezionare la tipologia di utente tra un determinato insieme, ad esempio:
    Privato
    Azienda Italiana
    Azienda Estera
    e di cambiare, di conseguenza, i campi da compilare.
    Questo deve essere valido sia in registrazione sia in checkout.
    Come si può fare?
    Grazie mille…

    1. Alessandro

      Eh… caro Fabio…
      tutto si può fare, ma questa cosa che vuoi fare ti obbliga a intervenire sul codice, ossia a conoscere un pochettino di HTML e un pochettino di PHP. Non sono in grado di aiutarti tramite un commento e impiegherei un po’ di tempo anche intervenendo personalmente sul codice… tempo che in questo periodo proprio non ho…
      Mi dispiace 🙁
      Però potresti provare sul forum ufficiale sia in inglese, sia in italiano…
      Altro non posso fare…

  4. Pietro

    Nella versione 1.4.9.1 non esistono queste righe nel file Home in catalog\controller\common:
    $this->children = array(
    ‘common/column_right’,
    ‘common/column_left’,
    ‘common/footer’,
    ‘common/header’
    );

    E mi dà questo errore:
    Fatal error: Cannot redeclare class ControllerCommonBenvenuto in …\catalog\controller\common\nuovoHeader.php on line 207

    Qualche idea???
    Grazie

  6. Andreea

    A me dà questo errore

    Parse error: syntax error, unexpected T_STRING, expecting ‘)’ in C:\xampp\htdocs\catalog\controller\common\benvenuto.php on line 94

    1. Alessandro

      Ciao Andrea.
      Direi che è quanto mai opportuno aprire con un editor di testo il file indicato (ossia, C:\xampp\htdocs\catalog\controller\common\benvenuto.php), andare alla riga 94 e cercare di capire se magari manca una parentesi tonda chiusa…

  7. Umberto

    Ciao Alessandro, come prima cosa ci tengo a ringraziarti e farti i complimenti per l’ottimo supporto che ci metti gratuitamente a disposizione. Detto questo passo subito al dunque. 😉 Ho seguito meticolosamente la tua guida e purtroppo (dopo 3 o 4 tentativi) mi appare sempre lo stesso errore:

    Notice: Undefined variable: nuovoHeader in /Applications/MAMP/htdocs/opencart/catalog/view/theme/misero/template/common/benvenuto.tpl on line 1

    mi rendo conto del significato dell’errore, ma proprio NON riesco a capire dove può essere l’errore. La variabile del nuovoHeader è stata definita, come mai NON viene richiamata? qualche idea in merito?

    ciao e grazia ancora.

  8. Giuseppe

    Ciao Alessandro, complimenti per le ottime spiegazioni. Mi sto guardando intorno per aprire il mio e-shop, e dopo essermi documentato sui vari software (grazie anche al tuo articolo che confronta vari e-shop), la mia scelta è ricaduta su Prestashop. Volendo creare ad hoc un mio template per la piattaforma scelta ho iniziato a documentarmi su come vengono gestiti i template, chiedendo e facendo domande sui forum oltre che leggere quei pochi articoli (in inglese) che si trovano quà e là. Ti giuro ancora non ci ho capito niente nonostante ho una buona esperienza nel creare template personalizzati per joomla, sembra tutto velato da un infinita rete di variabili……Adesso mi sono letto il tuo tutorial e mi sono domandato: “non è che i concetti spiegati per la creazione di un template per opencart sono simili a ciò che io cerco per Prestashop”? Nella tua comparazione fra i vari software di e-commerce alla voce personalizzazione template inserisci addirittura 5 stelle, il più alto nella categoria…….Forse sono io lo Zuccone!! Spero molto in una tua risposta, se non altro per chiarirmi le idee.

    Giuse

    1. Alessandro

      Ciao Giuseppe,
      purtroppo no, i concetti sono diversi… Il motore di prestashop si basa sugli “hook”.
      Appena ho un po’ di tempo scriverò una mini guida sulla personalizzazione dei template di prestashop, sulla falsa riga di quella scritta per opencart…

  9. mauro

    si hai ragione, ti chiedo scusa…non ho affatto una versione recente…scusa per la mia “nobbezza”. Vi faccio i complimenti per l’ottimo servizio che offrite

  10. mauro

    Ciao il codice del file Home in catalog\controller\common è diverso da quello da te citato, probabilmente varia da versione a versione, io ho la più recente e queste righe di codice non esistono:
    $this->children = array(
    ‘common/column_right’,
    ‘common/column_left’,
    ‘common/footer’,
    ‘common/header’
    );

    Addio layout personalizzato:((

    1. Alessandro

      Ciao Mauro,
      ci sono un po’ di cose che non mi tornano in quello che dici 🙂
      “io ho la più recente…“: non puoi avere (ad oggi) una versione più recente della 1.4.9.1 rilasciata l’8 settembre 2010 e, come avresti dovuto notare tu stesso dall’url riportato nell’unica immagine di questo post, i test qui riportati sono stati fatti proprio sulla versione 1.4.9.1, cioè l’ultima.
      “queste righe di codice non esistono…“: che affermazione perentoria! Dammi almeno un po’ di credito 😀 Per me (che invece ho sempre mille dubbi) è stato necessario aprire il file catalog\controller\common\home.php per verificare che io non abbia scritto cretinate 😀 Può capitare! Eccome! Però no, per fortuna non le ho scritte: ti confermo che in quel file, nella versione 1.4.9.1 (l’ultima ad oggi) trovi le righe che dici di non trovare…
      Vedi un po’, verifica meglio, ma quelle righe devono esserci. Ho scaricato anche la 1.4.7 e la 1.4.8 e… ci sono anche in quelle versioni; magari gli elementi dell’array sono posizionati in modo diverso (header, footer, left, right) ma le trovi. Del resto mi serei molto meravigliato se così non fosse stato.
      Non ti demoralizzare! L’idea sul tuo layout personalizzato non è ancora da abbandonare… 😉

  11. Fabrizio

    Ti ringrazio per la guida che stai realizzando, voglio personalizzare il mio cart ed aspetto le prossime puntate per sapere come fare… ciao

    1. Alessandro

      Ciao Fabrizio,

      son contento che ti sia appassionato alla personalizzazione estrema del layout di opencart, ma ti devo dare tristi notizie: sarà difficile che io scriva altri articoli sull’argomento. Con i 3 articoli scritti basta un po’ di “smanettamento” per riuscire a ottenere quello che si vuole. Provaci…

I commenti sono chiusi.