Magento Theme Development Category Page, Deel 1

Gefeliciteerd met het voltooien van de startpagina van uw nieuwe thema en te beginnen met de volgende pagina. In deze tutorial beginnen we met het aanpassen van de categoriepagina van ons Magento-thema.

De categoriepagina bestaat in wezen uit vier secties: de werkbalk, rastermodus, lijstmodus en de zijbalk. We behandelen de eerste drie secties in dit artikel en in de volgende tutorial zullen we de zijbalk aanpassen en een aantal CSS-fixes uitvoeren.

Als je naar een categoriepagina van ons thema kijkt, ziet het er op dit moment ongeveer zo uit:

Hoewel we het er zo willen laten uitzien:

Als u opmerkt, heeft onze huidige categoriepagina brede lege velden aan de linker- en rechterkant. We moeten uitzoeken waarom het inhoudsgebied niet voldoende ruimte inneemt. Laten we eerst kijken welke sjabloon verantwoordelijk is voor het weergeven van deze pagina. We kunnen dit doen door sjabloontoetsen in te schakelen vanuit het admin-paneel, zoals u al meerdere keren eerder in deze serie heeft gedaan.

Hier kwamen we erachter dat het een lay-out met drie kolommen had die deze pagina renderde, en dit is de reden dat er lege brede ruimte aan de linkerkant is, omdat er geen blokken zijn toegewezen aan de linkerzijbalk.

Om deze pagina eruit te laten zien als ons HTML-ontwerp, veranderen we deze in twee kolommen. Ga vanuit het beheerdersvenster naar Catalogus> Categorieën beheren> Eigen ontwerp> Pagina-indeling en verander het in 2 kolommen met linker balk.

Nu zou onze pagina een layout met twee kolommen moeten hebben met een zijbalk aan de linkerkant, net als de vereiste van ons ontwerp.

Zoals in dit artikel veranderen we alleen het juiste gebied (niet de zijbalk), we starten het bewerkingsproces vanaf de werkbalk. Met hints voor sjablonen controleren we de phtml-bestanden die verantwoordelijk zijn voor het renderen door de sjabloonhints opnieuw in te schakelen.

Zoals we erachter kwamen, is dit bestand: \ template \ catalog / product / list / toolbar.phtml.

We kopiëren dat in ons nieuwe thema, vergelijken het met de code van ons HTML-bestand en beginnen dan met het aanbrengen van wijzigingen. Onze huidige code van het bestand toolbar.phtml ziet er als volgt uit:

getCollection () -> getSize ()):?>  isExpanded ()):?>  isEnabledViewSwitcher ()):?>  getModes (); ?> 1):?> __ ('Weergeven als')?> getModes () als $ _code => $ _ label):?> isModeActive ($ _ code)):?>   getModeUrl ($ _ code)?> "title ="">    
   __ ('Sorteren op')?>  getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Stel Oplopende richting in')?> ">__ ('Stel Oplopende richting in')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Van hoog naar laag sorteren')?> ">__ ('Van hoog naar laag instellen')?>  
 
    getLastPageNum ()> 1):?>  __ ('% s-% s van% s', $ this-> getFirstNum (), $ this-> getLastNum (), $ this-> getTotalNum ())?> 
   __ ('% s Item (s)', $ this-> getTotalNum ())?> 
   __ ('Weergeven')?>  
 
 getPagerHtml ()?>

We moeten het vergelijken met de HTML-code die verantwoordelijk is voor het werkbalkgedeelte, namelijk:

  ListGrid
 Sorteer op :  
 Laten zien :

We gaan deze code aanpassen door de dynamische tags in te voeren en anders voor en als statements. Om de koppelingen voor raster- en lijstmodi voor de weergavemodus weer te geven, voegen we deze code toe:

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

Wat deze code in wezen doet, is herhalen voor alle actieve modi (lijst en raster) en vervolgens een ankertag voor elk van deze weergeven. Hier hebben we heel slim verschillende klassen en titels aan toegewezen, met behulp van de $ _label variabele, die voor elke modus verschillend zal zijn.

Op dezelfde manier kunt u de sorteer op en limiter zelf delen door het te vergelijken met het feitelijke werkbalk.phtml-bestand. Na de wijzigingen ziet de definitieve code voor dit bestand er ongeveer zo uit:

getCollection () -> getSize ()):?>  isExpanded ()):?>  isEnabledViewSwitcher ()):?>  getModes (); ?> 1):?> getModes () als $ _code => $ _ label):?> isModeActive ($ _ code)):?> "href =" # ">  "href ="getModeUrl ($ _ code)?> ">    
  Sorteer op :  getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Stel Oplopende richting in')?> ">__ ('Stel Oplopende richting in')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Van hoog naar laag sorteren')?> ">__ ('Van hoog naar laag instellen')?>  
 __ ('Show:')?>  
 
  getPagerHtml ()?>

En als we de pagina nu vernieuwen, ziet het er ongeveer zo uit. Alles is aanwezig, maar de CSS is redelijk af, wat we in het volgende artikel zullen oplossen.

Nu is het tijd om de daadwerkelijke producten die op deze pagina worden weergegeven te wijzigen. Producten hier kunnen op twee verschillende manieren worden getoond, d.w.z. lijstmodus en rastermodus. Als we sjabloontoetsen inschakelen om te achterhalen welk bestand verantwoordelijk is voor dit gedeelte, zien we dat de code voor zowel de rooster- als de lijstmodus in hetzelfde bestand is geschreven, namelijk frontend \ rwd \ default \ template \ catalog / product / list .phtml.

De lijstcode in dit bestand staat op regels 44 t / m 116, en dit is:

 getMode ()! = 'grid'):?>      getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> ">         stripTags ($ _ product-> getName (), null, true); ?> getProductUrl ()?> "title ="">productAttribute ($ _ product, $ _product-> getName (), 'name'); ?>
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product)?>  getChild ('naam.after')) $ _nameAfterChildren = $ this-> getChild ('name.after') -> getSortedChildren (); foreach ($ _nameAfterChildren als $ _nameAfterChildName) $ _nameAfterChild = $ this-> getChild ('name.after') -> getChild ($ _ nameAfterChildName); $ _NameAfterChild-> setProduct ($ _ product); echo $ _nameAfterChild-> toHtml (); ?> 
  getPriceHtml ($ _ product, true)?> 
  canConfigure () && $ _product-> isSaleable ()):?> 
 getStockItem () && $ _product-> getStockItem () -> getIsInStock ()):?> __ ('Details bekijken')?> "Href ="getProductUrl ()?> ">__ ('Details bekijken')?>
  __ ('Niet op voorraad')?>
   helper ('wishlist') -> isAllow ()):?> helper ('wishlist') -> getAddUrl ($ _ product)?> ">__ ('Toevoegen aan verlanglijst')?>
  getAddToCompareUrl ($ _ product)):?> | ">__ ('Toevoegen aan vergelijking')?>
  
 
  productAttribute ($ _ product, $ _product-> getShortDescription (), 'short_description')?> getProductUrl ()?> "title ="">__ ('Meer informatie')?>

We moeten het nu vergelijken met de HTML-lijstcode in productlijst.html in onze HTML-sjabloon.

  nieuwe
 
  Lincoln Corner Unit Products
 02 Review (s)
 Proin lectus ipsum, gravida et mattis vulputate, tristique ut lectus. Sed et lorem nunc. Vestibulum ante ipsum primis in faucibus orci luctus en ultri ces posuere cubilia curae. Proin lectus ipsum, gravida etds mattis vulputate, tristique ut lectus. Sed et lorem nunc ... 
  450.00^$450.00^$

Het wijzigen van deze code is vrij eenvoudig. We gebruiken deze initialisatielijnen:

 getMode ()! = 'grid'):?>

Dan plaatsen we een lus rond de li label:

En als laatste zullen we de productnaam, prijs, beschrijving, afbeeldingsbestandkoppeling en URL vervangen door de dynamische tags. De definitieve code ziet er als volgt uit:

 getMode ()! = 'grid'):?>        
  productAttribute ($ _ product, $ _product-> getName (), 'name'); ?>
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product)?>  
 productAttribute ($ _ product, $ _product-> getShortDescription (), 'short_description')?>
  getPriceHtml ($ _ product, true)?>

Als we nu de pagina vernieuwen, zien we dat de categoriepagina in de lijstmodus er ongeveer zo uitziet. Ik weet dat het niet is wat we willen dat het eruit ziet, maar al onze HTML is aanwezig, dus nu moeten we alleen de CSS aanpassen, wat we in de volgende tutorial zullen doen.

Nu komt de grid-modus, de code daarvoor is van 118 tot 176 in hetzelfde bestand list.phtml.

 count ()?> getColumnCount (); ?>      getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> ">     getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> ">productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getChild ('naam.after')) $ _nameAfterChildren = $ this-> getChild ('name.after') -> getSortedChildren (); foreach ($ _nameAfterChildren als $ _nameAfterChildName) $ _nameAfterChild = $ this-> getChild ('name.after') -> getChild ($ _ nameAfterChildName); $ _NameAfterChild-> setProduct ($ _ product); echo $ _nameAfterChild-> toHtml (); ?> getPriceHtml ($ _ product, true)?> getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product, 'short')?>   canConfigure () && $ _product-> isSaleable ()):?>  getStockItem () && $ _product-> getStockItem () -> getIsInStock ()):?> __ ('Details bekijken')?> "href ="getProductUrl ()?> ">__ ('Details bekijken')?>  __ ('Niet op voorraad')?>
   helper ('wishlist') -> isAllow ()):?> helper ('wishlist') -> getAddUrl ($ _ product)?> ">__ ('Toevoegen aan verlanglijst')?>
  getAddToCompareUrl ($ _ product)):?> | ">__ ('Toevoegen aan vergelijking')?>

De HTML-code ziet er als volgt uit in het productgrid.html-bestand in onze HTML-sjabloon:

       Lees verder 
 Iphone 5s Gold 32 Gb 2013
 $ 451.00

Het aanpassen van dit onderdeel zal behoorlijk lijken op wat we in het lijstgedeelte hebben gedaan. Allereerst zullen we wat initialisatie uitvoeren, hetzelfde als in het standaardbestand list.phtml.

 count ()?> getColumnCount (); ?>

Vervolgens pakken we elk in li item binnen een for-lus om alle producten te itereren.

Ten slotte vervangen we de productkenmerken, zoals productnaam, prijs, beschrijving, enzovoort, met relevante dynamische tags. Je kunt ze vrij gemakkelijk vinden in het eigenlijke list.phtml-bestand.

De definitieve code ziet er als volgt uit:

 count ()?> getColumnCount (); ?>         getProductUrl ()?> "> Aan winkelwagen toevoegen 
 stripTags ($ _ product-> getName (), null, true)?>
 getPriceHtml ($ _ product, true)?>

Als u nu de pagina vernieuwt, ziet de rastermodus er als volgt uit:

In dit artikel hebben we de werkbalk en de lijst- en rastergedeelten van deze pagina aangepast. In het volgende artikel zullen we de zijbalk aanpassen en enkele CSS-stijlfixes uitvoeren. Aan het einde van het volgende artikel ziet onze categoriepagina er ongeveer hetzelfde uit als het HTML-ontwerp.

Code