Magento für Designer Teil 6

Magento ist eine erstaunlich leistungsstarke E-Commerce-Plattform. In dieser Miniserie lernen wir, wie Sie mit der Plattform beginnen, die Terminologien kennenlernen, ein Geschäft und alle damit zusammenhängenden Aspekte einrichten und schließlich lernen, wie Sie die Plattform anpassen können, um sie zu unserer eigenen zu machen.

In diesem sechsten Teil erstellen wir eine der am meisten von Lesern gewünschten Funktionen: Einen Produkt-Slider auf der Startseite. Aufgeregt? Lass uns anfangen!

Die vollständige Serie

• Teil 1: Installation und Einrichtung
• Teil 2: Produkte, Steuern, Kategorien, Payment Gateways usw.
• Teil 3: Theming
• Teil 4: Das Thema erstellen
• Teil 5: Erstellen der Produktinformationsseite
• Teil 6: Erstellen der Startseite mit einem Inhaltsslider

Ein kurzer Rückblick

Im letzten Teil haben wir die Produktinformationsseite erstellt und uns eingehend angeschaut, wie Daten in einem typischen Magento-Thema extrahiert und angezeigt werden.

Wir haben uns auch die verschiedenen Kernmethoden angesehen, mit denen unser Thema verschiedene Medien und Daten zu unserem Produkt erhält. Ich hoffe, Sie erinnern sich zumindest an einen Teil dieser Informationen, da wir sie heute wieder verwenden werden.

Was bauen wir heute??

Heute bauen wir die wichtige Homepage. Wie immer halte ich es so einfach wie möglich und verzichte auf überflüssige Funktionen. Verschiedene Stores haben unterschiedliche Inhalte auf ihren Homepages. Eine der beliebtesten und definitiv am häufigsten nachgefragten Funktionen ist die Anzeige eines JavaScript-gesteuerten Inhalts-Schiebereglers mit speziellen Produkten. Ich weiß, dass es sich interessant anhört, und Sie wollen unbedingt anfangen. Lass uns anfangen!

Ziele für die Seite

Wie bei unseren anderen Seiten sind unsere Ziele für diese spezifische Seite relativ einfach. Wir möchten einen einfachen Schieberegler, der bestimmte Produkte in einem ordentlichen Schieberegler anzeigt. Daher habe ich eine kurze Liste von Elementen zusammengestellt, die ich für notwendig halte:

• JavaScript-Schieberegler auf der Startseite
• Slider benötigt ein eingängiges Bild auf der linken Seite, um die Aufmerksamkeit auf das Produkt zu lenken
• Im rechten Teil werden der Name des Produkts, der Preis und eine kurze Beschreibung aufgeführt
• Eine Mini-Navigation innerhalb des Schiebereglers, um zwischen verschiedenen Folien zu wechseln
• Und vor allem, nicht auf eine Erweiterung verlassen, um die vorgestellten Elemente zu erhalten

Das ist es. Ich möchte es so einfach wie möglich halten und entschied mich daher, es nicht zu übertreiben. Natürlich müssen wir sowohl mit dem Frontend als auch mit dem Backend arbeiten, um alle unsere Ziele zu erreichen.

Der grundlegende Look

Die Seite muss grundsätzlich so aussehen:

Schritt 1 - Das HTML

Wir werden zunächst nur den HTML-Code für den Inhaltsteil betrachten. Ich gehe davon aus, dass Sie mit HTML und CSS recht fließend umgehen, also werde ich zu den recht wichtigen Bereichen springen.

 
 
 
    
 
 
Zonda F.
 
700.000,00 
 
Der Pagani Zonda ist ein Mittelmotor-Sportwagen, der von Pagani in Italien hergestellt wird. 
 
 
  

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

Jede Folie wird von einem Div aufgerufen, das aufgerufen wird rutschen. Im Inneren haben wir zwei Schwimmcontainer: einen für das Image und den zweiten für die Information über das Produkt selbst.

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

Schritt 2 - Das CSS

 / * Startseite * / .slide clear: both; Überlauf: Auto; Polsterung: 10px; Breite: 898px; Rand: 1px fest # E1E1E1; Hintergrund: # F6F6F6;  .product-image float: left; Breite: 650px; Polsterung: 10px; Rand: 1px fest # E1E1E1; Hintergrund: #FAFAFA;  .product-details float: left; Breite: 190px; Marge: 0 0 0 20px;  .product-details .price margin: -15px 0 0 0; Farbe: # 7db000;  .product-details p margin: 10px 0 0 0;  #nav position: absolut; oben: 255px; rechts: 250px; z-Index: 2000;  #nav a margin-right: 10px; Höhe: 5px; Breite: 5px; z-Index: 1000; Schwimmer: links; Text-Gedankenstrich: -9999px; Cursor: Zeiger; Rahmen: 1px fest #fff; Hintergrund: #eee;  #nav a: hover border: 1px solid #fff; Hintergrund: # 999;  #nav a.activeSlide border: 1px fest # 444; Hintergrund: # 333; 

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

Der einzige Punkt, den Sie beachten sollten, ist die Deklaration der Klasse activeSlide. Diese Klasse wird dem jeweiligen Navigationsanker der aktuellen Folie zugeordnet.

Schritt 3 - Einrichten unseres Shops

Als Erstes müssen wir eine eigene Kategorie einrichten, der wir alle Produkte zuordnen können, die auf unserem Schieberegler erscheinen sollen. Klicke auf das Katalog Menü und dann weiter Kategorien. Wählen Neue Root-Kategorie hinzufügen.

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

Nachdem die neue Kategorie gespeichert wurde, können Sie die ID finden, der sie zugewiesen wurde. Notieren Sie sich dies. Wir werden es für später brauchen.

Schritt 4 - Erstellen unseres Kerncodes

Wir verwenden eine einzige Vorlagendatei, um die relevanten Informationen abzurufen, sie nach Bedarf zu formatieren und alles anzuzeigen. Sie haben vollständige Freiheit hinsichtlich des Namens und des Speicherorts dieser Datei, aber im Interesse der Vereinfachung habe ich sie benannt featured.phtml und legte es in catalog / product / featured.phtml. Denken Sie daran, dies 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 schauen uns an, dass jeder Teil nach dem Code arbeitet.

 addAttributeToSelect (array ('name', 'price', 'small_image', 'short_description'), 'inner') -> addCategoryFilter (Mage :: getModel ('catalog / category') -> load ($ cat_id)); if (! $ _ productCollection-> count ()): echo $ this -> __ ('Es gibt keine Produkte, die der Auswahl entsprechen.'); sonst:?> 
  
 
 getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ product, 'small_image'))?> ">  
 
 
getName (); ?>
 
getFinalPrice (), 2);?> 
 
getShortDescription (); ?>
 
 
  
 

Hier ist das erste Stück:

 $ cat_id = "2";

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

 $ _productCollection = Mage :: getResourceModel ('catalog / product_collection') -> addAttributeToSelect (array ('name', 'price', 'small_image', 'short_description'), 'inner') -> addCategoryFilter (Mage :: getModel ( 'catalog / category') -> load ($ cat_id));

Das sieht etwas kompliziert aus, aber ich versichere Ihnen, es ist sehr einfach. In Laien ausgedrückt, geben wir im Wesentlichen die ID der Kategorie, die wir benötigen, durch die Variable weiter cat_id und bitten Sie Magento, Name, Preis, Bild und kurze Beschreibung der passenden Produkte abzurufen. Im Moment würde ich Ihnen raten, sich nicht mit dem Rest zu beschäftigen, wenn Sie sich mit MVC und anderen Aspekten der Architektur von Magento nicht auskennen.

 if (! $ _ productCollection-> count ()): echo $ this -> __ ('Leider entsprechen keine Elemente Ihren Auswahlkriterien'); sonst:?>

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, wird ein Fehler angezeigt.

Beginnen wir mit dem Durchlaufen unserer Produktkollektion!

 getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ product, 'small_image'))?> "> 

 
getName (); ?>
 
getFinalPrice (), 2);?> 
 
getShortDescription (); ?>

Wenn Sie den vorherigen Teil dieser Serie gelesen haben, muss Ihnen dieser Code bekannt sein. Wir verwenden Magentos Methoden, um Medien zu unserem Produkt abzurufen.

Das zweite Snippet kann etwas anders aussehen, da ich, anstatt etwas abstrahiertere Methoden zu verwenden, Näherungsverfahren verwendet habe, um die benötigten Daten direkt zu erfassen.

Wenn Sie sich hier etwas verwirrt fühlen, gehen Sie einfach noch einmal durch den obigen Code. Die Namen der Methoden sind ziemlich erklärend. Der einzige Stolperstein sollte darin bestehen, wie wir das Bild selbst erhalten: Wir bitten einen unserer Helfer, das Bild zu erfassen und seine Größe auf die Größe anzupassen, die wir benötigen. Nichts mehr dazu.

Beachten Sie, dass wir a öffnen und schließen rutschen div jedes Mal, wenn unsere Schleife läuft. Dadurch werden die Informationen zu jedem Produkt mit einem Containerelement gekapselt, damit wir später einen Schieberegler leichter erstellen können.

Damit ist unser PHP-Basiscode vollständig.

Schritt 5 - Das JavaScript

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

Aber zuerst gehe zu root / js und erstellen Sie einen Ordner mit dem Namen Cirrus. Verschiedene Menschen haben hier unterschiedliche Organisationsmethoden. Ich ziehe es vor, die JS eines Themes getrennt zu haben, anstatt sie nach Quellen zu organisieren. Wir benötigen hoffentlich eine Kopie von jQuery [1.4], das neueste Zyklus-Plugin und eine benutzerdefinierte Skriptdatei, die ich benenne Mokka.

Hier ist der Inhalt unserer JS-Datei.

 (Funktion ($) $ (Dokument) .ready (Funktion () $ ('# home-slideshow') .before ('
') .cycle (fx:' fade ', Geschwindigkeit: 1500, Timeout: 5000, Pause: 1, Verzögerung: 5000, Pager:' #nav '); ); ) (jQuery)

Als Erstes, beachte, dass wir alles in ein packen (Funktion ($) // Code) (jQuery) Block. Dies stellt sicher, dass jQuery keinen Konflikt mit anderen enthaltenen Bibliotheken verursacht.

Der Document Ready-Block soll wie immer sicherstellen, dass unser Code erst ausgeführt wird, wenn alle Seitenelemente geladen sind, da Magento unsere JavaScript-Dateien an die Spitze stellt.

Das Initialisieren des Plugins ist ziemlich einfach. Geben Sie einfach die ID des Hauptcontainers ein, Home-Slideshow in unserem Fall und weg geht es. Ich habe nur einige der Optionen angepasst, damit es unser Gebot erfüllt.

Zu beachten ist, dass wir dynamisch einen Container für die Navigationselemente innerhalb des DOM mit JavaScriptS erstellen und positionieren. Dieses Element wird nur benötigt, wenn JavaScript aktiviert ist. Wenn dies nicht der Fall ist, möchten wir keinen leeren, unbrauchbaren Code auf unserer Seite.

Wir übergeben im Selector den Navigationscontainer an das Slider-Plugin.

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

Schritt 6 - Einrichten unserer Homepage

Nachdem alle Vorarbeiten abgeschlossen sind, können wir unsere Homepage jetzt endgültig konfigurieren.

Klicken Sie auf das CMS-Menü und wählen Sie die Seiten Möglichkeit. Klicken Sie auf der angezeigten Seite auf die Startseite.

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

Stellen Sie sicher, dass Sie auf der Registerkarte Inhalt nach dem Deaktivieren des Editors Folgendes eingeben:

 block type = "catalog / product_list" block_id = "featured.products" template = "catalog / product / featured.phtml"

Dies ist die Methode von Magento, um die erforderlichen Blöcke einzufügen. Wir geben ihm nur eine ID, um darauf zu verweisen und auf unsere benutzerdefinierte Vorlage zu verweisen.

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

  css / home.css    

Denken Sie daran, wie wir beim Erstellen der Produktseite benutzerdefiniertes CSS in die Layoutdatei der Seite eingefügt haben, um sicherzustellen, dass nicht die gesamte Codebase für jede Seite geladen wird. Wir machen hier im Wesentlichen dasselbe. Anstatt nur eine XML-Datei zu erstellen, können Sie diese direkt über die Benutzeroberfläche 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 Fortschritte zu speichern, leeren Sie den Cache von Magento und sehen Sie, wie der schöne Schieberegler auf Ihrer Homepage in seiner qualvollen Pracht glitt!

Was wir im nächsten Teil bauen werden

… Liegt ganz bei Ihnen. Ich habe bereits fast alle relevanten Informationen zum Anpassen einer Ansicht und zum Durchlaufen jeder Ansicht behandelt. Daher bin ich zu dem Schluss gekommen, dass nur noch die Erstellung eines benutzerdefinierten Moduls erforderlich ist. Ich glaube, bis dahin wird diese Serie ihren Lauf haben. Ich kann ein kurzes Magento-Tweaks und Optimierungsanleitungen schreiben, wenn sich genügend Leute für einen solchen Artikel interessieren.

Wenn Sie der Meinung sind, dass noch etwas anderes behandelt werden muss, bevor diese Serie zu Ende geht, zögern Sie nicht, unten einen Kommentar zu hinterlassen, um mich wissen zu lassen!

Das letzte Wort

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

Fragen? Schöne Dinge zu sagen? Kritikpunkte Schlagen Sie den Kommentarbereich an und hinterlassen Sie mir eine Notiz. Glückliche Kodierung!