Magento för Designers Del 5

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 femte delen bygger vi en av huvudsidorna i vår butik - produktinformationssidan. 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 den sista delen fastställde vi ramverket för temat genom att bygga upp de repeterande delarna av temat och i huvudsak definiera temaets allmänna layout.

Vi tog också en praktisk titt på hur teman i Magento fungerar genom att gå igenom hur layouten är konstruerad, hur blocken fungerar och hur alla olika delar av pusslet passar ihop tillsammans.

Vad bygger vi idag?

Idag bygger vi den enskilda produktvisningssidan. Precis som tidigare ingår källfilerna, både främre och bakre änden. Du kan använda den för att se hur sidan ser ut men utanför det, temat ska se trasigt eftersom du vet att vi inte har rört resten av vyerna än. Så tills vi bygger resten, försök inte våga ut ur vår sandlåda.

Mål för sidan

Vårt mål för denna specifika sida är relativt enkelt. Vi vill ha en no-nonsense sida som bara gör det väsentliga. Således har jag utarbetat en kort lista över element som jag tror det behöver:

Produktens titel: Tydligt uppenbart
Förmåga att visa en bild av produkten
En snabb och fullständig översikt
Tillgänglighet och pris på produkten och slutligen
En lägg till i kundvagnen för att placera den i kundvagnen

Det är allt. Jag vill behålla det så enkelt som möjligt och sålunda valt att inte göra det. När du väl har lärt dig de allmänna principerna, var god att lägga till så många whizbang-funktioner som möjligt.

Basic Look

Sidan måste i princip se ut så här:

Steg 1 - HTML

Vi tittar först på HTML för innehållsdelen ensam. Jag antar att du är ganska flytande i HTML och CSS så jag kommer att hoppa över de ganska viktiga delarna.

  
  Tillgänglighet I lager
 Pris $ 29,00
 Lägg till i kundvagn 
 Photoshop till HTML
 snabb överblick
  Produktbeskrivning

Först upp märker jag att jag har förpackat produktbilden med en div för att göra det enklare att lägga till funktioner i framtiden. Anta att du vill lägga till en snabb bildtext till den visade bilden i framtiden, så får vi lägga till detta mycket snabbare.

Vi har ett annat div-element som håller tillgängligheten och prisinformationen tillsammans med Lägg till i kundvagn knapp. Vi kommer att sprucing upp det med lite CSS3 på en bit.

Resten av HTML är mycket enkel. Titeln finns i en h1-sektion medan de enskilda sektionsrubrikerna tar upp h2. Snabböversikten är indelad i en paragraf medan hela översikten tar upp en div.

Vi kan gå vidare till stylingdelen nu.

Steg 2 - CSS

 / * Produktsida * / # huvudprodukt-bild marginal: 0 20px 10px 0; vaddering: 10px; flyta till vänster; gränsen: 1px solid # E1E1E1; bakgrund: # F3F3F3;  # produktdetaljer bredd: 180px; vaddering: 10px; float: right; gränsen: 1px solid # E1E1E1; bakgrund: # F3F3F3; marginal: 0 0 0 20px;  # produkt tillgänglighet span.available, # produkt-pris span färg: # 7db000; float: right; . knapp marginal: 10px auto; display: block; bredd: 140px; vaddering: 5px 10px; text-align: center; text-dekoration: ingen; färg: # 555; gränsen: 1px solid #ccc; typsnittstorlek: 18px; bakgrund: #ddd; gränsstråle: 12px; -webkit-gränsen-radien: 12px; -moz-gränsen-radien: 12px; boxskugga: 1px 1px 2px rgba (0,0,0, .5); -webkit-box-skugga: 1px 1px 2px rgba (0,0,0, .5); -moz-box-skugga: 1px 1px 2px rgba (0,0,0, .5); textskugga: #fff 0px 1px 1px; bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, från (#eeeeee), till (#cccccc)); bakgrund: -moz-linjär-gradient (topp, #eeeeee, #cccccc); . knapp: svävar bakgrund: # 014464; bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, från (#cccccc) till (# 999999)); bakgrund: -moz-linjär-gradient (topp, #cccccc, # 999999); färg: # 000; . knapp: aktiv -moz-box-skugga: 0 2px 6px svart; -webkit-box-skugga: 0 2px 6px svart;

Inget fint här. Mycket grundläggande CSS för att placera elementen i position.

Jag har också använt lite av CSS3 för att göra knapparna lite snyggare.

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

Som jag nämnde i den tidigare delen får varje modul sin egen XML-fil för att diktera vilka objekt som ska inkluderas och den allmänna layouten på sidan. Sidan vi bygger idag är beroende av en fil som heter catalog.xml att definiera dess innehåll och struktur.

Den här filen ska vara närvarande i layout mapp så låt oss skapa en XML-fil och namnge den katalog.

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

    Katalog Produktvy (Alla)      css / product.css

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

Först låter vi systemet veta att vi har för avsikt att ändra produktvisningens del av systemet. Det här är för att catalog.xml huser layouten för ett antal andra synpunkter och det är därför viktigt att vi anger vilken vy vi avser att ändra.

Nu berättar vi Magento att ladda upp 1column.phtml filen som huvudmallmall för denna vy. Detta beror på att varje enskild vy kan använda någon fördefinierad struktur. Till exempel kan din hemsida använda en väldigt komplex anpassad struktur, din produktsida en dubbla kolumn och din söksida en enkelspelets layout.

Om inget anges, laddar det upp den standardmall som nämns i page.xml. Eftersom vi använder det för allt annat är den här delen överflödig men när du ändrar den här mallen för din personliga användning är det mycket lättare att redigera filens namn än att lägga till bitar av XML till layoutfilen.

  css / product.css

Och nu kommer vi över en av de niftier delarna av Magento. Ja, vi kan kasta alla våra visningsspecifika CSS till en jätte CSS-fil men vi är inte cavemen, är vi? Krypter av flera HTTP-förfrågningar åt sidan, den här metoden låter oss effektivisera vår CSS bättre.

Först förvärvar vi en referens till huvuddelen av filen och lägger sedan in vårt sidspecifika innehåll i det. Här lägger jag in en fil som heter product.css som innehåller alla sidspecifika CSS vi tittade på ovan.

Observera att du inte är begränsad till CSS. Inklusive JS och andra tillgångar är också möjligt.

Vi ber nu Magento att använda en specifik mall för innehållsdelen av sidan

Det här blocket definierar alla enskilda block i huvudinnehållsblocket. I huvudsak använder vi enskilda mallar för visning av produktens bild, översikt och beskrivning, tillgänglighet / pris och slutligen funktionen Lägg till i kundvagnen.

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

Steg 4 - Skapa vår huvudmall

Ok, nu när vi har angett vår layout kan vi fortsätta att skapa katalog / produkt / view.phtml fil som vi angav som huvudmall för innehållsavsnittet i XML tidigare.

Den här filen är lite annorlunda än den skelettmall som vi skapade i den sista delen eftersom vi kommer att lägga till några små saker direkt istället för att gå igenom mallbanan för att undvika uppblåsa tillsammans med en smidgen av API-samtal för att hjälpa oss.

 hjälpare ( 'katalog / utgång'); $ _product = $ this-> getProduct (); ?> getOptions ()):?> enctype = "multipart / form-data">    getChildHtml ('media')?>
  getChildHtml ('product_type_data')?> getChildHtml ('addtocart')?> 
 productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getShortDescription ()):> __ ('Snabböversikt')?>
 productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>
  getChildHtml ('description')?>

Om du tittar snabbt ser du att vi gör ett antal getChildHtml samtal för att förvärva det som blockerar innehållet. Dessa fungerar precis som förväntat och innehållet i dessa innehåll kommer att behandlas lite senare nedan.

 hjälpare ( 'katalog / utgång'); $ _product = $ this-> getProduct (); ?>

För tillfället behöver vi inte veta vad det betyder. I lekmannens termer frågar vi dock Magento för den specifika produktens affärsinformation så att vi kan bearbeta den och sedan visa den på sidan.

 getOptions ()):?> enctype = "multipart / form-data">

Här använder vi en av Magento API-metoder för att dynamiskt generera webbadressen formuläret behöver posta till.

 productAttribute ($ _ product, $ _product-> getName (), 'name')?>

Vi använder en annan av Magentos metoder för att förvärva produktens titel direkt.

 getShortDescription ()):> __ ('Snabböversikt')?>
 productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>

Och igen, eftersom den snabba översikten bara blir en mening eller två väljer jag att importera det direkt istället för att använda en mall. Vi använder samma funktion som vi brukade skaffa titeln.

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

Med alla huvuddelar gjort kan vi nu koncentrera oss på de enskilda blocken. Nu när vi redan har hanterat detta vid konstruktionen av huvudmallen, borde det bli mycket lättare nu.

Vi ska ta itu med var och en i utseende i vår kod:

Produktbild

getChildHtml ( 'media') kartor direkt till katalog / produkt / view / media.phtml. Vår fil ser ut så här:

 getProduct (); $ _helper = $ this-> hjälpen ('katalog / output'); ?> hjälpar ('katalog / bild') -> init ($ _ produkt, 'bild'). "" alt = "'. $ this-> htmlEscape ($ this-> getImageLabel ()).'" title = "'. this-> htmlEscape ($ this-> getImageLabel ()). '"/>'; echo $ _helper-> productAttribute ($ _ produkt, $ _img, 'bild');?>

Någon enkel PHP-kod. Vi använder hjälpar metoder för att förvärva produktens bild och sedan göra den på skärmen.

Tillgänglighet / Pris

getChildHtml ( 'product_type_data') kartor direkt till katalog / produkt / view / typ / simple.phtml. Vår fil ser ut så här:

 getProduct ()?> Tillgänglighet isSable ()):?> __ ('I lager')?>  __ ('Slut i lager')?>  
 Pris getPriceHtml ($ _ produkt)?>

Vi kontrollerar först om objektet är tillgängligt eller inte och sedan matar ut den nödvändiga HTML-filen. Att få priset på produkten är ett enkelt sätt att ringa bort!

Lägg till i kundvagn

getChildHtml ( 'AddToCart') kartor direkt till katalog / produkt / view / addtocart.phtml. Vår fil ser ut så här:

 getProduct ()?> isSable ()):?>

Såsom är logiskt kontrollerar vi om ett objekt är till försäljning innan vi matar ut den nödvändiga HTML-filen. Det är en enkel knapp som är uppenbart.

Produktbeskrivning

getChildHtml ( 'beskrivning') kartor direkt till katalog / produkt / view / description.phtml. Vår fil ser ut så här:

 getProduct () -> getDescription (); ?>  Produktbeskrivning
 hjälpar ('katalog / utgång') -> productAttribute ($ this-> getProduct (), nl2br ($ _ beskrivning), 'beskrivning')?>

På samma sätt som vi inkluderade den snabba översikten använder vi Magento inbyggda metoder för att förvärva nödvändig information. Vi söker efter beskrivningen före vi gör det.

Om du är nyfiken, brukar jag ta med beskrivningen separat via mallar, för det mesta, för i produktionsmallar kommer du nästan alltid att vara efter procession beskrivningen på något sätt. I dessa scenarier är det lättare att dela upp den här logiken till sin egen mall. En snabb översikt, å andra sidan, är vanligen ganska liten och ingår sålunda direkt.

Vad vi ska bygga i nästa del

... är helt upp till dig. Det finns en hel del synpunkter du kan utforma men det är ganska presumptuöst att jag väljer en. Således ber jag dig, läsaren, att föreslå en syn att täcka i nästa del genom en kommentar i kommentarfältet nedan. Glöm inte att berätta för mig vilken som ska täcka nästa!

Det sista ordet

Och vi är klara! Idag skapade vi den första bilden av vårt anpassade Magento-tema, produktvyn tillsammans med att se hur Magento låter oss lägga till sidspecifika tillgångar och innehåll. 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!

Koda