Magento è una piattaforma di e-commerce incredibilmente potente. In questa miniserie impareremo come iniziare con la piattaforma, conoscere i termini, impostare un negozio e tutti gli aspetti correlati e imparare finalmente come personalizzarlo per renderlo nostro.

In questa quarta parte, getteremo le basi per il nostro tema che costruiremo completamente da zero. Eccitato? Iniziamo!

La serie completa

• Parte 1: installazione e configurazione
• Parte 2: Prodotti, tasse, categorie, gateway di pagamento, ecc.
• Parte 3: Theming
• Parte 4: Costruire il tema
• Parte 5: Creazione della pagina delle informazioni sul prodotto

Una rapida riassunzione

Nelle ultime parti, abbiamo appreso come far sì che il tuo negozio Magento sia installato e pronto per la distribuzione, compreso come impostare i tuoi prodotti, le categorie di prodotti, le tasse, la spedizione, i gateway di pagamento e molti altri.

Abbiamo anche dato uno sguardo alle basi del tema Magento. Abbiamo imparato l'idea generale dei temi di Magento, le varie terminologie dietro di esso e la struttura di base di un tema.

Obiettivi per il nostro tema

Il nostro obiettivo per la creazione di questo tema è abbastanza semplice: per capire praticamente come costruire un tema Magento. Con questo in mente, terrò il tema il più semplice possibile.

• Tutto tranne le essenziali funzionalità essenziali spogliato
• Nessuna immagine oltre alle immagini del prodotto e al logo
• Singola colonna per mantenerla visivamente semplice

Cosa stiamo costruendo oggi?

Poiché il processo di codifica di Magento è ragionevolmente complicato per qualcuno abituato a WordPress, lo faremo molto lentamente. Oggi costruiremo solo la parte centrale del nostro tema, lo scheletro che viene utilizzato in ogni vista del sito. Spiegherò anche il principio generale alla base del processo, in modo che possiamo passare a ciascuna singola vista nelle parti future.

I file sorgente, sia front-end che back-end, sono inclusi ma prova a non usarlo ancora. Definiremo solo le parti principali senza definire quale contenuto deve essere visualizzato, come dovrebbe essere visualizzato e da dove deve essere tirato il contenuto. Quindi, se provi a usare questo in questo momento, vedrai un sacco di cose senza senso visto che Magento estrae tutti i file mancanti dal tema predefinito, rovinando completamente il nostro look. Quindi il mio consiglio è, aspetta un po '.

Il modello di base

Il modello base sembra così. Abbiamo un logo generico in alto insieme a un semplice menu che consente all'utente di accedere al suo account, lista dei desideri e carrello insieme a lasciarlo checkout o logout.

Di seguito, abbiamo una barra di utilità che contiene una navigazione in stile breadcrumb per consentire all'utente di conoscere la gerarchia contestuale del sito. Inoltre, permettiamo all'utente di cercare nel nostro negozio attraverso l'input di ricerca a destra.

L'area del contenuto è attualmente vuota poiché il suo contenuto varia a seconda della vista in cui si sta caricando Magento. Quindi manterremo per ora vuoto e gestirlo in un secondo momento quando creeremo ogni singola pagina.

Il footer è abbastanza generico con un link per segnalare bug e informazioni sul copyright.

Passaggio 1: HTML

Per prima cosa esamineremo l'HTML per lo scheletro del tema. Suppongo che tu sia abbastanza fluente in HTML e CSS, quindi salterò le parti più importanti.

         
 
 
 
 
Benvenuto, Sid
 
 
Il mio account
 
La mia lista dei desideri
 
La mia carta
 
Check-out
 
Disconnettersi
 
 
 
 
 
Home "Stato della paura
 
 
 
 
Contenuto qui
 
 
 Aiutaci a mantenere Magento in buona salute - Segnala tutti i bug (versione 1.4.0.1) © 2008 Magento Demo Store. Tutti i diritti riservati. 
 
  

Per prima cosa, nota che ho avvolto tutto sotto un div wrapper per rendere più facile la gestione delle cose. Si noti inoltre che la sezione intestazione, contenuto e piè di pagina ottengono i singoli blocchi.

L'input di ricerca è abbastanza inutile a questo punto. Lo collegheremo correttamente durante l'integrazione con Magento. Lo stesso con i vari collegamenti. Attualmente li ho messi lì come segnaposti. Una volta scavato in Magento, li faremo funzionare.

Passaggio 2: il CSS

 * margine: 0; padding: 0; confine: nessuno; contorni: nessuno; colore: # 333; famiglia di caratteri: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 14px; stile elenco: nessuno; line-height: 1.3em;  a color: # 7db000;  h1, h2, h3, h4 carattere-peso: normale;  h1 font-size: 32px; margin-bottom: 10px;  h2 font-size: 24px; margine: 10px 0 12px 0;  h3 font-size: 20px; margin-bottom: 5px;  h4 font-size: 20px;  .border border: 1px solid # 666;  / * Base Elements * / #wrapper width: 920px; margine: 10px auto; imbottitura: 20px;  #header margin: 0 0 20px 0; overflow: auto;  #content margin: 20px 0; overflow: auto;  #footer padding: 10px; border: 1px solid # E1E1E1; sfondo: # F3F3F3; allineamento del testo: centro;  / * Contenuto dell'intestazione * / #logo float: left;  #hud float: right; larghezza: 320 px; altezza: 50 px; imbottitura: 10px; border: 1px solid # E1E1E1; sfondo: # F3F3F3;  #hud li a float: left; font-size: 12px; margine: 0 10px 0 0;  #utilities clear: both; margine: 20px 0; overflow: auto; imbottitura: 7px 10px; border: 1px solid # E1E1E1; sfondo: # F3F3F3;  #breadcrumbs float: left;  # header-search float: right; 

Niente di eccezionale qui. CSS di base per posizionare gli elementi in posizione e ridimensionarli un po '. Andiamo avanti.

Passaggio 3: creazione del nostro file page.xml

Questa parte è un po 'complicata quindi resta con me qui. Magento utilizza i file XML per gestire il layout di una pagina e anche per definire quali elementi sono disponibili per il rendering. L'obiettivo è che invece di andare in giro con un codice arcano, puoi semplicemente modificare il file XML e farlo senza preoccuparti delle dipendenze.

Ogni vista / schermo / modulo riceve il proprio file XML insieme a un file master per definire il layout generale del sito. Questo file master è il page.xml file che creeremo ora.

Il file completo per oggi sembra così. Spiegherò ogni bit parte per parte qui sotto.

    Tutte le pagine   css / cirrus.css           

Ignorare le dichiarazioni iniziali della versione XML e di layout. Non hanno alcun significato per noi ora.

Innanzitutto, creiamo un blocco principale per tutti i dati. Considera questo l'equivalente dell'elemento DIV wrapper che abbiamo usato nel nostro HTML. Quindi, lo istruiamo a usare Pagina / 1column.phtml come modello per la nostra pagina. Non preoccuparti, non abbiamo ancora creato il file. Lo faremo più avanti in questo tutorial.

  css / cirrus.css 

Successivamente, definiamo gli elementi da includere nel file capo sezione della pagina. Magento, per impostazione predefinita, include un carico di file CSS e JS, ma oggi non richiederemo alcuna delle loro funzionalità. Quindi, includeremo semplicemente il nostro file CSS.

Stiamo definendo cosa entra nell'intestazione del nostro sito. Vogliamo il menu / collegamenti in alto, i breadcrumb e la ricerca.

Avremo bisogno della parte dei contenuti, ovviamente, quindi includeremo la parte dei contenuti. Non definiremo nulla su questa sezione qui poiché Magento carica solo tutto il contenuto necessario in questo blocco.

E infine, abbiamo incluso il nostro footer. Diciamo anche a Magento da dove caricare il suo modello.

Probabilmente ti starai chiedendo perché specificiamo un percorso template per alcuni blocchi mentre omettiamo per altri. È un argomento di livello più alto ma hai notato che ogni blocco ha un genere attributo? Quando il suo tipo corrisponde a uno di quelli predefiniti da Magento, non è necessario specificare un modello. È caricato automaticamente. Nifty, no?

E con questo, la nostra base page.xml il file è completo.

Passaggio 4: creazione del nostro modello di scheletro

Ok, ora che abbiamo specificato il nostro layout possiamo passare alla creazione di 1column.phtml file che abbiamo specificato in XML in precedenza.

Questo file non è altro che un modello di scheletro che richiama l'intestazione, l'area del contenuto e il piè di pagina secondo necessità. Il nostro file sembra così:

     getChildHtml ('testa')?>   
 getChildHtml ('header')?> 
 getChildHtml ('contenuto')?> 
 getChildHtml ('footer')?> 
  

Questo è praticamente il nostro file HTML originale, tranne per il fatto che usiamo il getChildHtml metodo per acquisire il contenuto di ogni blocco. Il modello deve essere abbastanza agnostico rispetto alla pagina principale in cui viene eseguita ogni pagina.

Passaggio 5: creazione dei modelli per i blocchi

Ora arriva la parte un po 'difficile: tagliare i nostri blocchi HTML principali per funzionalità, creare i file di template richiesti per ogni funzionalità e quindi compilare quei file.

Affronteremo ciascuno in ordine di apparizione

sezione di testa

getChildHtml ( 'testa') mappe direttamente a Pagina / html / head.phtml. Il nostro file sembra così:

    getCssJsHtml ()?> getChildHtml ()?> getIncludes ()?>

Vedrai che permettiamo a Magento di creare dinamicamente i titoli. Oltre a questo, si noti il getCssJsHtml metodo chiamato. Questo metodo importa tutti i file CSS e JS che abbiamo specificato nel file page.xml file.

Intestazione di pagina

getChildHtml ( 'intestazione') mappe direttamente a Pagina / html / header.phtml. Il nostro file sembra così:

 
 
getUrl (")?>" title = "getLogoAlt ()?> ">
 
 
benvenuto
 getChildHtml ('toplink')?> 
 
 
 getChildHtml ('breadcrumb')?> getChildHtml ('topSearch')?> 

Usiamo l'API di Magento per acquisire prima il logo. Quindi per modulare ulteriormente le cose, otteniamo l'HTML per i breadcrumb, i link e la funzione di ricerca.

Si noti che il nome è puramente semantico. Come puoi vedere, non sei limitato all'intestazione nel suo senso tecnico più puro e rigoroso. Puoi anche virare su altri elementi, se necessario.

Piè di pagina

getChildHtml ( 'footer') mappe direttamente a Pagina / html / footer.phtml come specificato nel file XML. Il nostro file sembra così:

 
 __ ('Aiutaci a mantenere Magento sano')?> - __ ('Segnala tutti i bug')?> __ ('(ver.% s)', Mage :: getVersion ())?> getCopyright ()?> 

Con il piè di pagina, sei libero di includere tutte le informazioni che ritieni più idonee. Ho appena incluso il contenuto predefinito dal momento che non riuscivo a pensare a qualcosa di intelligente da dire lì.

Con gli elementi core finiti, possiamo passare ai blocchi funzionali più piccoli specificati nella sezione dell'intestazione, ad esempio i breadcrumb, i link e la funzione di ricerca.

Link principali

getChildHtml ( '') Toplinks mappe direttamente a Pagina / html / template / links.phtml. Il nostro file sembra così:

 getLinks (); ?> 0):?> getName ()):?>>  getIsFirst () || $ _link-> getIsLast ()):?> getLiParams ()? >>getBeforeText ()?> getUrl ()?> "title ="getTitle ()?> "" getAParams ()? >>getLabel ()?> getAfterText ()?>   

So che sembra un po 'complicato, ma tutto ciò che fa è scorrere in loop una serie di link e poi sputarlo fuori, aggiungendo una classe speciale se è il primo o l'ultimo elemento nell'elenco. Se preferisci, puoi scartare tutto questo e basta codificare il tuo menu principale.

Briciole di pane

getChildHtml ( 'briciole di pane') mappe direttamente a Pagina / html / breadcrumbs.phtml. Il nostro file sembra così:

  
 $ _crumbInfo):?>  "title ="htmlEscape ($ _ crumbInfo ['title'])?> ">htmlEscape ($ _ crumbInfo ['label'])?>  htmlEscape ($ _ crumbInfo ['label'])?>  htmlEscape ($ _ crumbInfo ['label'])?>   "    
 

Come in precedenza, scorre semplicemente le briciole per rendere il testo. I bit birichini controllano se la briciola è un collegamento, la formattano come tali e controllano se è l'elemento finale in modo che non debba eseguire il rendering di un separatore. Non c'è nient'altro a questo blocco.

Ricerca

getChildHtml ( 'TopSearch') mappe direttamente a CatalogSearch / form.mini.phtml. Il nostro file sembra così:

Magento fa tutto il peso qui. Tutto ciò che devi fare è chiamare il metodo API appropriato per gli URL e così via.

Se hai notato che la stringa è passata al getChildHtml metodo esegue direttamente la mappa come attributo usato nel page.xml file, quindi congratulazioni, sei un lettore astuto e ottieni un delizioso biscotto!

Cosa costruiremo nella prossima parte

Ora che abbiamo creato un nucleo molto forte, ora possiamo passare alla costruzione delle singole visualizzazioni del negozio. Nella parte successiva, costruiremo una delle visualizzazioni principali di qualsiasi negozio, la vista del prodotto. Rimanete sintonizzati!

L'ultima parola

E abbiamo finito! Oggi abbiamo fatto il primo passo nella creazione del nostro tema Magento personalizzato, Cirrus. Spero che questo ti sia stato utile e l'hai trovato interessante. Dato che questo è un argomento piuttosto nuovo per molti lettori, osserverò attentamente la sezione dei commenti in modo da sentirti dentro se hai dei dubbi.

Domande? Belle cose da dire? Critiche? Colpisci la sezione dei commenti e lasciami un commento. Buona programmazione!