Magento Theme-Entwicklung Kategorieseite, Teil 1

Herzlichen Glückwunsch, dass Sie die Startseite Ihres neuen Themes abgeschlossen haben und mit der nächsten Seite beginnen. In diesem Tutorial beginnen wir mit dem Ändern der Kategorieseite unseres Magento-Designs.

Die Kategorieseite besteht im Wesentlichen aus vier Abschnitten: der Symbolleiste, dem Rastermodus, dem Listenmodus und der Seitenleiste. Wir werden uns mit den ersten drei Abschnitten dieses Artikels beschäftigen, und im nächsten Tutorial werden wir die Seitenleiste ändern und einige CSS-Korrekturen vornehmen.

Wenn Sie sich eine Kategorieseite unseres Themas ansehen, sieht es derzeit ungefähr so aus:

Während wir es so aussehen lassen wollen:

Wenn Sie feststellen, hat unsere aktuelle Kategorieseite links und rechts große Leerzeichen. Wir müssen herausfinden, warum der Inhaltsbereich nicht genügend Platz beansprucht. Schauen wir uns zuerst an, welche Vorlage für das Rendern dieser Seite verantwortlich ist. Wir können dies tun, indem Sie im Admin-Panel Vorlagenhinweise aktivieren, wie Sie es in dieser Serie bereits mehrmals getan haben.

Hier haben wir herausgefunden, dass diese Seite ein dreispaltiges Layout hat. Aus diesem Grund gibt es auf der linken Seite leeren Platz, da der linken Seitenleiste keine Blöcke zugewiesen sind.

Damit diese Seite wie unser HTML-Design aussieht, ändern wir sie in zwei Spalten. Gehen Sie im Admin-Panel zu Katalog> Kategorien verwalten> Benutzerdefiniertes Design> Seitenlayout und ändern Sie es in 2 Spalten mit linker Leiste.

Jetzt sollte unsere Seite ein zweispaltiges Layout mit einer Seitenleiste auf der linken Seite haben, so wie es die Anforderung an unser Design war.

Da in diesem Artikel nur der rechte Bereich (nicht die Seitenleiste) geändert wird, beginnen wir den Bearbeitungsprozess über die Symbolleiste. Mit Vorlagenhinweisen prüfen wir die für die Wiedergabe verantwortlichen PHP-Dateien, indem wir die Vorlagenhinweise erneut aktivieren.

Wie wir herausgefunden haben, ist diese Datei: \ template \ catalog / product / list / toolbar.phtml.

Wir kopieren das in unser neues Design, vergleichen es mit dem Code unserer HTML-Datei und beginnen dann mit Änderungen. Unser aktueller Code der Datei toolbar.phtml sieht folgendermaßen aus:

getCollection () -> getSize ()):?>  isExpanded ()):?>  isEnabledViewSwitcher ()):?>  getModes (); ?> 1):?> __ ('Anzeigen als')?> getModes () als $ _code => $ _ label):?> isModeActive ($ _ code)):?>   getModeUrl ($ _ code)?> "title ="">    
   __ ('Sortieren nach')?>  getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Aufsteigende Richtung einstellen')?> ">__ ('Aufsteigende Richtung einstellen')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Absteigende Richtung festlegen')?> ">__ ('Absteigende Richtung festlegen')?>  
 
    getLastPageNum ()> 1):?>  __ ('% s-% s von% s', $ this-> getFirstNum (), $ this-> getLastNum (), $ this-> getTotalNum ())?> 
   __ ('% s Element (e)', $ this-> getTotalNum ())?> 
   __ ('Zeigen')?>  
 
 getPagerHtml ()?>

Wir müssen es mit dem HTML-Code vergleichen, der für den Teil der Symbolleiste verantwortlich ist. Dies ist der folgende:

  ListGrid
 Sortiere nach :  
 Show :

Wir werden diesen Code ändern, indem wir die dynamischen Tags einfügen und andere zum und ob Aussagen. Um beispielsweise die Links für Raster- und Listenmodi für den Ansichtsmodus zu rendern, fügen wir folgenden Code hinzu:

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

Im Wesentlichen führt dieser Code eine Iteration über alle aktiven Modi (Liste und Raster) durch und listet dann für jeden dieser Modi einen Anker-Tag auf. Sehr geschickt haben wir ihnen hier verschiedene Klassen und Titel zugewiesen $ _label Variable, die für jeden Modus unterschiedlich ist.

Ebenso können Sie das ändern sortiere nach und Begrenzer Teile sich selbst ab, indem Sie es mit der tatsächlichen Datei toolbar.phtml vergleichen. Nach den Änderungen sieht der endgültige Code für diese Datei etwa so aus:

getCollection () -> getSize ()):?>  isExpanded ()):?>  isEnabledViewSwitcher ()):?>  getModes (); ?> 1):?> getModes () als $ _code => $ _ label):?> isModeActive ($ _ code)):?> "href =" # ">  "href ="getModeUrl ($ _ code)?> ">    
  Sortiere nach :  getCurrentDirection () == 'desc'):?> getOrderUrl (null, 'asc')?> "title ="__ ('Aufsteigende Richtung einstellen')?> ">__ ('Aufsteigende Richtung einstellen')?>  getOrderUrl (null, 'desc')?> "title ="__ ('Absteigende Richtung festlegen')?> ">__ ('Absteigende Richtung festlegen')?>  
 __ ('Zeigen:')?>  
 
  getPagerHtml ()?>

Und wenn wir die Seite jetzt aktualisieren, sieht das ungefähr so aus. Alles ist an Ort und Stelle, aber das CSS ist völlig deaktiviert, was wir im nächsten Artikel korrigieren werden.

Nun ist es Zeit, die auf dieser Seite angezeigten Produkte zu ändern. Produkte hier können auf zwei verschiedene Arten angezeigt werden, d. H. Listenmodus und Gittermodus. Wenn wir Vorlagenhinweise aktivieren, um die für diesen Teil verantwortliche Datei herauszufinden, werden wir sehen, dass der Code sowohl für den Raster- als auch für den Listenmodus in dieselbe Datei geschrieben wird, nämlich Frontend \ rwd \ default \ template \ catalog / product / list .phtml.

Der Listencode in dieser Datei befindet sich in den Zeilen 44 bis 116.

 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 ('name.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 anzeigen')?> "Href ="getProductUrl ()?> ">__('Details ansehen') ?>
  __ ("Nicht vorrätig")?>
   Helfer ('Wunschliste') -> isAllow ()):?> helper ('wishlist') -> getAddUrl ($ _ product)?> ">__ ('Add to Wishlist')?>
  getAddToCompareUrl ($ _ product)):?> | ">__ ('Zum Vergleich hinzufügen')?>
  
 
  productAttribute ($ _ product, $ _product-> getShortDescription (), 'short_description')?> getProductUrl ()?> "title ="">__ ("Weitere Informationen")?>

Wir müssen es jetzt mit dem HTML-Listencode in productlist.html in unserer HTML-Vorlage vergleichen.

  Neu
 
  Lincoln Corner Unit-Produkte
 02 Bewertung (en)
 Proin lectus ipsum, gravida und mattis vulputate, tristique ut lectus. Sed et Lorem Nunc. Vestibulum ante ipsum primis bei Faucibus orci luctus und ultri ces posuere cubilia curae. Proin lectus ipsum, gravida etds mattis vulputate, tristique ut lectus. Sed et Lorem Nunc… 
  450,00^$450,00^$

Das Ändern dieses Codes ist ziemlich einfach. Wir verwenden diese Initialisierungszeilen:

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

Dann platzieren wir eine for-Schleife um die li Etikett:

Schließlich ersetzen wir den Produktnamen, den Preis, die Beschreibung, den Link zu der Bilddatei und die URL durch die dynamischen Tags. Der endgültige Code sieht folgendermaßen aus:

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

Wenn wir nun die Seite aktualisieren, wird die Kategorieseite im Listenmodus in etwa wie folgt aussehen. Ich weiß, es ist nicht so, wie wir wollen, dass es so aussieht, aber unser HTML-Code ist bereits vorhanden. Jetzt müssen wir nur noch das CSS ändern, was wir im nächsten Tutorial tun werden.

Im Rastermodus befindet sich der Code dafür in der gleichen list.phtml-Datei zwischen 118 und 176.

 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 ('name.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 anzeigen')?> "href ="getProductUrl ()?> ">__('Details ansehen') ?>  __ ("Nicht vorrätig")?>
   Helfer ('Wunschliste') -> isAllow ()):?> helper ('wishlist') -> getAddUrl ($ _ product)?> ">__ ('Add to Wishlist')?>
  getAddToCompareUrl ($ _ product)):?> | ">__ ('Zum Vergleich hinzufügen')?>

Der HTML-Code sieht in der Datei productgrid.html in unserer HTML-Vorlage folgendermaßen aus:

       Weiterlesen 
 Iphone 5s Gold 32 GB 2013
 451,00 $

Das Ändern dieses Teils ähnelt dem, was wir im Listenteil gemacht haben. Zunächst werden einige Initialisierungen vorgenommen, wie in der Standarddatei list.phtml.

 count ()?> getColumnCount (); ?>

Als nächstes wickeln wir jeden ein li Element innerhalb einer for-Schleife, um alle Produkte zu durchlaufen.

Zuletzt ersetzen wir die Produktattribute wie Produktname, Preis, Beschreibung usw. durch relevante dynamische Tags. Sie finden sie ganz bequem in der aktuellen list.phtml-Datei.

Der endgültige Code sieht folgendermaßen aus:

 count ()?> getColumnCount (); ?>         getProductUrl ()?> "> In den Warenkorb legen 
 stripTags ($ _ product-> getName (), null, true)?>
 getPriceHtml ($ _ product, true)?>

Wenn Sie nun die Seite aktualisieren, sieht der Rastermodus folgendermaßen aus:

In diesem Artikel haben wir die Symbolleiste, die Liste und die Rasterabschnitte dieser Seite geändert. Im nächsten Artikel ändern wir die Seitenleiste und nehmen einige Korrekturen im CSS-Stil vor. Am Ende des nächsten Artikels wird unsere Kategorieseite dem HTML-Design sehr ähnlich aussehen.

Code