Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Magento
Code

Magento Theme-Entwicklung: Startseite, Teil 2

by
Length:LongLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Home Page, Part 1
Magento Theme Development: Home Page, Part 3

German (Deutsch) translation by rush (you can also view the original English article)

Im vorherigen Tutorial dieser Serie haben wir begonnen, den Header-Abschnitt der Homepage zu ändern. In diesem Lernprogramm beginnen wir dort, wo wir mit der Verbesserung des Header-Abschnitts aufgehört haben. Dann erstellen wir den neuen CMS-Block für Schieberegler und rufen ihn aus unseren Vorlagendateien auf. Da wir in diesem Artikel viel zu behandeln haben, beginnen wir ohne weitere Verzögerung.

Da wir den oberen Kopfbereich teilweise fixiert haben, muss dort nur der obere Wagenabschnitt repariert werden. Um den Kopfzeilenbereich anzupassen, versuchen wir zuerst herauszufinden, welche Vorlagendateien für das Rendern dieses Teils verantwortlich sind. Um dies zu analysieren, fügen wir zunächst einige Produkte in den Warenkorb, damit wir sie umfassend untersuchen können.

Enabling Template Tags

Wenn wir die Vorlagenhinweise aktivieren, können wir sehen, dass der äußere Container des Header-Wagens aus dieser Vorlagendatei stammt: frontend/rwd/default/template/checkout/cart/minicart.phtml. Beim Klicken wird der erweiterte Teil durch diese Datei gerendert: frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Schließlich wird jeder Warenkorbartikel über diese Datei gerendert: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

Wir importieren alle diese Dateien in unser neu erstelltes Design und beginnen dann, sie zu ändern.

Beginnen wir den Änderungsprozess mit der äußersten minicart.phtml-Datei. Dies ist der aktuelle Code dieser Datei:

Bevor wir nun mit Änderungen beginnen, prüfen wir den Code unseres Header-Cart-Abschnitts in unserer ursprünglichen HTML-Datei. Der Code dort sieht so aus:

Also fangen wir an, den Code der PHP-Datei zu ändern, damit er unserem HTML-Code ähnelt Wir verwenden hier nur ein Ankertag, um das Einkaufswagen-Symbol einzuwickeln, und anschließend zeigen wir den Inhalt der Minicart. Daher wird unser Code so aussehen:

Hier haben wir den äußersten Wrapper des oberen Wagens ersetzt, aber jetzt müssen wir den Dropdown-Abschnitt-Wrapper bearbeiten. Wie wir bereits gesehen haben, kommt dieser Wrapper frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Lassen Sie uns den aktuellen Code dieser Datei überprüfen:

Wenn wir es mit Ihrer HTML-Vorlage vergleichen, müssen wir ein paar Dinge tun. Zunächst beginnen wir in der Minicart-Wrapper-div mit der Implementierung unserer ul, und für jedes Element werden wir unter dem li-Tag durchlaufen. Am Ende zeigen wir den Warenkorb insgesamt oder zeigen an, dass sich keine Artikel im Warenkorb befinden. Unser endgültiger Code für diese Datei wird folgendermaßen aussehen:

Jetzt wird der letzte Teil, der noch übrig ist, den Artikel der Wagenliste selbst gestalten. Wie wir bereits herausgefunden haben, ist die Datei für diesen Teil verantwortlich:frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

Der aktuelle Code dieser Datei scheint ziemlich lang und schwer zu verstehen, aber nicht einschüchtern Wir müssen das nicht alles bearbeiten, da der Hauptteil des Dateicodes nur den richtigen Preis und andere Produktoptionen berechnet. Wir überprüfen erneut unseren HTML-Code, fügen ihn in diese Datei ein und beginnen, den statischen Text durch dynamische Werte zu ersetzen. Dies ist der Code für jeden Warenkorbartikel in unserem HTML:

Wir ersetzen das img-Tag durch dieses Tag:

Als Nächstes ersetzen wir den Namen durch dynamischen Code:

Zur Anzeige der Produktoptionen verwenden wir diesen dynamischen Code:

Dann bestimmen und zeigen wir die Menge anhand dieses Codes:

Für die Preisberechnung geben wir diesen Code anstelle des statischen Preises ein:

Als letzten Schritt ersetzen wir die URL, um die URL durch diese URL zu entfernen:

Ich habe den gesamten Code aus der eigentlichen default.phtml gefunden. Sie müssen nicht die gesamte Logik und den Code selbst herausfinden, aber wenn Sie genau hinsehen, finden Sie sie in der Datei, die Sie ändern möchten.

Der endgültige Code unserer Datei default.phtml sieht also folgendermaßen aus:

Wenn Sie nun alle diese Dateien speichern und die Homepage neu laden, sollten Sie etwa Folgendes sehen:

Top Cart Fixed

Wir haben einige Probleme mit den Stilen, aber das HTML-Rendering ist ziemlich nahe an unserem erforderlichen HTML-Design. Nun, da wir den oberen Kopfbereich fertiggestellt haben, folgt der Logo-Bereich. Glücklicherweise gibt es dort nicht viel zu tun, außer dem Styling-Teil (damit das Logo zentriert wird), den wir im Styling-Artikel ausführen werden. Unsere Menüpunkte scheinen auch ziemlich nahe an dem zu sein, was wir erwarten. Wir müssen also nur die Suchleiste und dann den Hauptregler verändern.

Um unsere Suchleiste zu ändern, aktivieren wir die Vorlagenhinweise und sehen, welcher Teil für die Wiedergabe dieses Codes verantwortlich ist: frontend/rwd/default/template/catalogsearch/form.mini.phtml.

Momentan sieht diese Datei so aus:

Wir verwenden also die äußeren Divs des HTML-Codes und ersetzen den inneren Inhalt durch den dynamischen Inhalt. Unsere neue Datei form.mini.phtml sieht folgendermaßen aus:

Im letzten Teil dieses Artikels bearbeiten wir den Hauptregler. Dazu erstellen wir einen neuen statischen Block, indem Sie CMS > Static Blocks > Add New Block aufrufen. Wir nennen diesen Block "Homepage-Slider" und fügen den Bezeichner als "Home-Slider" ein - so kann der Code diesen Block finden.

Creating Homepage Slider Static Block

Nun geben wir den Slider-Code aus Ihrem HTML-Code ein.

Beachten Sie, dass wir die Bildquelle relativ zum Skin-Verzeichnis durch das skin_url-Tag wie folgt ersetzt haben:

Jetzt fügen wir diese Zeilen in die Datei header.phtml ein, die wir im letzten Artikel erstellt haben, direkt über der letzten Zeile.<?php echo $this->getChildHtml ('topContainer'); ?>.

Der letzte Schritt ist das Entfernen des aktuellen Schiebereglers. Wechseln Sie dazu zu CMS-Pages> Madison Island und entfernen Sie den gesamten Code bis zum Beginn des Style-Abschnitts aus dem Inhaltsbereich.

Removing previous Home Slider

Speichern Sie alles und laden Sie die Startseite neu. Jetzt sollten Sie sehen, dass alles sehr gut läuft. Einige Stile sind deaktiviert, aber wir behandeln das in einem separaten Styling-Tutorial. Jetzt müssen wir uns nur noch um den Inhalt der Startseite kümmern, wo wir ein aktuelles Produktkarussell zeigen, und dann die Fußzeile anpassen. Wir werden das alles im nächsten Tutorial machen, also bleibt dran!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.