Magento Theme Development Hemsida, Del 3

Nu när vi helt anpassat den första halvan av hemsidan måste vi ändra innehållet på hemsidan nästa. Om vi ​​tittar på vår HTML-design, har hemsidan innehållsavsnitt bara ett rubrik och en karusell för de senaste produkterna. Det finns en Magento-widget som vi kan använda för att visa de senaste produkterna på hemsidan. Egentligen, om vi tittar på vår nuvarande hemsida, har den redan den senaste widgeten på den, men vi måste ändra den för att matcha våra designkrav.

Om vi ​​tittar på innehållet på vår hemsida genom att gå till Admin panel> CMS> Sidor> Madison Island> Innehåll, vi ser att det bara finns en rad PHP-kod (annat än vissa stilkoder), dvs .:

widget type = "katalog / product_widget_new" display_type = "new_products" products_count = "5" template = "katalog / produkt / widget / nytt / innehåll / new_grid.phtml"

Så i princip kommer allt innehåll från hemsidan från denna mall (som bara är en mall för att visa nya produkter). Vi ska kopiera den här filen från RWD-temat till vårt nya tema, i Katalog / produkt / widget / new / innehåll / new_grid.phtml, och börja redigera den så att den ser ut som vår HTML-design. Om vi ​​tittar på den aktuella koden i den här filen är det:

getProductCollection ()) && $ _products-> getSize ()):?> 
 
 
__ ('Nya produkter')?>
 
 
 getPagerHtml ()?> getColumnCount (); ?>  
 getItems () som $ _product):?> 
  getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> ">   
 
getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?>) ">hjälpar ('katalog / utgång') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getPriceHtml ($ _ produkt, true, '-widget-new-grid')?> getReviewsSummaryHtml ($ _ product, 'short')?> 
 isSable ()):?> __ ('Lägg i varukorgen')?>  
__ ('Slut i lager')?>
  
 hjälpar ('önskelista') -> isAllow ()):?> 
getAddToWishlistUrl ($ _ product)?> ">__ ('Lägg till i önskelista')?>
  getAddToCompareUrl ($ _ product)):?> 
| ">__ ('Lägg till jämförelse')?>
  
 
 
 
  
 
 
  

När vi tittar på vår HTML-kod för det här avsnittet ser det ut så här:

 
 
Varm Produkter
 
 
 
 
 
 
  
 Lägg till i kundvagn 
 
Iphone 5s Gold 32 Gb 2013
 
$ 451,00
 
 
 
 
 
 

Så börjar vi genom att plugga in de dynamiska taggarna i den här HTML-koden. Anledningen till att jag har visat dig den aktuella koden för den här filen är så att du kan hitta de nödvändiga dynamiska taggarna från den koden och sätta dem i HTML.

Vi behöver inte göra några ändringar i div-strukturen, så den första raden som behöver ändras är h3 märka:

Varm Produkter

Vi måste ersätta den statiska texten till Varm och Produkter med Magento $ detta taggar, så att Magento senare kan översätta dessa enligt användarinställningar. Så kommer denna linje att bli något så här: 

__ ('Ny')?>__ ('Produkter')?>

Nästa rad som behöver ändras är bild tagg, där vi behöver ändra den aktuella sökvägen för bildkällan. För närvarande ser det ut så här:

Vi ändrar det till det här:

Här får denna dynamiska tagg den faktiska lilla bilden av produkten med en storlek på 236 x 357 px. Därefter måste vi ändra detta Lägg till i kundvagn länk:

Lägg till i kundvagn

Vi ändrar det till det här:

getProductUrl ()?> "> isSable ()):?> __ ('Lägg i varukorgen')?>  __ ('Slut i lager')?>   

Den har en dynamisk URL för produktdetaljer sidan, och visar bara "Lägg i varukorgen" om produkten är tillgänglig. Annars kommer det att visas "Slut i lager". Slutligen uppdaterar vi produktpriset och namnet genom att ersätta den här raden:

Iphone 5s Gold 32 Gb 2013
 
$ 451,00
 

Med den här: 

hjälpar ('katalog / utgång') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
getPriceHtml ($ _ produkt, true, '-widget-new-grid')?>
 

Detta kommer att få vår enkla produktvisning klar, men för att iterera den över alla nya produkter måste vi bifoga vårt objekt div i en slinga, så vi lägger till den här raden ovanpå:

getItems () som $ _product):?>

Och den här raden i slutet av den att avsluta slingan:

Så hela koden för den filen blir så här:

getProductCollection ()) && $ _products-> getSize ()):?> 
 
 
__ ('Ny')?>__ ('Produkter')?>
 
 
 getItems () som $ _product):?> 
 
 
 
  
 getProductUrl ()?> "> isSable ()):?> __ ('Lägg i varukorgen')?>  __ ('Slut i lager')?>   
 
hjälpar ('katalog / utgång') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
getPriceHtml ($ _ produkt, true, '-widget-new-grid')?>
 
 
 
 
  
 
 
  

Uppdatera din hemsida nu. Det ska ha en perfekt fungerande och stilad ny produktsektion, som skulle se ut så här:

Nu behöver vi ändra sidfoten innan vi är färdiga med hemsidan. Om vi ​​tittar på vår HTML-design, har sidfoten fyra avsnitt. Den första visar "Våra varumärken", den andra visar en prenumerationsruta och sociala medier, den tredje visar några webbadresser och den fjärde enbart upphovsrättsmeddelandet.

Den fjärde sektionen är redan närvarande i vårt tema, så vi behöver bara ändra innehåll och stilar, men de andra tre komponenterna vi måste lägga till i vårt tema. 

För att lägga till en komponent skapar vi ett nytt statiskt block från adminpanelen och lägger in vårt innehåll där. Så ska vi gå till Admin panel> Statiska block> Lägg till nytt block, och lägg till ett nytt block för Våra märken sektion. Vi ändrar blockrubriken till "Våra varumärken", ange identifikatorn till "our_brands", välj butiksvy av "Alla butiksvyer" och lägg det här i innehållsdelen:

Vår  Märken
 
<>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Om du tittar noga är det samma kod som vi har i vår HTML för det här avsnittet. Vi har just ändrat bildernas relativa vägar medan du manuellt laddar upp de nya bilderna från WYSIWYG-redigeraren. Spara blocket och börja skapa ett annat block för registreringsdelen.

För det här andra blocket använder vi blockrubriken "Överfot". För identifieraren använder vi "above_footer", och för innehållet kommer vi att ange den här koden:

Nu måste vi skapa länkblocket på ett liknande sätt. Vi skapar ett nytt block med blockrubriken "Footer Links", med identifieraren som "footer_links" och lägger in den här koden:

 
Kund Stöd
 
 
FAQ
 
Betalningssätt
 
Bokningstips
 
Infomation
 
 
 
 
Kund Stöd
 
 
FAQ
 
Betalningssätt
 
Bokningstips
 
Infomation
 
 
 
 
Kund Stöd
 
 
FAQ
 
Betalningssätt
 
Bokningstips
 
Infomation
 
 
 
 
Kontakta Info
 
Anwar ul Haq, Kalifornien
 
Ring oss: (123) 398 5063
 
Ring oss: (123) 398 5063
 
E-post: abs @ tutsplus
 
 

Alla dessa länkar knyter ingenstans nu, men du kan senare ändra dem. Bildlänkarna genereras igen dynamiskt med hjälp av uppladdningssegmentet i WYSIWYG-redigeraren. Hela resten av koden kopieras och klistras bara från HTML.

Spara det här blocket också och kolla hemsidan, men du kommer fortfarande inte att se de tre blocken som dyker upp. Detta beror på att du måste berätta för Magento exakt var du ska visa dessa nya block, och det vi kan göra från layouten. För detta, gå till layout / local.xml fil och lägg till dessa rader, strax innan stängningen av standard märka.

  footer_links   above_footer   våra märken   

Denna XML-kod berättar i grunden Magento att de två nya blocken ska läggas till i Magento-sidfoten. Slutligen måste vi ringa dessa block från sidfotens phtml-fil. Därför skapar vi en ny footer.phtml-fil på den här platsen: mall / sida / html / footer.phtml.

Lägg till den här koden i det här footer.phtml fil: 

 
 
 getChildHtml ("our_brands")?> 
 
 
 
 
 
 
 getChildHtml ("above_footer")?> 
 
 
 
 
 
 getChildHtml ("footer_links_sm")?> getChildHtml ()?> 
 
 
 
 
 
 
 
getCopyright ()?>
 
 
 
 
 
 
 

Detta är bara enbart HTML-kod, där alla sektionskoder ersätts med relevanta länkar till Static Blocks. Och upphovsrättssektionen ersätts med en dynamisk tagg för upphovsrätt.

Kolla nu hemsidan, och det ska nu visa dessa nyskapade Static Blocks och ska se så här ut:

Vår hemsida är nu klar. Det enda som kvar är en viss typ av fixering, och det gör vi i nästa artikel.