So erstellen Sie benutzerdefinierte Magento 2-Widgets

Widgets ermöglichen Magento 2-Shop-Administratoren das Hinzufügen statischer/dynamischer Inhalte zu CMS-Seiten und -Blöcken und bieten viele Funktionen und eine einfache Implementierung. Widgets sind wiederverwendbare Komponenten, die in jedem CMS-Block von Magento 2 hinzugefügt werden können.

Daher ermöglichen sie Magento 2-Entwicklern und Shop-Administratoren, interaktive Schnittstellen und Funktionen im Frontend hinzuzufügen, ohne viel über Programmierung wissen zu müssen. Natürlich müssen sie sich immer noch mit Magento auskennen, um ein Widget zu erstellen.

Das Ziel dieses Artikels ist es, zu demonstrieren, wie Widgets in Magento 2 erstellt werden, wobei der Schwerpunkt auf benutzerdefinierten Widgets liegt.

Magento 2-Widgets

Magento 2 ist die neueste Version von Magento, einer der führenden E-Commerce-Plattformen von heute. Widgets spielen in Magento 2 eine wichtige Rolle, insbesondere aus funktionaler Sicht. Magento-Widgets bieten nicht nur mehr benutzerseitige Funktionalität, sondern helfen Administratoren auch dabei, statische oder dynamische Inhalte zu CMS-Seiten und -Blöcken hinzuzufügen.

Aber aus technischer Sicht … Was ist ein Magento-Widget?

Ein Magento 2-Widget ist im Wesentlichen eine Magento-Erweiterung, die mit einer Reihe erweiterter Konfigurationsoptionen entwickelt wurde. Aufgrund der größeren Flexibilität und Kontrolle werden sie verwendet, um Informationen und Marketinginhalte über das Magento-Administratorpanel bereitzustellen. Einer der Vorteile von Magento 2-Widgets ist, dass Sie sie von überall auf der Website „anrufen“ können.

Widgets ermöglichen es Administratoren auch, interaktive Schnittstellen und Funktionen im Magento-Frontend hinzuzufügen, ohne programmieren zu müssen (eigentlich sogar ohne zu wissen, wie man programmiert).

Magento 2 bietet mehrere Arten von Widgets

Bevor wir zur Implementierung übergehen, werfen wir einen genaueren Blick auf die Standardpalette an Widgets, die in Magento 2 unterstützt werden:

• Kürzlich verglichene Produkte – Sie müssen dieses Widget beim Durchsuchen von Produkten auf Ihren bevorzugten E-Commerce-Websites beobachtet haben. Dieses Widget wird verwendet, um kürzlich angesehene oder verglichene Produkte in der Seitenleiste einer Katalogseite anzuzeigen. Sie können je nach Thema auch in Ihrem Shop erscheinen. Einer der entscheidenden Punkte ist, dass die Anzahl der Produkte, die in jedem einzelnen Block aufgelistet werden, konfiguriert werden kann.
• Bestellungen und Rücksendungen – Wann immer Sie ein Produkt online kaufen, gibt es ein Must-Have-Widget, das schnellen Zugriff auf Bestellungen und Rücksendungen bietet. Wenn ein Benutzer bestellte oder zurückgegebene Produkte überprüfen möchte, kann er die erforderlichen Details wie Bestell-ID, Abrechnungsdatum, Suche nach Bestellung, E-Mail usw. eingeben.
• Katalogproduktliste — Dies ist ein weiteres weit verbreitetes Widget; Jeder kennt die Abschnitte „Empfohlene Produkte“ auf E-Commerce-Websites, da fast jede Website einen hat. Hervorgehobene Produkte werden normalerweise zum Zwecke der Produktwerbung auf der Homepage platziert. Das jeweilige Produkt wird mit kurzen Details wie Preis, Funktionen und Optionen wie „In den Warenkorb legen“, „Zur Wunschliste hinzufügen“ und „Zur Vergleichsfunktion hinzufügen“ angezeigt.
• Katalogproduktlink – Der Hauptzweck des Widgets „Katalogproduktlink“ besteht darin, dass Administratoren Links für Produkte verwalten können, einschließlich verwandter Produkte, Cross-Sells, Upsells und gruppierter Produkte. Wenn Sie die Katalogprodukt-Link-Seite besuchen, sehen Sie verschiedene Katalogkategorien, die mit einer Einführung eingeleitet werden. Dort finden Sie Katalogprodukt-Links mit verschiedenen Unterlinks, z. B. Katalogprodukt-Link-Zuweisung, Katalogprodukt-Link-Attribute, Katalogprodukt-Link-Entfernungen, Katalogprodukt-Link-Typen und mehr.
• Katalogkategorie- Link – Auf E-Commerce-Websites, insbesondere auf produktbasierten, finden Sie keinen Mangel an Katalogkategorie-Link-Widgets.
• Benutzerdefiniertes Block-Widget – Es ist möglich, Blöcke, Widgets und benutzerdefinierte Seiten zu kombinieren, um Teile des Katalogs oder andere Informationen anzuzeigen, die Kunden nützlich finden könnten.

Diese können verwendet werden, um die Benutzererfahrung zu verbessern und dem Shop Funktionalität hinzuzufügen. Blöcke und Widgets sind wichtige Elemente der meisten E-Commerce-Websites. Sie ermöglichen Benutzern das schnelle Generieren und Steuern von Inhalten und können für Folgendes verwendet werden:

• Fügen Sie dynamische/Informationsblöcke in Seitenleisten hinzu
• Fügen Sie Banner in CMS-Seiten hinzu
• Fügen Sie benutzerdefinierte Menüs hinzu
• Fügen Sie interaktive Benutzeroberflächen hinzu

Der Fall für benutzerdefinierte Magento 2-Widgets

Jede Website oder Webseite benötigt viele Funktionen, um reibungslos zu funktionieren und mehr Besucher anzusprechen, und die Schaffung einer ansprechenden Benutzererfahrung ist ein Muss im E-Commerce. Hier kommen benutzerdefinierte Magento 2-Widgets ins Spiel, und genau das sollen sie tun.

Widgets sind kleinere Codesätze, die wir dem Store hinzufügen können. Mithilfe einfacher Links zu dynamischem Code können Widgets alle möglichen nützlichen Daten anzeigen, die darauf zugeschnitten sind, Besuchern zu helfen und ihre Erfahrung zu verbessern. Die Möglichkeit, das Engagement durch wiederverwendbare Widgets mit geringem Overhead zu steigern, bedeutet natürlich viel, aber manchmal geht es nicht nur darum, ein Standard-Widget auszuwählen und hinzuzufügen.

Die Verwendung der benutzerdefinierten Widget- Funktionalität in Magento 2 ermöglicht es uns, unsere eigenen Widget-Vorlagen zu erstellen. Ein benutzerdefiniertes Widget kann manchmal eine noch bessere Möglichkeit bieten, hochwertige Inhalte innerhalb von CMS-Blöcken oder -Seiten zu bearbeiten oder hinzuzufügen.

Bevor wir jedoch zu benutzerdefinierten Widgets übergehen, müssen wir einen Standardanwendungsfall für Widgets in Magento 2 untersuchen. Lassen Sie uns einen Blick auf etwas Grundlegendes und weit verbreitetes werfen, zum Beispiel:

So fügen Sie der Homepage mithilfe eines Widgets eine neue Produktliste hinzu

Dieses einfache Widget ermöglicht es uns, eine neue Produktliste hinzuzufügen, wo immer dies auf der Website erforderlich ist, und es gibt verschiedene Möglichkeiten, wie neue Produkte in Magento 2 aufgelistet werden können.

Um eine Magento-Produktliste zur Startseite hinzuzufügen, müssen Sie lediglich einem einfachen Prozess folgen:

• Melden Sie sich auf der Magento 2-Admin-Seite an und gehen Sie zu Inhalt > Widget

• Klicken Sie auf die Schaltfläche Widget hinzufügen. Danach werden wir zur Registerkarte Einstellungen umgeleitet, wo wir die Optionen für Typ und Design sowie Themen auswählen müssen.

• Wir können den Screenshot unten sehen, in dem wir bereits die Katalog-Neuproduktliste ausgewählt haben, die wir im Front-End anzeigen werden.

• Wir haben LUMA als Option für das Designthema ausgewählt.

• Nachdem wir beide Werte ausgewählt haben, müssen wir mit dem zweiten Schritt fortfahren, wo wir Storefront-Eigenschaften füllen müssen. Jetzt müssen wir den Widget-Titel und die Storefront-Eigenschaften festlegen, wie z. B. Widget-Titel und Store-Ansicht . Wir verwenden Toptal New Product List und All Store Views .

• Der wichtigste Teil ist der Abschnitt „ Layoutaktualisierungen “, der uns mitteilt, wo dieses Widget erscheinen wird (z. B. Startseite, Listenseite, Kassenseite usw.). Es ist auch möglich, einen Bereich zu definieren, in dem der Container erscheinen soll – zum Beispiel unter der Kopfzeile, über der Fußzeile, Fußzeile usw.

Die Einstellungen für Layoutaktualisierungen bieten Ihnen die folgenden Optionen:

• Anzeige auf: Angegebene Seite oder Alle Seiten.
• Seite: CMS-Startseite
• Container: Hauptinhaltsbereich
• Vorlage: Hier können Sie auswählen, in welchem ​​Stil Sie neue Produkte im Rastermodus oder im Listenmodus anzeigen möchten

Sobald wir die Option „ Spezifizierte Seite “ ausgewählt haben, können wir mit dem Festlegen der Eigenschaften fortfahren, sodass wir das Widget auf einer bestimmten Seite anzeigen können. Hier haben wir das Seiten- Dropdown -Menü, mit dem wir die CMS-Startseite auswählen können. Als nächstes müssen wir den Container und die Vorlage auswählen, die wir verwenden werden, um das Widget in einem bestimmten Abschnitt anzuzeigen.

Schließlich wechseln wir zur letzten Registerkarte, die Widget-Optionen enthält. Hier können wir die Bedingung festlegen, z. B. welche Art von Produkten angezeigt werden sollen, oder die Anzahl der Produkte begrenzen und so weiter.

Wenn wir Alle Produkte auswählen, wird das zuletzt hinzugefügte Produkt in diesem Abschnitt angezeigt. Wenn wir Neue Produkte auswählen, werden in diesem Abschnitt nur die Produkte angezeigt, die wir als „Neu“ markiert haben. Wenn wir unseren Kunden die Steuerung der Navigation für mehrere Listen überlassen möchten, müssen wir die Display Page Control auf „Yes“ setzen. Wenn wir „Ja“ ausgewählt haben, müssen Sie die Anzahl der Produkte in die Liste eintragen.

In Number of Products to Display können wir definieren, wie viele Produkte im Bereich Neue Produkte angezeigt werden können. Außerdem können wir bei Bedarf die Einstellungen für die Cache-Lebensdauer ändern.

Jetzt müssen wir dieses Widget speichern und den Magento 2-Cache leeren. Dies kann über den Administrator oder die Befehlszeile erfolgen. Wir können den folgenden Befehl verwenden, um den Cache zu leeren:

php bin/magento cache:clean and php bin/magento cache:flush

Dann können wir die neuen Produkte auf der Startseite sehen.

So erstellen Sie ein benutzerdefiniertes Widget in Magento 2

Jetzt lernen wir, wie man benutzerdefinierte Widgets für Magento 2 erstellt. Benutzerdefinierte Widgets bieten die beste Möglichkeit zum Hinzufügen und Bearbeiten von Inhalten innerhalb von CMS-Blöcken oder -Seiten, da sie an Ihre Anforderungen angepasst werden können.

Beginnen wir mit den Grundlagen. Wir alle wissen, wie man ein Modul erstellt, richtig? Für den Fall, dass Sie mit der Erstellung benutzerdefinierter Module in Magento 2 nicht vertraut sind, haben wir ein großartiges Tutorial, das den Prozess ausführlich behandelt.

Lassen Sie uns nun mit dem schrittweisen Prozess zum Erstellen benutzerdefinierter Widgets in Magento 2 fortfahren.

Zuerst müssen wir ein neues Modul erstellen, das Namespace- und Modulordner benötigt. In diesem Beispiel verwenden wir Toptal für den Namespace und CustomWidget für den Modulnamen. Beginnen wir also wie gewohnt mit composer.json , registration.php und etc/module.xml .

app/code/Toptal/CustomWidget/composer.json

Diese Datei wird von Composer jedes Mal geladen, wenn wir sie ausführen, obwohl wir Composer nicht wirklich mit unserem Modul verwenden.

Jetzt müssen wir unser Modul bei Magento registrieren, also müssen wir die register.php an folgendem Ort erstellen: app/code/Toptal/CustomWidget/registration.php .

 <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Toptal_CustomWidget', __DIR__ );

Jetzt erstellen wir die letzte Registrierungsdatei, module.xml .

app/code/Toptal/CustomWidget/etc/module.xml

 <?xml version="1.0" ?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Toptal_CustomWidget" setup_version="1.0.0"/> </config>

Nach Abschluss des Registrierungsschritts erstellen wir als nächstes die Konfigurationsdatei widget.xml .

app/code/Toptal/CustomWidget/etc/widget.xml

 <?xml version="1.0" ?> <widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd"> <widget class="Toptal\CustomWidget\Block\Widget\Samplewidget"> <label>Toptal Sample Widget</label> <description></description> <parameters> <parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text"> <label>Title</label> </parameter> <parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="textarea"> <label>Content</label> </parameter> </parameters> </widget> </widgets>

Im obigen Code erhalten wir Title und Content als Parameter, die überall dort angezeigt werden, wo das Widget aufgerufen wird. Das Tag <widget> enthält die Blockklasse Toptal\CustomWidget\Block\Widget\Samplewidget . Diese Klasse wird innerhalb von Block/Widget/Samplewidget.php . Die Klasse weist unsere Widgets an, welche Vorlage verwendet werden soll.

Das nächste Code-Snippet zeigt, wie ein Block für das Widget definiert wird; Wir werden unsere Vorlage hier einstellen. Mal sehen, wie es aussieht.

app/code/Toptal/CustomWidget/Block/Widget/Samplewidget.php

 <?php namespace Toptal\CustomWidget\Block\Widget; use Magento\Framework\View\Element\Template; use Magento\Widget\Block\BlockInterface; class Samplewidget extends Template implements BlockInterface { protected $_template = "widget/samplewidget.phtml"; }

Toptal\CustomWidget\Block\Widge\Samplewidget ist über dem Code deklariert. In dieser Datei weisen wir eine benutzerdefinierte Vorlagendatei in der Variablen $_template .

Als Nächstes sehen wir uns an, was unsere Widget-Vorlage enthält.

app/code/Toptal/CustomWidget/Block/view/frontend/templates/widget/samplewidget.phtml

 <?php if($block->getData('widgettitle')): ?> <h2 class='toptal-title'><?php echo $block->getData('widgettitle'); ?></h2> <?php endif; ?> <?php if($block->getData('widgetcontent')): ?> <h2 class='toptal-content'><?php echo $block->getData('widgetcontent'); ?></h2> <?php endif; ?>

Hier können wir sehen, wie der Wert von Widget-Parametern abgerufen wird. Es ist einfach:

$this->getData('widgettitle');

und

$this->getData('widgetcontent');

Was ist unser Endergebnis? Lassen Sie mich Ihnen zeigen, wie es in Magento Admin aussieht:

Jetzt müssen wir dieses Widget speichern und den Cache leeren. Wie zuvor beschrieben, kann dies über den Administrator oder die Befehlszeile mit php bin/magento cache:clean und php bin/magento cache:flush

Sie können dieses einfache Modul hier herunterladen. Es ist offensichtlich keine vollständige Magento 2-Widget-Vorlage, aber es ist immer noch eine Lernhilfe. Falls Sie mehr Ressourcen benötigen oder relativ neu bei Magento sind, ist die offizielle Magento 2-Dokumentation der offensichtliche Ausgangspunkt.

Abschließend möchte ich noch ein paar persönliche Dev-Blogs erwähnen, die ich sehr nützlich fand. Alan Storm hat wahrscheinlich den didaktischsten Inhalt, wenn es darum geht, Magento zu lernen, und ich denke, Sie sollten sich auch den Blog von Alan Kent ansehen.

Widgets: Ein entscheidender Teil des großen Ganzen

Das Ziel dieses Artikels war es, eine Anleitung zur Widget-Erstellung in Magento 2 bereitzustellen, beginnend mit einem grundlegenden Schritt-für-Schritt-Tutorial, das die Entwicklung von Magento 2-Widgets und die Erstellung benutzerdefinierter Widgets abdeckt. Ich bin offensichtlich ein Fan von letzterem, da kundenspezifische Lösungen tendenziell mehr Flexibilität und Funktionalität bieten.

Magento-Widgets bieten entscheidende Front-End-Funktionen, daher ist es nicht schwer zu sagen, dass clevere benutzerdefinierte Widgets dazu beitragen können, Ihr nächstes Magento-Projekt auf die nächste Stufe zu bringen. Sie ermöglichen es uns, noch mehr Funktionalität zu implementieren, verschiedene Arten von Elementen mit verschiedenen Widgets zur Startseite hinzuzufügen und letztendlich Entwicklern einfach mehr kreative Freiheit zu geben.

Aber es geht nicht nur darum, die Benutzererfahrung und Conversions zu verbessern oder ein fantastisch aussehendes Design zu erstellen. Alle haben natürlich Priorität für jeden Kunden, aber es gibt kleinere, weniger offensichtliche Gewinne. Zum Beispiel können Magento-Widgets auch auf der Admin-Seite viel Zeit und Kopfschmerzen sparen, und jeder Kunde möchte auch Arbeitsstunden sparen.

Das sprengt jedoch den Rahmen dieses Artikels. Meine Absicht war es, einen schnellen technischen Überblick zu geben, ein einfach zu befolgendes Magento 2-Widget-Tutorial, nicht ROI und Marketing zu diskutieren.