Magento Theme-Entwicklung Startseite, Teil 3

Nachdem wir die erste Hälfte der Homepage vollständig angepasst haben, müssen wir als Nächstes den Inhalt der Startseite ändern. Wenn Sie sich unser HTML-Design anschauen, enthält der Inhaltsbereich der Startseite nur eine Überschrift und ein Karussell für die neuesten Produkte. Es gibt ein Magento-Widget, mit dem wir die neuesten Produkte auf der Startseite anzeigen können. Wenn wir unseren aktuellen Homepage-Bereich betrachten, ist das Widget für die neuesten Produkte bereits aktiviert. Wir müssen es jedoch an unsere Designanforderungen anpassen.

Wenn wir uns den Inhalt unserer Homepage ansehen, besuchen Sie die Admin Panel> CMS> Seiten> Madison Island> Inhalt, Wir werden sehen, dass es nur eine Zeile PHP-Code gibt (abgesehen von einigen Style-Tags), d. h .:

widget type = "catalog / product_widget_new" display_type = "new_products" products_count = "5" template = "catalog / product / widget / neu / content / new_grid.phtml"

Grundsätzlich stammt der gesamte Inhalt der Homepage aus dieser Vorlage (die lediglich eine Vorlage zum Anzeigen neuer Produkte ist). Wir kopieren diese Datei aus dem RWD-Theme in unser neues Theme in Katalog / Produkt / Widget / Neu / Inhalt / Neu_grid.phtml, und beginnen Sie mit der Bearbeitung, damit sie wie unser HTML-Design aussieht. Wenn wir uns den aktuellen Code dieser Datei ansehen, dann lautet das:

getProductCollection ()) && $ _products-> getSize ()):?> 
 
 
__ ("Neue Produkte")?>
 
 
 getPagerHtml ()?> getColumnCount (); ?>  
 getItems () als $ _product):?> 
  getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> ">   
 
getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?>) ">helper ('catalog / output') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getPriceHtml ($ _ product, true, '-widget-new-grid')?> getReviewsSummaryHtml ($ _ product, 'short')?> 
 isSaleable ()):?> __ ('In den Warenkorb')?>  
__ ("Nicht vorrätig")?>
  
 Helfer ('Wunschliste') -> isAllow ()):?> 
getAddToWishlistUrl ($ _ product)?> ">__ ('Add to Wishlist')?>
  getAddToCompareUrl ($ _ product)):?> 
| ">__ ('Zum Vergleich hinzufügen')?>
  
 
 
 
  
 
 
  

Wenn wir unseren HTML-Code für diesen Abschnitt betrachten, sieht das so aus:

 
 
Heiß Produkte
 
 
 
 
 
 
  
 in den Warenkorb legen 
 
Iphone 5s Gold 32 GB 2013
 
451,00 $
 
 
 
 
 
 

Wir fangen also damit an, die dynamischen Tags in diesem HTML-Code einzufügen. Der Grund, warum ich Ihnen den aktuellen Code dieser Datei gezeigt habe, besteht darin, dass Sie die erforderlichen dynamischen Tags in diesem Code finden und in den HTML-Code einfügen können.

Wir müssen keine Änderungen an der Div-Struktur vornehmen. Die erste Zeile, die geändert werden muss, ist die h3 Etikett:

Heiß Produkte

Wir müssen den statischen Text von ersetzen Heiß und Produkte mit Magento $ das Tags, damit Magento diese später nach Benutzervorlieben übersetzen kann. Diese Zeile wird also in etwa so aussehen: 

__ ('Neu')?>__ ("Produkte")?>

Die nächste Zeile, die geändert werden muss, ist die Bild Tag, an dem wir den relevanten Pfad der Bildquelle ändern müssen. Derzeit sieht es so aus:

Wir werden es so ändern:

Hier erhält dieses dynamische Tag das tatsächliche kleine Bild des Produkts mit einer Größe von 236 x 357 px. Als nächstes müssen wir das ändern in den Warenkorb legen Verknüpfung:

in den Warenkorb legen

Wir werden es so ändern:

getProductUrl ()?> "> isSaleable ()):?> __ ('In den Warenkorb')?>  __ ("Nicht vorrätig")?>   

Es hat eine dynamische URL für die Produktdetailseite und zeigt nur "In den Warenkorb", wenn das Produkt verfügbar ist. Andernfalls wird "Out of Stock" angezeigt. Zuletzt aktualisieren wir den Produktpreis und -namen, indem wir diese Zeile ersetzen:

Iphone 5s Gold 32 GB 2013
 
451,00 $
 

Mit diesem: 

helper ('catalog / output') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
getPriceHtml ($ _ product, true, '-widget-new-grid')?>
 

Damit haben wir unsere Einzelproduktansicht bereit, aber um alle neuen Produkte zu iterieren, müssen wir unser Element div in einer Schleife einschließen. Daher fügen wir diese Zeile oben ein:

getItems () als $ _product):?>

Und diese Zeile am Ende, um die Schleife zu beenden:

Der vollständige Code für diese Datei wird also folgendermaßen aussehen:

getProductCollection ()) && $ _products-> getSize ()):?> 
 
 
__ ('Neu')?>__ ("Produkte")?>
 
 
 getItems () als $ _product):?> 
 
 
 
  
 getProductUrl ()?> "> isSaleable ()):?> __ ('In den Warenkorb')?>  __ ("Nicht vorrätig")?>   
 
helper ('catalog / output') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
getPriceHtml ($ _ product, true, '-widget-new-grid')?>
 
 
 
 
  
 
 
  

Aktualisieren Sie Ihre Startseite jetzt. Es sollte einen perfekt funktionierenden und gestylten neuen Produktbereich haben, der so aussehen würde:

Jetzt müssen wir die Fußzeile ändern, bevor die Startseite fertig ist. Wenn wir unser HTML-Design betrachten, besteht die Fußzeile aus vier Abschnitten. Die erste zeigt "Unsere Marken", die zweite zeigt ein Abonnementfeld und Links zu sozialen Medien, die dritte zeigt einige URLs und die vierte nur den Copyright-Hinweis.

Der vierte Abschnitt ist bereits in unserem Thema vorhanden, also müssen wir nur den Inhalt und die Stile ändern, aber die anderen drei Komponenten müssen wir in unserem Thema hinzufügen. 

Um eine Komponente hinzuzufügen, erstellen wir einen neuen statischen Block im Administrationsbereich und fügen unseren Inhalt dort ein. Also gehen wir zu Admin-Panel> Statische Blöcke> Neuen Block hinzufügen, und fügen Sie einen neuen Block für die hinzu Unsere Marken Sektion. Wir ändern den Blocktitel in "Unsere Marken", setzen die Kennung auf "our_brands", wählen die Geschäftsansicht von "All Store Views" aus und fügen diese in den Inhaltsbereich ein:

Unsere  Marken
 
<>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Wenn Sie genau hinschauen, ist es derselbe Code wie in unserem HTML-Code für diesen Abschnitt. Wir haben nur die relativen Pfade der Bilder geändert, während Sie die neuen Bilder manuell aus dem WYSIWYG-Editor hochladen. Speichern Sie den Block und erstellen Sie einen weiteren Block für den Anmeldeabschnitt.

Für diesen zweiten Block verwenden wir den Blocktitel von 'Above Footer'. Für den Bezeichner verwenden wir 'above_footer' und für den Inhalt geben wir diesen Code ein:

Nun müssen wir den Verknüpfungsblock auf ähnliche Weise erstellen. Wir erstellen einen neuen Block mit dem Blocktitel von 'Footer Links' mit dem Bezeichner 'footer_links' und fügen diesen Code dort ein:

 
Kunde Unterstützung
 
 
FAQ
 
Bezahlmöglichkeit
 
Buchungstipps
 
Infomation
 
 
 
 
Kunde Unterstützung
 
 
FAQ
 
Bezahlmöglichkeit
 
Buchungstipps
 
Infomation
 
 
 
 
Kunde Unterstützung
 
 
FAQ
 
Bezahlmöglichkeit
 
Buchungstipps
 
Infomation
 
 
 
 
Kontakt Info
 
Anwar ul Haq, Kalifornien
 
Rufen Sie uns an: (123) 398 5063
 
Rufen Sie uns an: (123) 398 5063
 
E-Mail: abs @ tutsplus
 
 

Alle diese Links sind jetzt nirgendwo verlinkt, aber Sie können sie später ändern. Die Bildverknüpfungen werden erneut dynamisch mit der Upload-Funktion des WYSIWYG-Editors generiert. Der gesamte restliche Code wird nur aus dem HTML-Code kopiert und eingefügt.

Speichern Sie auch diesen Block und sehen Sie sich die Startseite an. Diese drei Blöcke werden jedoch immer noch nicht angezeigt. Dies liegt daran, dass Sie Magento explizit mitteilen müssen, wo diese neuen Blöcke angezeigt werden sollen, und dass wir dies im Layoutbereich tun können. Gehen Sie dazu in die layout / local.xml Datei und fügen Sie diese Zeilen kurz vor dem Schließen der Datei hinzu Standard Etikett.

  footer_links   über dem fuß   unsere Marken   

Dieser XML-Code weist Magento grundsätzlich an, diese beiden neuen Blöcke in den Fußbereich von Magento einzufügen. Zum Schluss müssen wir diese Blöcke aus der Fußzeilen-Datei aufrufen. Dafür erstellen wir an diesem Ort eine neue footer.phtml-Datei: template / page / html / footer.phtml.

Fügen Sie diesen Code hinzu footer.phtml Datei: 

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

Dies ist wiederum nur ein HTML-Code, bei dem alle Abschnittscodes durch relevante Links zu statischen Blöcken ersetzt werden. Und der Copyright-Bereich wird durch ein dynamisches Copyright-Tag ersetzt.

Überprüfen Sie jetzt die Startseite, und es sollte jetzt diese neu erstellten statischen Blöcke anzeigen und folgendermaßen aussehen:

Unsere Homepage ist nun vollständig. Das einzige, was übrig bleibt, ist ein paar Style-Fixierungen, und das machen wir im nächsten Artikel.