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

Magento für Designer: Teil 6

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Magento for Designers.
Magento for Designers: Part 5
Magento for Designers: Multi-Store Functionality

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

Magento ist eine erstaunlich leistungsstarke E-Commerce-Plattform.  In dieser Miniserie lernen wir, wie man mit der Plattform beginnen kann, die Terminologien kennt, ein Geschäft und alle damit verbundenen Aspekte aufbaut und schließlich lernt, wie man es anpasst, um es zu unserem Eigentum zu machen.

In diesem sechsten Teil werden wir eine der am meisten von den Lesern angeforderten Funktionen erstellen: einen vorgestellten Produktschieberegler auf der Startseite.  Aufgeregt?  Lassen Sie uns anfangen!

Die komplette Serie


Eine kurze Zusammenfassung

Im letzten Teil haben wir die Produktinformationsseite erstellt und einen guten Blick darauf geworfen, wie Daten in einem typischen Magento-Thema extrahiert und angezeigt werden.

Wir haben uns auch die verschiedenen Kernmethoden angesehen, die unser Thema verwendet, um verschiedene Medien und Daten über unser Produkt zu erhalten.  Ich hoffe, Sie erinnern sich wenigstens an einen Teil dieser Informationen, weil wir sie heute wieder verwenden werden.


Was bauen wir heute?

Heute werden wir die wichtige Startseite erstellen.  Wie immer werde ich es so einfach wie möglich halten und keine überflüssigen Features auslassen.  Verschiedene Geschäfte haben auf ihren Startseiten unterschiedliche Inhalte.  Eines der beliebtesten und definitiv eines der am meisten nachgefragten Features ist die Anzeige eines JavaScript-gestützten Content-Sliders mit speziell gekennzeichneten Produkten.  Ich weiß, dass es interessant klingt und du beginnst zu jucken.  Lassen Sie uns anfangen!


Ziele für die Seite

Wie bei unseren anderen Seiten sind unsere Ziele für diese spezielle Seite relativ einfach.  Wir wollen einen einfachen Schieberegler, der bestimmte Produkte in einem ordentlichen Schieberegler anzeigt.  Daher habe ich eine kurze Liste von Elementen zusammengestellt, die meiner Meinung nach benötigt werden:

  • JavaScript-Schieberegler auf der Startseite
  • Slider benötigt auf der linken Seite ein eingängiges Bild, um auf das Produkt aufmerksam zu machen
  • Im rechten Teil geben wir den Produktnamen, den Preis und eine kurze Beschreibung an
  • Eine Mini-Navigation innerhalb des Sliders, um zwischen verschiedenen Folien zu wechseln
  • Und am wichtigsten, nicht auf eine Erweiterung angewiesen, um die vorgestellten Elemente zu erhalten

Das ist es.  Ich möchte es so einfach wie möglich halten und habe mich deshalb dafür entschieden, es nicht zu übertreiben.  Wir werden natürlich sowohl mit dem Frontend als auch mit dem Backend arbeiten müssen, um all unsere Ziele zu erreichen.


Das grundlegende Aussehen

Die Seite muss im Grunde so aussehen:


Schritt 1 - Das HTML

Wir sehen uns zuerst den HTML-Code für den Inhaltsteil an.  Ich nehme an, dass Sie ziemlich fließend in HTML und CSS sind, also werde ich zu den ziemlich wichtigen Teilen springen.

An diesem Punkt ist das alles ziemlich einfach.  Startseite-Diashow ist der Container, mit dem wir die gesamte Diashow umhüllen und der an das für den Slider verantwortliche JavaScript übergeben wird.

Jede Folie wird von einer Folie umschlossen, die Folie genannt wird.  Im Inneren haben wir zwei schwebende Behälter: einen für das Bild und den zweiten für die Information über das Produkt selbst.

Das ist alles, was dazu gehört.  Wir können jetzt zum Styling-Teil übergehen.


Schritt 2 - Das CSS

Nichts Besonderes hier.  Sehr einfaches CSS, um die Elemente in Position zu bringen.

Der einzige zu beachtende Punkt ist die Deklaration für die Klasse activeSlide. Diese Klasse wird dem jeweiligen Navigationsanker der aktuellen Folie zugewiesen.


Schritt 3 - Einrichten unseres Geschäfts

Als erstes müssen wir eine separate Kategorie einrichten, der wir alle Produkte zuweisen können, die wir auf unserem Slider sehen müssen.  Klicken Sie auf das Katalogmenü und dann auf Kategorien.  Wählen Sie eine neue Stammkategorie hinzufügen.

Magento for Designer: Part VI

Geben Sie einen Namen Ihrer Wahl ein und wählen Sie dann Nein für das Dropdown-Menü ist aktiv.  Wir möchten nicht, dass es in anderen Teilen der Website angezeigt wird.

Magento for Designer: Part VI

Magento für Designer: Teil VISobald die neue Kategorie gespeichert wurde, können Sie die ID finden, der sie zugewiesen wurde.  Notieren Sie das.  Wir werden es für später brauchen.


Schritt 4 - Erstellen unseres Kerncodes

Wir werden eine einzige Vorlagendatei verwenden, um die relevanten Informationen herauszuziehen, sie nach Bedarf zu formatieren und alles anzuzeigen.  Sie haben völlige Freiheit bezüglich des Namens und des Ortes dieser Datei, aber um es einfach zu halten, habe ich sie feature.phtml genannt und in catalog/product/ featured.phtml abgelegt.  Denken Sie daran, das geht in Ihren Vorlagenordner, nicht in Ihren Layoutordner.

Der Inhalt der Datei sieht so aus.  Machen Sie sich keine Sorgen über die Länge, wir sehen uns jeden Teil nach dem Code an.

Hier ist das erste Stück:

Zuerst müssen wir die ID der Kategorie angeben, aus der wir unsere Produkte ziehen möchten.  In unserem Fall ist dies 2, die ID der Kategorie, die wir gerade erstellt haben.

Das sieht etwas kompliziert aus, aber lassen Sie mich Ihnen versichern, es ist sehr einfach.  Um es in Laien auszudrücken, geben wir im Wesentlichen die ID der Kategorie, die wir brauchen, durch die Variable cat_id weiter und fragen Magento, um den Namen, den Preis, das Bild und die kurze Beschreibung der passenden Produkte abzurufen.  Im Moment würde ich Ihnen raten, sich nicht mit dem Rest zu beschäftigen, außer Sie sind mit MVC und anderen Aspekten der Magento-Architektur vertraut.

Wir müssen prüfen, ob wir passende Artikel haben, oder?  Das machen wir hier. Stellen Sie nur sicher, dass wir passende Artikel haben.  Wenn nicht, zeigen wir einen Fehler an.

Beginnen wir mit dem Durchlaufen unserer Produktkollektion!

Wenn Sie den vorherigen Teil dieser Serie gelesen haben, muss Ihnen dieser Code ziemlich vertraut sein.  Wir verwenden die eingebrannten Methoden von Magento, um Medien zu unserem Produkt abzurufen.

Das zweite Snippet könnte ein wenig anders aussehen, weil ich, anstatt etwas mehr abstrahierte Methoden zu verwenden, engere Methoden verwendet habe, um die benötigten Daten direkt zu erfassen.

Wenn Sie sich hier etwas verwirrt fühlen, gehen Sie den obigen Code noch einmal durch.  Der Name der Methoden ist ziemlich erklärend.  Der einzige Stolperstein sollte sein, wie wir das Bild selbst erhalten: Wir bitten einen unserer Helfer, das Bild zu erfassen und es auf die Größe zu verkleinern, die wir brauchen.  Nichts mehr dazu.

Beachten Sie, dass wir jedes Mal, wenn unsere Schleife ausgeführt wird, ein Folien-Div öffnen und schließen.  Dadurch werden die Informationen jedes Produkts mit einem Containerelement verkapselt, damit wir später einen Schieberegler erstellen können.

Und damit ist unser Basis-PHP-Code vollständig.


Schritt 5 - Das JavaScript

Es macht keinen Sinn, das Rad hier komplett neu zu erfinden, da der Schwerpunkt dieser Serie auf Magento liegt.  Daher werden wir heute ein exzellentes Plugin verwenden, um unseren Slider zu erstellen: das jQuery Cycle Plugin.

Aber gehen Sie zuerst zu root/js und erstellen Sie einen Ordner mit dem Namen cirrus.  Unterschiedliche Menschen haben hier unterschiedliche Organisationsformen.  Ich bevorzuge es, JS eines Themas getrennt zu haben, anstatt sie nach Quelle zu organisieren.  Wir benötigen eine Kopie von jQuery [1.4 hoffentlich], das neueste Zyklus-Plugin und eine benutzerdefinierte Skriptdatei, die ich mocha nenne.

Hier ist der Inhalt unserer JS-Datei.

Beachten Sie zunächst, dass wir alles in einen (function ($) {// Code}) (jQuery)-Block einschließen.  Stellen Sie sicher, dass jQuery nicht mit anderen eingeschlossenen Bibliotheken in Konflikt steht.

Der Dokument bereit Block soll wie immer sicherstellen, dass unser Code erst dann ausgeführt wird, wenn alle Assets der Seite geladen sind, da Magento unsere JavaScript-Dateien gerne oben platziert.

Das Plugin zu initialisieren ist ziemlich einfach.  Geben Sie einfach die ID des Hauptcontainers ein, in unserem Fall die Home-Slideshow, und los geht's.  Ich habe gerade einige der Optionen optimiert, damit es unseren Wünschen entspricht.

Zu beachten ist, dass wir unseren Container für die Navigationselemente innerhalb des DOM dynamisch mit JavaScript erstellen und positionieren.  Dieses Element wird nur benötigt, wenn JavaScript aktiviert ist.  Wenn nicht, wollen wir keinen leeren, nutzlosen Code auf unserer Seite.

Wir geben auch den Selektor des Navigationscontainers an das Slider-Plugin weiter.

Das ist es.  Der JavaScript-Teil unseres Codes ist fertig.


Schritt 6 - Einrichten unserer Startseite

Nun, da alle unsere Vorarbeiten abgeschlossen sind, können wir unsere Startseite nun endlich konfigurieren.

Magento for Designer: Part VI

Klicken Sie auf das CMS-Menü und wählen Sie die Option Seiten.  Klicken Sie auf der folgenden Seite auf die Startseite.

Magento for Designer: Part VI

Die erste Registerkarte sollte ziemlich selbsterklärend sein.  Stellen Sie sicher, dass unsere Seite aktiviert ist.

Magento for Designer: Part VI

Stellen Sie sicher, dass Sie nach der Deaktivierung des Editors im Tab Inhalt Folgendes eingeben:

Das ist die Methode von Magento, erforderliche Blöcke einzubinden.  Wir geben ihr einfach eine ID, um sie zu verweisen und verweisen sie auf unsere benutzerdefinierte Vorlage.

Magento for Designer: Part VI

Ändern Sie die Layoutvorlage in der Registerkarte Entwurf in 1 Spalte, da wir sie für alles verwenden, und geben Sie dann Folgendes in das Feld XML-Layoutaktualisierung ein.

Denken Sie daran, dass wir beim Erstellen der Produktseite benutzerdefinierte CSS in die Layoutdatei der Seite eingefügt haben, um sicherzustellen, dass die gesamte Codebasis nicht für jede Seite geladen wird?  Wir machen hier im Wesentlichen dasselbe.  Anstatt nur eine XML-Datei zu erstellen, können wir diese direkt über die Schnittstelle eingeben.

Wir laden einfach unser benutzerdefiniertes CSS, unsere JS-Bibliotheken und die Skriptdatei, die unseren gesamten Code enthält.

Klicken Sie auf "Speichern", um alle unsere Fortschritte zu speichern, leeren Sie den Cache von Magento und beobachten Sie, wie der schöne Slider auf Ihrer Startseite in seiner unerträglich schönen Pracht gleitet!


Was wir im nächsten Teil aufbauen werden

.. liegt ganz bei dir.  Ich habe bereits fast alle relevanten Informationen zur Anpassung jeder Ansicht abgedeckt und jede einzelne Ansicht ist völlig kontraintuitiv.  Ich bin also zu dem Schluss gekommen, dass nur noch ein benutzerdefiniertes Modul erstellt werden kann und ich denke, bis dahin wird diese Serie ihren Lauf genommen haben.  Ich kann eine schnelle Magento Tweaks und Optimierung How-To schreiben, wenn genug Leute Interesse für einen solchen Artikel zeigen.

Wenn Sie das Gefühl haben, dass vor dem Ende dieser Serie etwas anderes zu tun ist, zögern Sie nicht, einen Kommentar zu hinterlassen, um es mir mitzuteilen!


Das letzte Wort

Und wir sind fertig!  Heute haben wir gelernt, wie man eine benutzerdefinierte Startseite mit einem Schieberegler erstellt, der die vorgestellten Produkte anzeigt.  Wir haben auch gelernt, all das zu tun, ohne auf eine Erweiterung durch Dritte angewiesen zu sein und stattdessen alles selbst zu programmieren.  Hoffentlich war das für Sie nützlich und Sie fanden es interessant.  Da das für viele Leser ein ziemlich neues Thema ist, werde ich den Kommentarbereich genau beobachten, wenn Sie irgendwelche Zweifel haben.

Fragen?  Schöne Dinge zu sagen? Kritik?  Treffen Sie den Kommentarbereich und hinterlassen Sie mir eine Nachricht.  Glückliche Kodierung!

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.