Magento för Designers Del 6

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 sjätte delen kommer vi att bygga en av de mest efterfrågade funktionerna: få en produktfönstret på hemsidan. 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
Del 6: Bygga hemsidan, med ett innehållsreglage

En snabb återställning

I den sista delen byggde vi produktinformationssidan och tittade på hur data extraheras och visas i ett typiskt Magento-tema.

Vi tittade också på de olika kärnmetoder som vårt tema använder för att få olika media och data om vår produkt. Jag hoppas att du kommer ihåg åtminstone en sliver av den informationen, därför att vi ska använda den igen idag.

Vad bygger vi idag?

Idag bygger vi alla viktiga hemsidor. Som alltid kommer jag att hålla det så enkelt som möjligt och släppa bort eventuella externa funktioner. Olika butiker har olika innehåll på sina hemsidor. En av de mest populära och definitivt en av de mest efterfrågade funktionerna är att visa en JavaScript-driven innehållsreglage med specialfunktioner. Jag vet att det låter intressant och du kliar för att komma igång. Låt oss börja!

Mål för sidan

Som med våra andra sidor är våra mål för den här specifika sidan relativt enkla. Vi vill ha en enkel skjutreglage som visar specifika produkter i en snygg skjutreglage. Således har jag utarbetat en kort lista över element som jag tror det behöver:

JavaScript-reglaget på hemsidan
Slider behöver en catchy bild till vänster för att locka uppmärksamheten på produkten
I rätt del kommer vi att inkludera produktens namn, pris och en kort beskrivning
En mini-navigering i reglaget för att växla mellan olika bilder
Och viktigast av allt, lita inte på en förlängning för att få de presenterade objekten

Det är allt. Jag vill behålla det så enkelt som möjligt och sålunda valt att inte göra det. Vi kommer naturligtvis att behöva arbeta med både framsidan och baksidan för att uppnå alla våra mål.

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.

       
  Zonda F
 700,000.00 
 Pagani Zonda är en sportig bil tillverkad av Pagani i Italien.

Vid denna tidpunkt är det här ganska grundläggande. hem-bildspel är behållaren vi förpackar hela bildspelet med och kommer att vidarebefordras till JavaScript som är ansvarigt för reglaget.

Varje bild är invecklad av en div som heter glida. Insidan har vi två flytande behållare: en för bilden och den andra för informationen om själva produkten.

Det handlar om allt som finns till det. Vi kan gå vidare till stylingdelen nu.

Steg 2 - CSS

 / * Hemsida * / .slide clear: both; överflöde: auto; vaddering: 10px; bredd: 898px; gränsen: 1px solid # E1E1E1; bakgrund: # F6F6F6;  .product-image float: left; bredd: 650px; vaddering: 10px; gränsen: 1px solid # E1E1E1; bakgrund: #FAFAFA;  .product-detaljer float: left; bredd: 190px; marginal: 0 0 0 20px;  .product-details .price margin: -15px 0 0 0; färg: # 7db000;  .product-detaljer p marginal: 10px 0 0 0;  #nav position: absolute; topp: 255px; höger: 250px; z-index: 2000;  #nav en margin-right: 10px; höjd: 5px; bredd: 5px; z-index: 1000; flyta till vänster; textindelning: -9999px; markör: pekare; gränsen: 1px solid #fff; bakgrund: #eee;  #nav a: svep gräns: 1px solid #fff; bakgrund: # 999;  #nav a.activeSlide border: 1px solid # 444; bakgrund: # 333;

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

Det enda som ska noteras är deklarationen för klassen Active. Den här klassen är tilldelad den aktuella bildens respektive navigeringsankare.

Steg 3 - Ställa in vår butik

Det första vi behöver göra är att ställa in en separat kategori som vi kan tilldela alla produkter som vi behöver visas på vår skjutreglage. Klicka på katalog menyn och sedan vidare kategorier. Välja lägg till ny rotkategori.

Ange ett valfritt namn och välj sedan nej för är aktiv falla ner. Vi vill inte att den ska visas i andra delar av webbplatsen.

När den nya kategorin har sparats kan du hitta det ID den har tilldelats. Notera detta nere. Vi behöver det för senare.

Steg 4 - Skapa vår kärnkod

Vi använder en enda mallfil för att dra ut relevant information, formatera den efter behov och visa allt. Du har fullständig frihet angående namn och plats för den här filen, men för att hålla det enkelt, har jag namngett det featured.phtml och placerade den in katalog / produkt / featured.phtml. Kom ihåg att detta går in i din mallmapp, inte din layoutmapp.

Innehållet i filen ser ut så här. Oroa dig inte för längden, vi ser på varje del som fungerar efter koden.

 addAttributeToSelect (array ('namn', 'pris', 'small_image', 'short_description'), 'inre') -> addCategoryFilter (Mage :: getModel ('katalog / kategori') -> load ($ cat_id)); om (! $ _ productCollection-> count ()): echo $ this -> __ ('Det finns inga produkter som matchar urvalet.'); annars:?>     getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ produkt, 'small_image'))>>> htmlEscape ($ this-> getImageLabel ($ _ produkt, 'small_image'))>> /> 
  hämta namn(); ?>
 getFinalPrice (), 2);?> 
 getShortDescription (); ?>

Här är den första delen:

 $ cat_id = "2";

Först måste vi ange ID för den kategori som vi vill dra i våra produkter. I vårt fall blir detta 2, ID för den kategori som vi just skapat.

 $ _productCollection = Mage :: getResourceModel ('catalog / product_collection') -> addAttributeToSelect (array ('namn', 'pris', 'small_image', 'short_description'), 'inner') -> addCategoryFilter (Mage :: getModel "katalog / kategori) -> last ($ cat_id));

Det ser lite komplicerat ut, men låt mig försäkra dig, det är väldigt enkelt. För att uttrycka det på lekman sänder vi väsentligen i ID-en för den kategori vi behöver genom variabeln cat_id och be Magento att hämta namn, pris, bild och kort beskrivning av de produkter som matchar. Just nu skulle jag råda dig att inte lura med resten om du inte är väl känd i MVC och andra aspekter av Magento arkitektur.

 om (! $ _ productCollection-> count ()): echo $ this -> __ ('Tyvärr, inga objekt matchade dina urvalskriterier'); annars:?>

Vi måste kontrollera om vi har matchande föremål, eller hur? Det är vad vi gör här. Bara se till att vi har matchande föremål. Om inte, visar vi ett fel.

Låt oss börja loopa genom vår produktsamling!

 getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ produkt, 'small_image'))>>> htmlEscape ($ this-> getImageLabel ($ _ produkt, 'small_image'))>> />

 hämta namn(); ?>
 getFinalPrice (), 2);?> 
 getShortDescription (); ?>

Om du har läst den föregående delen av denna serie måste den här koden vara ganska bekant. Vi använder Magento's bakade metoder för att hämta media relaterade till vår produkt.

Det andra stycket kan se lite annorlunda ut, för i stället för att använda lite mer abstraherade metoder använde jag närmare benmetoder för att direkt förvärva de data vi behöver.

Om du känner dig lite förvirrad här, gå bara igenom ovanstående kod en mer. Metoderna är ganska förklarande. Det enda hindret bör vara hur vi förvärvar själva bilden: vi ber en av våra hjälpare att skaffa bilden och ändra storlek på den storlek vi behöver. Inget mer till det.

Observera att vi öppnar och stänger a glida div varje gång vår loop löper. Detta är att inkapsla varje produkts information med ett behållarelement för att göra det enkelt för oss att skapa en reglage senare.

Och med detta är vår grundläggande PHP-kod klar.

Steg 5 - JavaScript

Det är ingen mening att helt uppfinna hjulet här, eftersom kärnpunkten i serien är på Magento. Således använder vi ett utmärkt plugin för att skapa vår reglage idag: jQuery Cycle plugin.

Men först, gå till root / js och skapa en mapp som heter cirrus. Olika människor har olika sätt att organisera sig här. Jag föredrar att ha ett temas JS-skilt istället för att organisera dem per källa. Vi behöver en kopia av jQuery [1.4 förhoppningsvis], den senaste cykelpluggen och en anpassad scriptfil, som jag namnger mocka.

Här är innehållet i vår JS-fil.

 (funktion ($) $ (dokument) .ready (funktion () $ ('# home-slideshow') .before ('') .cykel (fx:' blekna ', hastighet: 1500, timeout: 5000, paus: 1, fördröjning: 5000, personsökare:' #nav '); ); ) (JQuery)

Först upp märker vi att vi förpackar allt inne i a (funktion ($) // Kod) (jQuery) blockera. Detta är säker på att jQuery inte stämmer överens med något annat medföljande bibliotek.

Dokumentet färdigt block är som alltid att se till att vår kod körs först efter att alla sidans tillgångar är laddade eftersom Magento tycker om att lägga våra JavaScript-filer högst upp.

Initialisering av plugin är ganska enkelt. Skriv bara in huvudbehållarens ID, hem-bildspel i vårt fall och borta går vi. Jag har just tweaked några av alternativen för att göra det göra vår budgivning.

Något att notera är att vi dynamiskt skapar och positionerar vår behållare för navigationselementen i DOM med JavaScriptS. Detta element behövs bara om JavaScript är aktiverat. Om det inte är så vill vi inte ha en tom, oanvändbar kod på vår sida.

Vi passerar också i väljaren navigeringsbehållaren till skjutreglaget.

Det är allt. JavaScript-delen av vår kod är klar.

Steg 6 - Ställa in vår hemsida

Nu när allt vårt grundarbete har slutförts, kan vi äntligen konfigurera vår hemsida nu.

Klicka på CMS-menyn och välj sidor alternativ. Klicka på hemsidan på den resulterande sidan.

Den första fliken bör vara ganska självförklarande. Se till att vår sida är aktiverad.

På innehållsfliken, se till att du anger följande när du avaktiverat redigeraren:

 block type = "catalog / product_list" block_id = "featured.products" template = "katalog / produkt / featured.phtml"

Detta är Magentos metod att inkludera nödvändiga block. Vi bara ge det ett ID för att hänvisa det till och peka på det till vår anpassade mall.

På fliken Design ändrar du layoutmallen till 1 kolumn eftersom vi använder den för allt och anger sedan följande i layoutuppdatering xml fält.

  css / home.css

Kom ihåg hur när vi byggde produktsidan inkluderade vi anpassad CSS i sidens layoutfil för att säkerställa att hela kodbasen inte är laddad för varje sida? Vi gör väsentligen samma här. Istället för att skapa en XML-fil bara för detta tillåter Magento oss att skriva in det här direkt via gränssnittet.

Vi laddar bara våra anpassade CSS, våra JS-bibliotek och skriptfilen som innehåller all vår kod.

Klicka på "spara" för att spara alla våra framsteg, tömma Magento cache och titta på den vackra skjutreglaget på din hemsida glida igenom i sin excruciatingly lovely glory!

Vad vi ska bygga i nästa del

... är helt upp till dig. Jag har redan täckt nästan all relevant information för att anpassa alla visningar och gå igenom varje vy är helt kontraintuitiv. Således har jag kommit fram till att allt som finns kvar är hur man skapar en anpassad modul och jag tror att den här serien kommer att ha sin kurs. Jag kan skriva en snabb Magento tweaks och optimering hur-om tillräckligt med människor visar intresse för en sådan artikel.

Om du känner att något annat måste täckas innan denna serie kommer till slut, tveka inte att lämna en kommentar nedan för att låta mig veta!

Det sista ordet

Och vi är klara! Idag lärde vi oss att skapa en anpassad hemsida komplett med en reglage som visar utvalda produkter. Vi lärde oss också att göra allt detta utan att förlita sig på en förlängning från tredje part och istället kodar allt detta själva. 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 en anteckning. Lycklig kodning!

Koda