Magento er en utrolig kraftig e-handelsplattform. I disse miniseriene lærer vi hvordan du kommer i gang med plattformen, lærer terminologiene, etablerer en butikk og alle relaterte aspekter av den, og lærer deg endelig å tilpasse den slik at den blir vår helt egen.

I denne fjerde delen legger vi grunnlaget for vårt tema som vi skal bygge helt fra bunnen av. Spent? La oss komme i gang!

The Full Series

• Del 1: Installasjon og oppsett
• Del 2: Produkter, Skatter, Kategorier, Betaling Gateways, etc.
• Del 3: Theming
• Del 4: Bygg temaet
• Del 5: Bygg produktinformasjonssiden

En rask oppskrift

I de siste delene lærte vi hvordan du får Magento-butikken din fra installert til klar for distribusjon, inkludert hvordan du konfigurerer produktene, produktkategorier, skatter, frakt, betalingsgateways og mange flere.

Vi tok også en titt på det grunnleggende om Magento-temaet. Vi lærte den generelle ideen bak Magento-temaene, de ulike terminologiene bak den og den grunnleggende strukturen i et tema.

Mål for temaet vårt

Vårt mål for å bygge dette temaet er ganske enkelt: å forstå praktisk hvordan man bygger et Magento-tema. Med det i tankene skal jeg holde temaet så enkelt som mulig.

• Alt annet enn de kjeve essensielle funksjonene, ble fjernet
• Ingen bilder annet enn produktbilder og logoen
• Enkeltkolonne for å holde det visuelt enkelt

Hva bygger vi i dag?

Siden Magento-kodingsprosessen er rimelig komplisert for noen som pleide å WordPress, tar vi det ekstremt sakte. I dag bygger vi bare kjernedelen vårt tema, skjelettet som blir brukt i hver visning av nettstedet. Jeg vil også forklare det generelle prinsippet bak prosessen, slik at vi kan gå videre til hver enkelt visning i fremtidige deler.

Kildedataene, både forenden og bakenden, er inkludert, men prøv å ikke bruke den enda. Vi definerer bare kjernedelen uten å definere hvilket innhold som skal vises, hvordan det skal vises og hvor innholdet skal hentes fra. Så, hvis du prøver å bruke dette akkurat nå, kommer du til å se en masse gibberish siden Magento trekker i alle fraværende filer fra standardtemaet, og dermed ødelegger vårt utseende helt. Så mitt råd er, vent litt.

Grunnleggende mal

Grunnmalen ser slik ut. Vi har en generisk logo oppe sammen med en enkel meny som lar brukeren få tilgang til sin konto, ønskeliste og handlevogn sammen med å la ham kassere eller logge ut.

Nedenfor har vi en verktøylinje som inneholder en navigasjonssnittsmodell for å la brukeren få vite det kontekstuelle hierarkiet av nettstedet. Vi lar også brukeren søke gjennom butikken vår gjennom søkeinngangen til høyre.

Innholdsområdet er for øyeblikket tomt siden innholdet vil variere avhengig av hvilken visning Magento laster inn. Så vi beholder er tom for nå og håndterer det senere når vi bygger hver enkelt side.

Foten er ganske generisk med en link for å rapportere feil og opphavsrettsinformasjon.

Trinn 1 - HTML

Vi ser først på HTML for temaets skjelett. Jeg antar at du er ganske flytende i HTML og CSS, så jeg hopper over til de viktigste delene.

         
 
 
 
 
Velkommen, Sid
 
 
Min konto
 
Min ønskeliste
 
Min vogn
 
Sjekk ut
 
Logg ut
 
 
 
 
 
Hjem "Frykt for staten
 
 
 
 
Innhold her
 
 
 Hjelp oss å holde Magento sunt - Rapporter alle feil (ver. 1.4.0.1) © 2008 Magento Demo Store. Alle rettigheter reservert. 
 
  

Først opp, merk at jeg har pakket alt under en wrapper div for å gjøre det enklere å håndtere ting. Legg også merke til at overskriften, innholdet og bunnteksten får sine individuelle blokker.

Søkeinngangen er ganske ubrukelig på dette punktet. Vi hekker det ordentlig når vi integrerer med Magento. Samme med de ulike koblingene. Foreløpig har jeg satt dem der som plassholdere. Når vi graver inn i Magento, får vi dem til å fungere.

Trinn 2 - CSS

 * margin: 0; polstring: 0; grense: ingen; oversikt: ingen; farge: # 333; font-familie: "Lucida Sans Unicode", "Lucida Grande", sans-serif; skriftstørrelse: 14px; listestil: none; linjehøyde: 1,3em;  en farge: # 7db000;  h1, h2, h3, h4 font-weight: normal;  h1 skriftstørrelse: 32px; margin-bunn: 10px;  h2 font-size: 24px; margin: 10px 0 12px 0;  h3 skriftstørrelse: 20px; margin-bunn: 5px;  h4 skriftstørrelse: 20px;  .border border: 1px solid # 666;  / * Baseelementer * / #wrapper width: 920px; margin: 10px auto; polstring: 20px;  #header margin: 0 0 20px 0; overløp: auto;  # innhold margin: 20px 0; overløp: auto;  #footer polstring: 10px; grense: 1px solid # E1E1E1; bakgrunn: # F3F3F3; tekst-align: center;  / * Header innhold * / #logo float: left;  #hud float: right; bredde: 320px; høyde: 50px; polstring: 10px; grense: 1px solid # E1E1E1; bakgrunn: # F3F3F3;  #hud li a float: left; skriftstørrelse: 12px; margin: 0 10px 0 0;  #utilities clear: both; margin: 20px 0; overløp: auto; polstring: 7px 10px; grense: 1px solid # E1E1E1; bakgrunn: # F3F3F3;  #breadcrumbs float: left;  # header-search float: right; 

Ikke noe fancy her. Veldig grunnleggende CSS å plassere elementene på plass og stil det bare en liten bit. La oss gå videre.

Trinn 3 - Opprette vår side.xml-fil

Denne delen er litt vanskelig, så vær med meg her. Magento bruker XML-filer til å håndtere en sides layout og også å definere hvilke elementer som er tilgjengelige for å bli gjengitt. Målet er at i stedet for å kaste seg rundt med arkivkode, kan du bare redigere XML-filen og bli ferdig med den uten å bekymre seg om avhengigheter.

Hver visning / skjerm / modul får sin egen XML-fil sammen med en hovedfil for å definere den generelle utformingen av nettstedet. At hovedfilen er page.xml fil vi skal lage nå.

Den komplette filen for i dag ser ut som det. Jeg skal forklare hver bit del av del nedenfor.

    Alle sider   css / cirrus.css           

Se bort fra de første XML- og layoutversjonsdeklarasjonene. De har ingen betydning for oss nå.

Først oppretter vi en hovedblokk for alle dataene. Vurder dette som ekvivalent av wrapper-DIV-elementet som vi brukte i vår HTML. Deretter instruerer vi det å bruke side / 1column.phtml som mal for vår side. Ikke bekymre deg, vi har ikke laget filen enda. Vi gjør det senere i denne opplæringen.

  css / cirrus.css 

Deretter definerer vi elementene som skal inkluderes i hode delen av siden. Magento, som standard, inneholder en masse CSS og JS filer, men vi vil ikke kreve noen av funksjonaliteten i dag. Så, vi inkluderer bare vår CSS-fil.

Vi definerer hva som går inn i overskriften til nettstedet vårt. Vi vil ha menyen / linkene på toppen, så vel som breadcrumbs og søket.

Vi trenger selvfølgelig innholdsdelen, så vi inkluderer innholdsdelen. Vi vil ikke definere noe om denne delen her siden Magento bare laster opp alt nødvendig innhold inn i denne blokken.

Og til slutt har vi tatt med vår footer. Vi forteller også Magento hvor du skal laste inn mal fra.

Du lurer sikkert på hvorfor vi spesifiserer en malbane for noen blokker, mens du unnlater det for andre. Det er et temmelig høyere nivå, men merket at hver blokk har a type Egenskap? Når den er typen, samsvarer med en av de forhåndsdefinerte av Magento, trenger du ikke spesifisere en mal. Det er automatisk lastet. Nifty, nei?

Og med dette, vår base page.xml filen er fullført.

Trinn 4 - Opprette vår skjelettmal

Ok, nå som vi har angitt vårt oppsett, kan vi fortsette å opprette 1column.phtml fil som vi spesifiserte i XML tidligere.

Denne filen er bare en skjelettmal som ringer i overskriften, innholdsområdet og bunnteksten etter behov. Vår fil ser slik ut:

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

Dette er ganske mye vår opprinnelige HTML-fil, bortsett fra at vi bruker getChildHtml metode for å erverve hver blokks innhold. Malen må være pen side-agnostisk, da det er mastersiden hvorfra hver side gjengis.

Trinn 5 - Opprette maler for våre blokker

Nå kommer den litt harde delen: Kutte opp våre kjerne HTML-blokker ved hjelp av funksjonalitet, skape de nødvendige malerfilene for hver funksjonalitet og deretter fylle de filene.

Vi vil takle hver i rekkefølge av utseende

hode seksjon

getChildHtml ( 'hodet') kart direkte til side / html / head.phtml. Vår fil ser slik ut:

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

Du ser at vi lar Magento dynamisk lage titlene. Annet enn det, legg merke til getCssJsHtml metode blir kalt. Denne metoden importerer alle CSS og JS-filene som vi spesifiserte i page.xml fil.

Sidens overskrift

getChildHtml ( 'header') kart direkte til side / html / header.phtml. Vår fil ser slik ut:

 
 
getUrl (")?>" title = "getLogoAlt ()?> ">
 
 
Velkommen
 getChildHtml ('topLinks')?> 
 
 
 getChildHtml ('breadcrumbs')?> getChildHtml ('topSearch')?> 

Vi bruker Magento API for å skaffe logoen først. Så for å videremodulere ting, får vi HTML for breadcrumbs, linker og søkefunksjonen.

Merk at navnet er rent semantisk. Som du ser, er du ikke begrenset til overskriften i den reneste, strenge tekniske forstanden. Du kan også takke på andre elementer etter behov.

Sidefotball

getChildHtml ( 'footer') kart direkte til side / html / footer.phtml som spesifisert i XML-filen. Vår fil ser slik ut:

 
 __ ('Hjelp oss å holde Magento Healthy')?> - __ ('Rapporter alle feil')?> __ ('(ver.% s)', Mage :: getVersion ())> getCopyright ()?> 

Med bunnteksten er du fri til å inkludere alle opplysninger du anser passer. Jeg har nettopp tatt med standardinnholdet siden jeg ikke kunne tenke på noe smart å si der.

Når kjerneelementene er ferdige, kan vi gå videre til de mindre funksjonelle blokkene som er spesifisert i overskriftsdelen nå, dvs. brødkrummene, koblingene og søkefunksjonen.

Topplister

getChildHtml ( '') topLinks kart direkte til side / html / mal / links.phtml. Vår fil ser slik ut:

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

Jeg vet at det ser litt komplisert ut, men alt det gjør er å løpe gjennom en rekke lenker og deretter spytte det ut, mens du legger til en spesialklasse hvis det er det første eller siste elementet i listen. Hvis du foretrekker det, kan du skrap alt dette, og bare hardkodes din toppmeny.

Brødsmuler

getChildHtml ( 'brødsmuler') kart direkte til side / html / breadcrumbs.phtml. Vår fil ser slik ut:

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

Som med før sluter det bare gjennom krummer for å gjengi teksten. De frie bitene kontrollerer hvorvidt krummen er en kobling, formaterer den som sådan, og kontroller om det er det endelige elementet, slik at det ikke trenger å skille en separator. Det er ingenting annet til denne blokken.

Søke

getChildHtml ( 'topSearch') kart direkte til catalogsearch / form.mini.phtml. Vår fil ser slik ut:

Magento gjør alt vektløftet her. Alt du trenger å gjøre er å ringe riktig API-metode for nettadressene og slikt.

Hvis du har lagt merke til at strengen gikk videre til getChildHtml Metode kart direkte til som attributt brukt i page.xml fil, så gratulerer, du er en skarp leser, og du får en deilig informasjonskapsel!

Hva vi skal bygge i neste del

Nå som vi har bygget en veldig sterk kjerne, kan vi nå fortsette å bygge de individuelle visningene av butikken. I neste del skal vi bygge en av kjernevisningen til en hvilken som helst butikk, produktvisningen. Følg med!

Det siste ordet

Og vi er ferdige! I dag tok vi det første skrittet i å skape vårt tilpassede Magento-tema, Cirrus. Forhåpentligvis har dette vært nyttig for deg, og du fant det interessant. Siden dette er et ganske nytt emne for mange lesere, vil jeg være nøye med å se på kommentaravsnittet så chime der inne hvis du har noen tvil.

Spørsmål? Hyggelige ting å si? Kritikk? Treff kommentar delen og la meg en kommentar. Glad koding!