Magento Theme Development Kategori Sida, Del 1

Grattis till att du fyller i startsidan för ditt nya tema och börjar med nästa sida. I denna handledning börjar vi ändra kategorisidan i vårt Magento-tema.

Kategorisidan består i huvudsak av fyra sektioner: verktygsfältet, rutnätsläge, listläge och sidofältet. Vi behandlar de tre första avsnitten i den här artikeln och sedan i nästa handledning ändrar vi sidofältet och gör några CSS-korrigeringar.

Om du tittar på någon kategorisida i vårt tema ser det för tillfället ut så här:

Medan vi vill få det att se ut så här:

Om du märker, har vår nuvarande kategori sida breda tomma mellanslag till vänster och höger. Vi måste ta reda på varför innehållsområdet inte tar tillräckligt med utrymme. Låt oss först titta på vilken mall som är ansvarig för att göra denna sida. Vi kan göra detta genom att aktivera malltips från adminpanelen, som du har gjort flera gånger tidigare i den här serien.

Här fick vi reda på att det hade en tre-kolumnlayout som gjordes för denna sida, och det här är anledningen till att det finns tomt stort utrymme till vänster, eftersom inga block är tilldelade till vänster sidofält.

För att göra den här sidan lik vår HTML-design, ändrar vi den till två kolumner. Från adminpanelen, gå till Katalog> Hantera kategorier> Anpassad design> Sidlayout och ändra den till 2 kolumner med vänster bar.

Nu ska vår sida ha en layout med två kolumner med ett sidofält på vänster sida, vilket var kravet på vår design.

Som i den här artikeln ändrar vi bara rätt område (inte sidofältet), vi startar redigeringsprocessen från verktygsfältet. Med malltips på, kontrollerar vi de phtml-filer som är ansvariga för att göra det genom att återigen aktivera malltipset.

När vi upptäckte det, är den här filen: \ template \ catalog / product / list / toolbar.phtml.

Vi ska kopiera det i vårt nya tema, jämföra det med koden i vår HTML-fil och börja sedan göra ändringar. Vår nuvarande kod i verktygsfältet.phtml-filen ser så här ut:

getCollection () -> getSize ()):?>  isExpanded ()):?>  isEnabledViewSwitcher ()):?>  getModes (); ?> 1):?> __ ('Visa som')?> getModes () som $ _code => $ _ label):?> isModeActive ($ _ code)):?>   getModeUrl ($ _ code)?> "title ="">    
   __ ('Sortera efter')?>  getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Stigande ordning')?> ">__ ('Stigande ordning')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Stigande Fallande ordning')?> ">__ ('Stigande ordning')?>  
 
    getLastPageNum ()> 1):?>  __ ('% s-% s av% s', $ this-> getFirstNum (), $ this-> getLastNum (), $ this-> getTotalNum ())?> 
   __ ('% s Item (s)', $ this-> getTotalNum ())?> 
   __ ('Show')?>  
 
 getPagerHtml ()?>

Vi måste jämföra den med HTML-koden ansvarig för verktygsfältet, vilket är detta:

  ListGrid
 Sortera efter :  
 Show :

Vi börjar ändra koden genom att lägga in de dynamiska taggarna och olika för och om uttalanden. Till exempel, för att göra länkarna för rutnät och listningslägen för visningsläget lägger vi till den här koden:

1):?> getModes () som $ _code => $ _ label):?> isModeActive ($ _ code)):?> "href =" # ">  "href ="getModeUrl ($ _ code)?> ">

Vad den här koden i huvudsak gör är iterera över alla aktiva lägen (lista och rutnät), och anteckna sedan en ankerkod för var och en av dessa. Här har vi mycket smart, vi har tilldelat olika klasser och titlar till dem, med hjälp av $ _label variabel, vilket kommer att vara annorlunda för varje läge.

På samma sätt kan du ändra sortera efter och begränsare dela dig själv genom att jämföra den med själva verktygsfältet.phtml-filen. Efter ändringarna kommer den sista koden för den här filen att se ut så här:

getCollection () -> getSize ()):?>  isExpanded ()):?>  isEnabledViewSwitcher ()):?>  getModes (); ?> 1):?> getModes () som $ _code => $ _ label):?> isModeActive ($ _ code)):?> "href =" # ">  "href ="getModeUrl ($ _ code)?> ">    
  Sortera efter :  getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Stigande ordning')?> ">__ ('Stigande ordning')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Stigande Fallande ordning')?> ">__ ('Stigande ordning')?>  
 __ ('Show:')?>  
 
  getPagerHtml ()?>

Och om vi uppdaterar sidan nu ser det ut så här. Allt är på plats, men CSS är helt avstängd, vilket vi fixar i nästa artikel.

Nu är det dags att ändra de aktuella produkterna som visas på den här sidan. Produkter här kan visas på två olika sätt, dvs listläge och rutnätsläge. Om vi aktiverar malltips för att ta reda på filen som är ansvarig för den här delen kommer vi att se att koden för både rutnät och listläge skrivs i samma fil, som är frontend \ rwd \ default \ mall \ catalog / product / list .phtml.

Listkoden i denna fil finns på rad 44 till 116, vilket är detta:

 getMode ()! = 'rutnät'):?>      getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ produkt, 'small_image'), null, true)?> ">         stripTags ($ _ product-> getName (), null, true); ?> getProductUrl ()?> "title ="">productAttribute ($ _ product, $ _product-> getName (), 'name'); ?>
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product)?>  getChild ('name.after')) $ _nameAfterChildren = $ this-> getChild ('name.after') -> getSortedChildren (); foreach ($ _nameAfterChildren som $ _nameAfterChildName) $ _nameAfterChild = $ this-> getChild ('name.after') -> getChild ($ _ nameAfterChildName); $ _NameAfterChild-> setProduct ($ _ produkt); echo $ _nameAfterChild-> toHtml (); ?> 
  getPriceHtml ($ _ produkt, sant)?> 
  canConfigure () && $ _product-> isSable ()):?> 
 getStockItem () && $ _product-> getStockItem () -> getIsInStock ()):?> __ ('Visa detaljer')?> "Href ="getProductUrl ()?> ">__ ('Visa detaljer')?>
  __ ('Slut i lager')?>
   hjälpar ('önskelista') -> isAllow ()):?> hjälpar ("önskelista") -> getAddUrl ($ _ product)?> ">__ ('Lägg till i önskelista')?>
  getAddToCompareUrl ($ _ product)):?> | ">__ ('Lägg till jämförelse')?>
  
 
  productAttribute ($ _ product, $ _product-> getShortDescription (), 'short_description')?> getProductUrl ()?> "title ="">__ ('Läs mer')?>

Vi måste nu jämföra den med HTML-listkoden i productlist.html i vår HTML-mall.

  Ny
 
  Lincoln Corner Unit Products
 02 granskning (er)
 Proin lectus ipsum, gravida och mattis vulputate, tristique ut lectus. Sed et lorem nunc. Förstärkningar är en viktig del i fåglarna, och det är en ultimativ uppgift om cubilia curae. Proin lectus ipsum, gravida etds mattis vulputate, tristique ut lectus. Sed et lorem nunc ... 
  450,00^$450,00^$

Att ändra denna kod är ganska enkel. Vi använder dessa initialiseringslinjer:

 getMode ()! = 'rutnät'):?>

Sedan lägger vi en för loop runt li märka:

Och slutligen ersätter vi produktnamn, pris, beskrivning, bildfilslänk och URL med de dynamiska taggarna. Den slutliga koden kommer att se ut så här:

 getMode ()! = 'rutnät'):?>        
  productAttribute ($ _ product, $ _product-> getName (), 'name'); ?>
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product)?>  
 productAttribute ($ _ product, $ _product-> getShortDescription (), 'short_description')?>
  getPriceHtml ($ _ produkt, sant)?>

Nu, om vi uppdaterar sidan, ser vi att kategorisidan i listningsläge kommer att se ut så här. Jag vet att det inte är vad vi vill att det ska se ut, men all vår HTML är på plats, så nu behöver vi bara ändra sin CSS, vilket vi gör i nästa handledning.

Nu kommer till rutnätläge, är koden för det från 118 till 176 i samma list.phtml-fil.

 räkna ()?> getColumnCount (); ?>      getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ produkt, 'small_image'), null, true)?> ">     getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> ">productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getChild ('name.after')) $ _nameAfterChildren = $ this-> getChild ('name.after') -> getSortedChildren (); foreach ($ _nameAfterChildren som $ _nameAfterChildName) $ _nameAfterChild = $ this-> getChild ('name.after') -> getChild ($ _ nameAfterChildName); $ _NameAfterChild-> setProduct ($ _ produkt); echo $ _nameAfterChild-> toHtml (); ?> getPriceHtml ($ _ produkt, sant)?> getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product, 'short')?>   canConfigure () && $ _product-> isSable ()):?>  getStockItem () && $ _product-> getStockItem () -> getIsInStock ()):?> __ ('Visa detaljer')?> "href ="getProductUrl ()?> ">__ ('Visa detaljer')?>  __ ('Slut i lager')?>
   hjälpar ('önskelista') -> isAllow ()):?> hjälpar ("önskelista") -> getAddUrl ($ _ product)?> ">__ ('Lägg till i önskelista')?>
  getAddToCompareUrl ($ _ product)):?> | ">__ ('Lägg till jämförelse')?>

HTML-koden ser ut så här i filen productgrid.html i vår HTML-mall:

       Läs mer 
 Iphone 5s Gold 32 Gb 2013
 $ 451,00

Ändring av denna del kommer att vara ganska lik vad vi gjorde i listans del. Först och främst gör vi en del initialisering, samma som i standardlisten.phtml-filen.

 räkna ()?> getColumnCount (); ?>

Nästa lägger vi varann li föremål inuti en för loop för att iterera över alla produkter.

Slutligen ersätter vi produktattributen som produktnamn, pris, beskrivning etc. med relevanta dynamiska taggar. Du kan hitta dem ganska bekvämt från den aktuella list.phtml-filen.

Den slutliga koden kommer att se ut så här:

 räkna ()?> getColumnCount (); ?>         getProductUrl ()?> "> Lägg i varukorgen 
 stripTags ($ _ product-> getName (), null, true)?>
 getPriceHtml ($ _ produkt, sant)?>

Nu om du uppdaterar sidan kommer nätverksläget att se ut så här:

I den här artikeln har vi ändrat verktygsfältet och listan och rutnätavsnitt på den här sidan. I nästa artikel ändrar vi sidofältet och gör några CSS-stilskorrigeringar. I slutet av nästa artikel kommer vår kategorisida att se ganska ut som HTML-designen.

Koda