Magento 2-Frontend

Magento 2 verfügt im Vergleich zu seinem Vorgänger Magento 1.X über eine Reihe von verbesserten Frontend-Ansätzen. Heute werden wir unter die Haube der Magento 2.0-Frontend-Engine blicken. Und beschreiben Sie die interessantesten Teile im Detail.

HEISS!! Die Version 2.0 von Claue wurde veröffentlicht

Demo ansehen

Claue – Clean, Minimal Magento 2&1 Theme ist eine hervorragende Vorlage für einen modernen und sauberen E-Commerce-Shop mit über 40 Homepage-Layouts und unzähligen Optionen für Shop, Blog, Portfolio, Store-Locator-Layouts und andere nützliche Seiten. Claue Version 2. 0 kommt mit einer Reihe exklusiver Funktionen, darunter:

• Basierend auf dem Luma-Thema.
• Erfüllen Sie alle Standards von Magento Theme
• Deutliche Leistungssteigerung
• Kompatibel mit den meisten Erweiterungen von Drittanbietern.
• Voll kompatibel mit Magento 2.4.x

Diese zweite erweiterte Version unterscheidet sich vollständig von ihrer vorherigen. Wenn Sie also Claue Version 1 verwenden und auf Claue Version 2 aktualisieren möchten, können Sie nur eine neue Website erstellen, anstatt von der alten Version zu aktualisieren. Kommen wir nun zum Hauptthema zurück

Der große Unterschied besteht darin, dass das Frontend jetzt mit neueren Technologien wie HTML5, CSS3 und jQuery aktualisiert wird. Es gibt auch signifikante Änderungen/Verbesserungen bei der allgemeinen Layout-Manipulation, der Dateistruktur und einer brandneuen Einführung in die Magento-UI-Bibliothek, die stark auf dem LESS-Präprozessor mit integriertem Compiler basiert.

Eines der Hauptziele neben Leistung und Skalierbarkeit war es, RWD out of the box zu bedienen. In diesem Artikel werde ich versuchen, einige der Hauptunterschiede zu behandeln, in die Entwicklung einzutauchen und einige praktische Beispiele zu demonstrieren.

Magento-UI-Bibliothek

Die Magento-UI-Bibliothek ist eine flexible LESS-basierte Frontend-Bibliothek, die entwickelt wurde, um Entwickler von Magento-Designs zu unterstützen. Es verwendet eine Reihe von Mixins für Basiselemente, um die Entwicklung und Anpassung von Frontend-Designs zu erleichtern.

Komponenten, die von der UI-Bibliothek bereitgestellt werden

Die Magento-UI-Bibliothek bietet die Möglichkeit, die folgenden Elemente und Eigenschaften der Benutzeroberfläche anzupassen und wiederzuverwenden:

• Aktionen-Symbolleiste
• Semmelbrösel
• Tasten
• Dropdowns
• Formen
• Symbole
• Layout
• Lader
• Mitteilungen
• Seitennummerierung
• Popups
• Bewertungen
• Abschnitte
• Tabulaturen und Akkordeons
• Tische
• Kurzinfos
• Typografie
• Liste der Themenvariablen

Die folgende Abbildung zeigt eine Storefront-Produktseite, die einige der vorhergehenden Elemente enthält:

Mixin-Standort

Sie finden die Magento-UI-Bibliothek unter lib/web/css . .less -Quelldateien der Bibliothek werden im source gespeichert, jede Datei enthält Mixins zum Konfigurieren eines bestimmten Elements, und in den meisten Fällen stimmt das Element mit dem Dateinamen überein:

 lib/web
    ├── CSS/
    │ ├── docs/ (Bibliotheksdokumentation)
    │ ├── Quelle/
    │ │ ├── lib/ (Bibliotheksquelldateien)
    | | | ├── Variablen/ (Vordefinierte Variablen für jedes Mixin)
    │ │ │ ├── _actions-toolbar.less
    │ │ │ ├── _breadcrumbs.weniger
    │ │ │ ├── _buttons.less
    │ │ │ ├── _dropdowns.less
    │ │ │ ├── _formen.weniger
    | | | ├── _grids.less
    │ │ │ ├── _icons.less
    │ │ │ ├── _layout.less
    │ │ │ ├── _lib.less
    │ │ │ ├── _loaders.less
    │ │ │ ├── _messages.less
    │ │ │ ├── _navigation.less
    │ │ │ ├── _pages.less
    │ │ │ ├── _popups.less
    │ │ │ ├── _rating.less
    │ │ │ ├── _resets.less
    │ │ │ ├── _responsive.less
    │ │ │ ├── _Abschnitte.weniger
    │ │ │ ├── _tables.less
    │ │ │ ├── _tooltips.less
    │ │ │ ├── _typography.less
    │ │ │ ├── _Dienstprogramme.weniger
    │ │ │ └── _variables.less
    │ │ └── _extend.less
    │ │ └── _theme.less
    │ │ └── _variables.less
    │ └── Stile.weniger
    ├── Schriftarten/
    │ └── Blank-Theme-Icons/ (Library custom icons font)
    ├── Bilder/
    │ └── blank-theme-icons.png (Sprite für Bibliothekssymbole)
    └── jquery/ (Bibliotheks-Javascript-Dateien)

Vordefinierte Variablen

Wenn Ihr Theme von einem beliebigen Magento-Out-of-the-Box-Theme erbt, z. B. Blank, können Sie jedes Element einer Shop-Seite problemlos anpassen, ohne CSS-Code oder Vorlagen zu ändern. Die Anpassung kann durchgeführt werden, indem Sie einfach in Ihrem Design die Werte der vordefinierten Variablen ändern, die in der UI-Bibliothek oder den übergeordneten Design-Mixins verwendet werden.

Die vollständige Liste dieser Variablen und ihrer Standardwerte sind in lib/web/css/source/lib/variables gespeichert. Dieses Verzeichnis enthält einen Satz von Dateien, die dem Satz von UI-Bibliothekselementen entsprechen, und jede der Dateien listet elementspezifische Variablen auf. Beispielsweise enthält lib/web/css/source/lib/variables/_breadcrumbs.less Variablen, die im breadcrumbs() Mixin verwendet werden.

Um die Standardwerte der Bibliotheksvariablen zu ändern, geben Sie die neuen Werte für die erforderlichen Variablen in der Datei <theme_dir>/web/css/source/_theme.less .

Die folgende Abbildung zeigt die weiter oben in diesem Thema gezeigte Produktseite, nachdem ein benutzerdefiniertes Design angewendet wurde. Das Design hat Blank angepasst, indem nur Variablen neu definiert wurden.

Mixins verwenden

Sie können ein Mixin mit Standardvariablenwerten verwenden oder sie beim Aufrufen eines Mixins neu definieren. Die folgenden Abschnitte beschreiben die beiden Möglichkeiten, ein Mixin aufzurufen.

Um ein Mixin mit Standardwerten zu verwenden, rufen Sie das Mixin auf, ohne Parameter anzugeben. Beispielsweise:

 .Semmelbrösel {
    .Semmelbrösel();
}

Um ein Mixin mit vom Standard abweichenden Parameterwerten aufzurufen, legen Sie diese Werte beim Aufrufen des Mixins fest, wie im folgenden Beispiel:

 .Beispiel-Schaltfläche {
    .Taste(
        @_button-Padding: @button-Padding,
        @_button-color: #fff,
        @_button-color-hover: #ccc
    );
}

Variablen, die mit @_ beginnen, sind private Mixin-Variablen, die nur in diesem Mixin verwendet werden. Variablen, die mit @ (ohne Unterstrich) beginnen, sind global und werden in lib/web/css/source/lib/variables/ aufgelistet.

Dokumentation der UI-Bibliothek

Ausführliche Informationen zur Magento-UI-Bibliothek finden Sie in der Dokumentation, die zusammen mit dem Code bereitgestellt wird:

• lib/web/css/docs/source/README.md : beschreibt die Magento-UI-Bibliotheksstruktur, Namenskonventionen und den Codestil.
• lib/web/css/docs : enthält eine Reihe von .html -Dateien mit detaillierten Informationen zu den Bibliotheks-Mixins. Jede Datei ist nach dem Mixin benannt, das sie beschreibt, und enthält eine detaillierte Mixin-Beschreibung und Navigationssteuerelemente, um auf die Dokumentation für andere Mixins zuzugreifen. Die Dokumentation ist in einer praktischen HTML-Ansicht an folgendem Ort in Ihrer Magento-Installation verfügbar: pub/static/frontend/Magento/blank/en_US/css/docs/index.html

In Fortsetzung des Artikels möchte ich Ihnen die neue Theme-Struktur der Magento 2-Plattform beschreiben.

Magento 2-Theme-Struktur

Die Themenstruktur von Magento 2 wurde erheblich geändert:

Das ganze Thema ist nun relativ zu „App/Design“ organisiert. Der Ordner „Skin“ existiert nicht mehr. Außerdem gibt es einen neuen Ansatz für die Anpassung von Modulen: Jetzt hat jede Moduleinheit im Ordner mit dem Thema ihren eigenen _ Katalog mit ihrer Darstellung, sie enthält Vorlagen, JS und CSS/LESS. Es ist ein sehr benutzerfreundlicher und pragmatischer Ansatz. Wir haben eine komfortable Struktur, in der alles auf sehr bequeme Weise sortiert ist.

i18n

Dieser Ordner enthält die .csv-Übersetzungsdateien.

theme.xml

Es wird verwendet, um das Thema zu initialisieren. Der Name des Designs, die Version des Designs, die übergeordnete Vorlage des Designs und das Vorschaubild des Designs sollten dort definiert werden. Übrigens unterstützt Magento 2 jetzt die Vererbung mehrerer Themen.

composer.json

Magento 2-Themes sind als Composer-Pakete organisiert.

Um Ihr eigenes Design in ein Composer-Paket umzuwandeln, müssen Sie die Konfigurationsdatei „composer.json“ im Designordner hinzufügen und Ihr Paket außerdem unter https://packagist.org registrieren

Layout-Aktualisierungen/Verbesserungen

Wenn es um die Layout-Manipulation geht, gibt es einige wirklich coole und interessante neue Verbesserungen.

Bevor wir in praktische Beispiele eintauchen, ist es wichtig zu erwähnen, dass Layoutdateien jetzt in kleinere Teile unterteilt sind. Praktisch erklärt – was früher ein Layoutgriff war, ist jetzt eine separate Datei.
Wahrscheinlich war die Absicht, die Wartung zu vereinfachen.

Magento 2 führt das völlig neue Konzept für Aktionen zur Größenänderung von Produkt-/Medienbildern direkt vom Layout aus ein. Die Layoutdatei view.xml ist dafür verantwortlich und muss im Verzeichnis app/design/frontend/vendorName/newTheme/etc/ abgelegt werden . Hier ist ein Beispiel für die Größenänderung von Produktkatalogbildern in Aktion.

 <view xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation = "../../../../../../lib/internal/Magento/Framework/Config/etc/view.xsd" > <vars module = "Magento_Catalog" > <var name = "product_small_image_sidebar_size" > 100 </var > <var name = "product_base_image_size" > 275 </var > <var name = "product_base_image_icon_size" > 48 </var > <var name = "product_list_image_size" > 166 </var > <var name = "product_zoom_image_size" > 370 </var > <var name = "product_image_white_borders" > 0 </var > </vars > </view >

Obwohl ich annehme, dass das Hauptziel darin bestand, den eigentlichen Größenänderungsprozess für Entwickler zu vereinfachen, wird dies sicherlich in den meisten Fällen von responsivem Design fehlschlagen. Beispielsweise möchten wir keine großen Bilder für Smartphone-Benutzer über Edge-Verbindungen bereitstellen. Die Größenanpassung aus Vorlagendateien bot eine bessere Möglichkeit, mehrere Quellen für unterschiedliche Endbenutzerprofile bereitzustellen. Im Moment, wenn ich ein leeres Thema inspiziere, sehe ich nur eine Situation, in der Bilder in HTML nur herunterskaliert werden.

Eine der großartigen und mehr als willkommenen Änderungen ist die Einführung eines Container -Wrappers, Nachfolger eines core/text_list -Blocktyps, der in den vorherigen Versionen des Systems die Rolle eines strukturellen Blocks erfüllte. Was wirklich interessant ist, ist eine Möglichkeit, Attribute wie htmlTag , htmlClass , htmlId direkt aus Layoutdateien zu übergeben.

Mein persönlicher Favorit ist die Einführung in die Bewegungsmethode . Es ist eine Art verfeinerte Aktionsmethode set/unsetChild , aber jetzt ist der Prozess viel intuitiver. Wenn wir beispielsweise Quellblock1 in Zielblock2 einfügen müssen, können wir dies folgendermaßen tun:

Es macht Quellblock1 automatisch zu einem Kind eines Zielblocks 2 .

Es ist wichtig zu erwähnen, dass Magento 2 eine Systemvalidierung für XML-Dateien unter Verwendung von XML-Schemas für einzelne und zusammengeführte Layoutdateien bietet.

Das Magento 2-Frontend-System wurde erheblich verbessert, es ist jetzt technologisch fortschrittlicher und viel einfacher zu handhaben. Leider ist es unmöglich, alle Änderungen und Neuerungen von Magento 2 in einem Artikel zu behandeln. In zukünftigen Artikeln wird Magesolution der Sache sicherlich nachgehen und wir werden näher auf die Magento 2-Technologiewelt eingehen.

Quelle: magento.com