Magento este o platformă de e-commerce uimitor de puternică. În această miniserie, vom învăța cum să începem cu platforma, să cunoaștem terminologiile, să stabilim un magazin și toate aspectele legate de acesta și, în sfârșit, să învățăm cum să-l personalizăm pentru a-l face foarte proprie.

În această a patra parte, vom pune bazele temei pe care o vom construi complet de la zero. Excitat? Să începem!

Seria Full

• Partea 1: Instalare și configurare
• Partea 2: Produse, impozite, categorii, gateway-uri de plată etc..
• Partea 3: Theming
• Partea 4: Construirea temei
• Partea 5: Construirea paginii cu informații despre produs

O recapitulare rapidă

În ultimele părți, am învățat cum să vă instalați magazinul Magento în gata de implementare, inclusiv cum să vă configurați produsele, categoriile de produse, taxele, transportul, gateway-urile de plată și multe altele.

Am analizat, de asemenea, elementele de bază ale temei Magento. Am învățat ideea generală din spatele temelor Magento, diferitele terminologii din spatele ei și structura de bază a unei teme.

Obiectivele temei noastre

Scopul nostru de a construi această temă este destul de simplu: să înțelegem practic cum să construim o temă Magento. Având în vedere acest lucru, voi păstra tema cât mai simplă posibil.

• Totul, în afară de caracteristicile esențiale goale, a ieșit
• Nu există alte imagini decât imaginile produsului și sigla
• Coloană unică pentru a menține vizualul simplu

Ce construim astăzi?

Deoarece procesul de codificare Magento este destul de complicat pentru cineva folosit pentru WordPress, o vom lua extrem de lent. Astăzi, vom construi doar partea centrală tema noastră, scheletul care se utilizează în fiecare vizualizare a site-ului. Voi explica, de asemenea, principiul general al procesului, astfel încât să putem trece la fiecare viziune individuală în părțile viitoare.

Fișierele sursă, atât partea frontală cât și cea din spate, sunt incluse, dar încercați să nu o utilizați încă. Vom defini numai părțile principale fără a defini ce conținut trebuie afișat, cum trebuie afișat și unde trebuie să se tragă conținutul. Deci, dacă încercați să utilizați acest lucru chiar acum, veți vedea o grămadă de gabberish, deoarece Magento trage în toate fișierele absente de la tema implicită, astfel ruinând complet aspectul nostru. Deci sfatul meu este să așteptați puțin.

Șablon de bază

Șablonul de bază arată așa. Avem un logo generic pe sus, împreună cu un meniu simplu, care permite utilizatorului accesul la contul său, lista de dorințe și coșul de cumpărături împreună cu lăsarea lui checkout sau logout.

Mai jos, avem o bară de utilitate care conține o navigare în stilul de pescuit pentru a permite utilizatorului să cunoască ierarhia contextuală a site-ului. De asemenea, lăsăm utilizatorul să caute prin magazinul nostru prin intrarea de căutare din dreapta.

Zona de conținut este momentan goală, deoarece conținutul său va varia în funcție de ce vizualizare Magento se încarcă. Deci, vom păstra este gol pentru moment și să se ocupe mai târziu când construim fiecare pagină individuală.

Foaterul este destul de generic, cu un link pentru a raporta bug-uri și informații privind drepturile de autor.

Pasul 1 - HTML

Vom analiza mai întâi codul HTML pentru scheletul temei. Presupun că sunteți destul de fluent în HTML și CSS, așa că voi trece la părțile mai importante.

         
 
 
 
 
Bun venit, Sid
 
 
Contul meu
 
Lista mea de dorinte
 
Caruciorul meu
 
Verifică
 
Deconectați-vă
 
 
 
 
 
Acasă "Starea de teamă
 
 
 
 
Conținutul aici
 
 
 Ajutați-ne să păstrați Magento sănătoși - Raportați toate bug-urile (versiunea 1.4.0.1) © 2008 Magento Demo Store. Toate drepturile rezervate. 
 
  

În primul rând, rețineți că am înfășurat totul sub un div wrap pentru a facilita gestionarea lucrurilor. De asemenea, rețineți că secțiunea antet, conținut și subsol obține propriile lor blocuri.

Intrarea de căutare este destul de inutilă în acest moment. O vom lega în mod corespunzător în timpul integrării cu Magento. La fel cu diferitele legături. În prezent, i-am pus acolo ca înlocuitori. Odată ce vom intra în Magento, îi vom face să lucreze.

Pasul 2 - CSS

 * marja: 0; umplutura: 0; frontieră: nici una; contur: nici unul; culoare: # 333; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 14px; listă: nu există; linia-înălțime: 1.3;  a culoare: # 7db000;  h1, h2, h3, h4 font-greutate: normal;  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;  / * Elemente de bază * / #wrapper width: 920px; margine: 10 pixeli automat; padding: 20px;  #header marja: 0 0 20px 0; overflow: auto;  #content margin: 20px 0; overflow: auto;  #footer padding: 10px; frontieră: 1px solid # E1E1E1; fundal: # F3F3F3; text-align: centru;  / * Conținutul antetului * / #logo float: left;  #hud float: right; lățime: 320 pixeli; înălțime: 50px; padding: 10px; frontieră: 1px solid # E1E1E1; fundal: # F3F3F3;  #hud li a float: left; font-size: 12px; margine: 0 10px 0 0;  #utilities clar: ambele; margine: 20px 0; overflow: auto; padding: 7px 10px; frontieră: 1px solid # E1E1E1; fundal: # F3F3F3;  #breadcrumbs float: left;  # header-search float: dreapta; 

Nimic nu este aici. Foarte simplu CSS de bază pentru a plasa elementele în poziție și stil doar un pic mic. Sa trecem peste.

Pasul 3 - Crearea fișierului nostru page.xml

Această parte este puțin complicată, deci stați aici cu mine. Magento utilizează fișiere XML pentru a gestiona aspectul unei pagini și, de asemenea, pentru a defini ce elemente sunt disponibile pentru a fi redate. Scopul este că, în loc de mucking în jurul cu cod arcane, puteți doar edita fișierul XML și se face cu ea, fără a vă faceți griji despre dependențe.

Fiecare vizualizare / ecran / modul primește propriul fișier XML împreună cu un fișier principal pentru a defini aspectul general al site-ului. Acest fișier principal este page.xml fișier pe care îl vom crea acum.

Fișierul complet pentru astăzi arată așa. Voi explica fiecare parte de biți de partea de jos.

    Toate paginile   css / cirrus.css           

Nu luați în considerare declarațiile inițiale XML și layout version. Ei nu au nici o importanță pentru noi acum.

Mai întâi, vom crea un bloc master pentru toate datele. Considerați acest lucru echivalentul elementului DIV înfășurat pe care l-am folosit în codul nostru HTML. Apoi îl instruim să o folosească Pagina / 1column.phtml ca șablon pentru pagina noastră. Nu vă faceți griji, încă nu am creat fișierul. O vom face mai târziu în acest tutorial.

  css / cirrus.css 

În continuare, definim elementele care trebuie incluse în cap secțiune a paginii. În mod implicit, Magento include o încărcătură de fișiere CSS și JS, dar nu le vom cere niciodată funcționalitatea. Deci, vom include doar fișierul nostru CSS.

Definim ce se intampla in antetul site-ului nostru. Vrem meniul / link-urile din partea de sus, precum și pescuitul și căutarea.

Avem nevoie de partea de conținut, desigur, astfel încât să includem partea de conținut. Nu vom defini nimic despre această secțiune, deoarece Magento încarcă tot conținutul necesar în acest bloc.

Și în sfârșit, am inclus subsolul nostru. Spunem, de asemenea, Magento unde să-și încarce șablonul.

Probabil că vă întrebați de ce specificăm o șablon pentru anumite blocuri, în timp ce omiteți-o pentru alții. Este un subiect destul de înalt, dar ați observat că fiecare bloc are a tip atribut? Când tipul său se potrivește cu unul dintre cele predefinite de Magento, nu este necesar să specificați un șablon. Este încărcat automat. Nifty, nu?

Și cu asta, baza noastră page.xml fișierul este complet.

Pasul 4 - Crearea șablonului nostru de schelet

Ok, acum că am specificat aspectul nostru, putem trece la crearea acestuia 1column.phtml fișierul pe care l-am specificat mai devreme în XML.

Acest fișier nu este decât un șablon de schelet care apelează în antet, în zona de conținut și în subsol după cum este necesar. Fișierul nostru arată astfel:

     getChildHtml ('cap')?>   
 getChildHtml ("header")?> 
 getChildHtml ('conținut')?> 
 getChildHtml ("footer")?> 
  

Acesta este destul de mult fișierul HTML original, cu excepția faptului că folosim getChildHtml pentru a obține conținutul fiecărui bloc. Șablonul trebuie să fie destul de agnostic, deoarece este pagina principală de la care fiecare pagină este redată.

Pasul 5 - Crearea șabloanelor pentru blocurile noastre

Acum vine partea usoara: desfasurarea blocurilor de baza HTML in functie de functionalitate, crearea fisierelor de template necesare pentru fiecare functionalitate si apoi popularea acelor fisiere.

Vom aborda fiecare în ordinea apariției

capul Secțiunea

getChildHtml ( 'cap') hărți direct la Pagina / html / head.phtml. Fișierul nostru arată astfel:

   "tip =" imagine / x-icon "/>  "tip =" imagine / x-icon "/> getCssJsHtml ()?> getChildHtml ()?> getIncludes ()?>

Veți vedea că lăsăm Magento să creeze dinamic titlurile. În afară de asta, nu observi getCssJsHtml metoda fiind numită. Această metodă importează toate fișierele CSS și JS pe care le-am specificat în page.xml fişier.

Antet pagină

getChildHtml ( 'header') hărți direct la Pagina / html / header.phtml. Fișierul nostru arată astfel:

 
 
getUrl (")?>" title = "getLogoAlt ()?> ">
 
 
Bine ati venit
 getChildHtml ('topLinks')?> 
 
 
 getChildHtml ("breadcrumbs")?> getChildHtml ('topSearch')?> 

Utilizăm API-ul Magento pentru a obține mai întâi logo-ul. Apoi, pentru a modula în continuare lucrurile, obținem codul HTML pentru pescuit, link-uri și funcția de căutare.

Rețineți că numele este pur semantic. După cum puteți vedea, nu vă limitați la antet în sensul cel mai pur și strict tehnic. Puteți, de asemenea, să faceți clic pe alte elemente, după cum este necesar.

Subsol de pagină

getChildHtml ( 'subsol') hărți direct la Pagina / html / footer.phtml așa cum este specificat în fișierul XML. Fișierul nostru arată astfel:

 
 __ ("Ajutați-ne să păstrăm Magento sănătoasă")?> - __ ('Raportați toate bug-urile')?> __ ('(ver.% s)', Mage :: getVersion ())>> getCopyright ()?> 

Cu subsolul, sunteți liber să includeți toate informațiile pe care le considerați potrivite. Tocmai am inclus conținutul implicit, deoarece nu m-am gândit la nimic inteligent să spun acolo.

Cu ajutorul elementelor de bază terminate, putem trece la blocurile funcționale mai mici specificate în secțiunea antet, adică la pâslă, la link-uri și la caracteristica de căutare.

Link-uri de top

getChildHtml ( 'topLinks') hărți direct la Pagina / html / template / links.phtml. Fișierul nostru arată astfel:

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

Stiu ca pare cam complicat, dar tot ce face este sa curea printr-o serie de link-uri si apoi sa o scuipa, adaugand o clasa speciala daca este primul sau ultimul element din lista. Dacă preferați, puteți șterge toate acestea și doar codificați greu meniul de sus.

Firimituri de pâine

getChildHtml ( 'pesmet') hărți direct la Pagina / html / breadcrumbs.phtml. Fișierul nostru arată astfel:

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

La fel ca înainte, ea doar bate prin fâșii pentru a face textul. Bitii obraznici verifică dacă miezul este o legătură, să îl formați ca atare și să verificați dacă acesta este elementul final, astfel încât acesta nu trebuie să facă un separator. Nu mai e nimic în acest bloc.

Căutare

getChildHtml ( 'topSearch') hărți direct la catalogsearch / form.mini.phtml. Fișierul nostru arată astfel:

Magento face tot greutatea aici. Tot ce trebuie să faceți este să apelați metoda API adecvată pentru adresele URL și altele asemenea.

Dacă ați observat că șirul a trecut pe getChildHtml metoda hărții direct la la fel de atribut utilizat în page.xml fișier, apoi felicitări, ești un cititor amuzant și primești un cookie delicios!

Ce vom construi în următoarea parte

Acum, că am construit un nucleu foarte puternic, putem trece acum la construirea opiniilor individuale ale magazinului. În următoarea parte, vom construi una dintre opiniile principale ale oricărui magazin, viziunea produsului. Rămâneți aproape!

Ultimul cuvant

Și am terminat! Astăzi, am făcut primul pas în crearea temei custom Magento, Cirrus. Sperăm că acest lucru a fost util pentru dvs. și l-ați găsit interesant. Deoarece acesta este un subiect destul de nou pentru o mulțime de cititori, voi urmări îndeaproape secțiunea de comentarii, așa că sună acolo dacă aveți vreo îndoială.

Întrebări? Ce lucruri frumoase de spus? Critici? Activați secțiunea de comentarii și lasă-mă un comentariu. Codificare fericită!