Magento är en otroligt kraftfull e-handelsplattform. I dessa miniserier lär vi oss hur vi ska komma igång med plattformen, lära känna terminologierna, skapa en butik och alla relaterade aspekter av det och äntligen lära oss hur vi anpassar det för att göra det till vårt eget.

I den här fjärde delen lägger vi grunden för vårt tema som vi kommer att bygga helt från början. Upphetsad? Låt oss börja!

The Full Series

• Del 1: Installation och installation
• Del 2: Produkter, Skatter, Kategorier, Betalnings Gateways, etc.
• Del 3: Theming
• Del 4: Bygga teman
• Del 5: Bygga produktinformationssidan

En snabb återställning

I de sista delarna lärde vi oss att få din Magento-butik från att installeras för att kunna installeras, bland annat hur man ställer in dina produkter, produktkategorier, skatter, frakt, betalningsgränser och många fler.

Vi tog också en titt på grunderna i Magento-teman. Vi lärde oss den allmänna idén bakom Magento-teman, de olika terminologierna bakom det och den grundläggande strukturen i ett tema.

Mål för vårt tema

Vårt mål för att bygga detta tema är ganska enkelt: att praktiskt förstå hur man bygger ett Magento-tema. Med det i åtanke kommer jag att hålla temat så enkelt som möjligt.

• Allt utom de väsentliga väsentliga funktionerna togs bort
• Inga bilder än produktbilderna och logotypen
• Enstaka kolumnen för att hålla den visuellt enkel

Vad bygger vi idag?

Eftersom Magento-kodningsprocessen är ganska komplicerad för någon som används för WordPress, tar vi det extremt långsamt. Idag bygger vi bara kärndelen vårt tema, det skelett som används i varje syn på webbplatsen. Jag förklarar också den allmänna principen bakom processen så att vi kan gå vidare till varje enskild syn i framtida delar.

Källfilerna, både främre och bakre änden, ingår men försök att inte använda det just än. Vi definierar bara kärndelarna utan att definiera vilket innehåll som ska visas, hur det ska visas och var innehållet ska dras från. Så, om du försöker använda det här just nu, kommer du att se en massa gibberish eftersom Magento drar i alla frånvarande filer från sitt standardtema vilket förstör vårt utseende helt. Så mitt råd är, vänta lite.

Den grundläggande mallen

Den grundläggande mallen ser ut så här. Vi har en generisk logotyp upp och tillsammans med en enkel meny som låter användaren få tillgång till hans konto, önskelista och kundvagn tillsammans med att låta honom checka ut eller logga ut.

Nedanför har vi en verktygsfält som innehåller en navigering för breadcrumb-stil för att låta användaren känna till webbplatsens kontextuella hierarki. Vi låter även användaren söka igenom vår butik genom sökinmatningen till höger.

Innehållsområdet är för närvarande tomt eftersom innehållet varierar beroende på vilken vy Magento laddar. Så vi håller är tom för nu och hanterar det senare när vi bygger varje enskild sida.

Footer är ganska generisk med en länk för att rapportera fel och upphovsrättsinformation.

Steg 1 - HTML

Vi tittar först på HTML för tematets skelett. Jag antar att du är ganska flytande i HTML och CSS så jag hoppar över till de viktigaste delarna.

         
 
 
 
 
Välkommen, Sid
 
 
Mitt konto
 
Min önskelista
 
Min vagn
 
Checka ut
 
Logga ut
 
 
 
 
 
Hem "State of Fear
 
 
 
 
Innehåll här
 
 
 Hjälp oss att hålla Magento frisk - Rapportera alla fel (ver. 1.4.0.1) © 2008 Magento Demo Store. Alla rättigheter förbehållna. 
 
  

Först upp, notera att jag har packat allt under en wrapper div för att underlätta hanteringen av saker. Observera också att rubriken rubrik, innehåll och sidfot får sina enskilda block.

Sökningen är ganska användbar vid denna punkt. Vi kopplar upp det ordentligt när vi integrerar med Magento. Samma med de olika länkarna. För närvarande har jag lagt dem där som platshållare. När vi gräver in i Magento får vi dem att fungera.

Steg 2 - CSS

 * marginal: 0; vaddering: 0; gränsen: ingen; kontur: ingen; färg: # 333; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; typsnittstorlek: 14px; listestil: none; linjehöjd: 1,3em;  en färg: # 7db000;  h1, h2, h3, h4 font-vikt: normal;  h1 font-size: 32px; marginal-botten: 10px;  h2 font-size: 24px; marginal: 10px 0 12px 0;  h3 font-size: 20px; marginal-botten: 5px;  h4 fontstorlek: 20px;  .border border: 1px solid # 666;  / * Baselement * / #wrapper width: 920px; marginal: 10px auto; vaddering: 20px;  #header margin: 0 0 20px 0; överflöde: auto;  #content margin: 20px 0; överflöde: auto;  #footer padding: 10px; gränsen: 1px solid # E1E1E1; bakgrund: # F3F3F3; text-align: center;  / * Rubrikinnehåll * / #logo float: left;  #hud float: right; bredd: 320px; höjd: 50px; vaddering: 10px; gränsen: 1px solid # E1E1E1; bakgrund: # F3F3F3;  #hud li a float: left; fontstorlek: 12px; marginal: 0 10px 0 0;  #utilities clear: both; marginal: 20px 0; överflöde: auto; vaddering: 7px 10px; gränsen: 1px solid # E1E1E1; bakgrund: # F3F3F3;  #breadcrumbs float: left;  # header-search float: right; 

Inget fint här. Mycket grundläggande CSS för att placera elementen i position och stil det bara en liten bit. Låt oss gå vidare.

Steg 3 - Skapa vår page.xml-fil

Den här delen är lite knepig, så håll dig med mig här. Magento använder XML-filer för att hantera en sidas layout och även för att definiera vilka element som är tillgängliga att göra. Syftet är att istället för att mucka runt med arcane-kod kan du bara redigera XML-filen och göra det utan att oroa sig för beroenden.

Varje vy / skärm / modul får sin egen XML-fil tillsammans med en huvudfil för att definiera webbplatsens allmänna layout. Den här huvudfilen är page.xml fil vi ska skapa nu.

Den fullständiga filen för idag ser ut som så. Jag ska förklara varje bitdel av en del nedan.

    Alla sidor   css / cirrus.css           

Undvik de ursprungliga XML- och layoutversionsdeklarationerna. De har ingen betydelse för oss nu.

Först skapar vi ett huvudblock för alla data. Tänk på detta som motsvarigheten till det wrapp-DIV-element vi använde i vår HTML. Därefter instruerar vi det att använda sida / 1column.phtml som mall för vår sida. Oroa dig inte, vi har inte skapat filen än. Vi gör det senare i den här handledningen.

  css / cirrus.css 

Därefter definierar vi de element som ska ingå i huvud avsnitt av sidan. Magento, som standard, innehåller en massa CSS- och JS-filer, men vi kommer inte att kräva någon av deras funktionalitet idag. Så vi inkluderar bara vår CSS-fil.

Vi definierar vad som går in i rubriken på vår webbplats. Vi vill ha menyn / länkarna på toppen såväl som brödsmulorna och sökningen.

Vi behöver naturligtvis innehållsdelen, så vi inkluderar innehållsdelen. Vi kommer inte att definiera något om det här avsnittet här, eftersom Magento bara laddar upp allt nödvändigt innehåll i det här blocket.

Och äntligen har vi inkluderat vår sidfot. Vi berättar också Magento var att ladda mallen från.

Du undrar förmodligen varför vi anger en mallväg för några kvarter samtidigt som den utelämnas för andra. Det är ett ganska högre ämne men noterade du att varje block har a typ attribut? När det är typ som matchar en av de fördefinierade av Magento behöver du inte ange en mall. Det laddas automatiskt. Nifty, nr?

Och med detta, vår bas page.xml filen är klar.

Steg 4 - Skapa vår skelettmall

Ok, nu när vi har angett vår layout kan vi fortsätta att skapa 1column.phtml fil som vi angav i XML tidigare.

Den här filen är inget annat än en skelettmall som kallar i rubriken, innehållsområdet och sidfoten efter behov. Vår fil ser ut så här:

     getChildHtml ('head')?>   
 getChildHtml ('header')?> 
 getChildHtml ('content')?> 
 getChildHtml ('footer')?> 
  

Detta är ganska mycket vår ursprungliga HTML-fil förutom att vi använder getChildHtml metod för att förvärva varje block innehåll. Mallen måste vara vacker sida agnostisk eftersom det är den mästersida från vilken varje sida görs.

Steg 5 - Skapa mallarna för våra block

Nu kommer den svåra delen: klippa upp våra kärnhtml-block genom funktionalitet, skapa nödvändiga mallfiler för varje funktionalitet och sedan fylla i dessa filer.

Vi ska ta itu med var och en i utseende

huvud avsnitt

getChildHtml ( 'huvudet') kartor direkt till sida / html / head.phtml. Vår fil ser ut så här:

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

Du ser att vi låter Magento dynamiskt skapa titlarna. Annars än det, märker du getCssJsHtml metod kallas. Den här metoden importerar alla CSS och JS-filer som vi angav i page.xml fil.

Sidhuvud

getChildHtml ( 'header') kartor direkt till sida / html / header.phtml. Vår fil ser ut så här:

 
 
getUrl (")?>" title = "getLogoAlt ()?> ">
 
 
Välkommen
 getChildHtml ('topLinks')?> 
 
 
 getChildHtml ('breadcrumbs')?> getChildHtml ('topSearch')?> 

Vi använder Magento API för att förvärva logotypen först. Sedan för att ytterligare modulera saker får vi HTML för brödsmulorna, länkarna och sökfunktionen.

Observera att namnet är rent semantiskt. Som du kan se är du inte begränsad till rubriken i den renaste, strikt tekniska sinnen. Du kan också tacka på andra element efter behov.

Sidfot

getChildHtml ( 'sidfot') kartor direkt till sida / html / footer.phtml som anges i XML-filen. Vår fil ser ut så här:

 
 __ ('Hjälp oss att hålla Magento Healthy')?> - __ ('Rapportera alla fel')?> __ ('(ver.% s)', Mage :: getVersion ())?> getCopyright ()?> 

Med sidfot kan du inkludera information du tycker är lämplig. Jag inkluderade bara standardinnehållet eftersom jag inte kunde tänka på något smart att säga där.

När kärnelementen är färdiga kan vi gå vidare till de mindre funktionella blocken som anges i rubrikavsnittet nu, dvs brödsmulorna, länkarna och sökfunktionen.

Topplänkar

getChildHtml ( 'topLinks') kartor direkt till sida / html / mall / links.phtml. Vår fil ser ut så här:

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

Jag vet att det ser lite komplicerat ut, men allt det gör är att slinga genom en rad länkar och sedan spotta ut det, samtidigt som du lägger till en specialklass om det är det första eller sista föremålet i listan. Om du föredrar kan du skrapa allt detta och bara hårdkoda din översta meny.

Ströbröd

getChildHtml ( 'brödsmulor') kartor direkt till sida / html / breadcrumbs.phtml. Vår fil ser ut så här:

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

Som med tidigare sluter det bara genom smulorna för att göra texten. De stygga bitarna kontrollerar om krummen är en länk, för att formatera den som sådan och kontrollera om det är det sista elementet så det behöver inte göra en separator. Det finns inget annat i det här blocket.

Sök

getChildHtml ( 'topSearch') kartor direkt till catalogsearch / form.mini.phtml. Vår fil ser ut så här:

Magento lyfter hela tyngden här. Allt du behöver göra är att ringa rätt API-metod för webbadresserna och så vidare.

Om du har märkt att strängen gick vidare till getChildHtml Metod kartor direkt till som attribut som används i page.xml fil, så gratulerar du, du är en smart läsare och du får en läcker kaka!

Vad vi ska bygga i nästa del

Nu när vi har byggt en väldigt stark kärna, kan vi nu gå vidare för att bygga upp de enskilda synpunkterna i affären. I nästa del kommer vi att bygga en av kärnvyn i någon butik, produktvyn. Håll dig igång!

Det sista ordet

Och vi är klara! Idag tog vi det första steget i att skapa vårt anpassade Magento-tema, Cirrus. Förhoppningsvis har det varit användbart för dig och du tyckte det var intressant. Eftersom det här är ett ganska nytt ämne för många läsare kommer jag att vara noga med att titta på kommentarerna så chime där om du har några tvivel.

Frågor? Trevliga saker att säga? Kritik? Klicka på kommentarfältet och lämna mig en kommentar. Lycklig kodning!