So erstellen Sie ein benutzerdefiniertes Widget in Magento 2

Widgets sind unglaubliche Funktionen, mit denen Sie CMS-Seiten und -Blöcken auf Ihrer Magento 2-Website dynamischen oder statischen Inhalt hinzufügen können. Sie sind wiederverwendbare und wichtige Tools, die mehrere Funktionen bereitstellen, die im CMS-Block eines Magento 2-Stores verwendet werden können.


Wenn Widgets zum Magento-Store hinzugefügt werden, können Besucher problemlos in Ihrem Store surfen und ihn anzeigen. Sie erstellen auffällige Website-Vorlagen und -Designs, die die Benutzererfahrung bereichern und gleichzeitig eine beispiellose Kontrolle und Flexibilität im Admin-Bereich bieten.

Dieses Tutorial hilft Ihnen dabei, ein benutzerdefiniertes Widget in Ihrem Magento 2-Shop zu erstellen, um die Besuchererfahrung zu verbessern und die Navigation im Store zu verbessern.

Bereit? Lass uns anfangen.

Schritt 1 – Erstellen eines neuen Moduls

Der erste Schritt beim Erstellen eines benutzerdefinierten Widgets in Magento 2 ist das Einrichten eines neuen Moduls. Das Modul benötigt einen Modulordner und in unserem Fall wird ein Namespace verwendet HostAdvice als Namespace und CustomWidget als Modulordnername. Der Modulordner befindet sich im Herstellerordner mit dem Titel App / Code.

Für dieses Tutorial verwenden wir app / code / HostAdvicel / CustomWidget / composer.json. Der Komponist lädt diese Datei, wenn wir sie ausführen, obwohl wir den Komponisten nicht mit dem Modul verwenden.

Schritt 2 – Registrierung.php erstellen

Wir müssen das Modul bei Magento registrieren. Um dies zu erreichen, erstellen Sie zunächst eine register.php in der Lage app / code / HostAdvice / CustomWidget / registration.php mit dem Code unten.

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

Verwenden Sie als Nächstes den folgenden Code, um eine Registrierungsdatei, module.xml, am Speicherort zu erstellen app / code / HostAdvice / CustomWidget / module.xml.

<?xml version ="1.0" ?>

Schritt 3 – Initialisieren des Widgets

Sobald Sie die erforderlichen Registrierungsdateien erstellt haben, wird im nächsten Schritt das Widget initialisiert. Ein … kreieren widget.xml Konfigurationsdatei am Speicherort app / code / HostAdvice / CustomWidget / etc / widget.xml. Verwenden Sie den folgenden Befehl:

<?xml version ="1.0" ?>

HostAdvice-Beispiel-Widget

Titel

Inhalt

Im obigen Befehl haben wir zwei Eingabefelder beschriftet, Titel, und Inhalt. Immer wenn das neue Widget aufgerufen wird, werden die Werte beider Felder angezeigt. Außerdem haben wir im Tag die Blockklasse deklariert, HostAdvice \ CustomWidget \ Block \ Widget \ Samplewidget um das neue Widget anzuweisen, die bestimmte Vorlage zu verwenden.

Schritt 4 – Erstellen eines Widgetblocks

Erstellen Sie als Nächstes ein Blockfeld mit dem Titel Samplewidget.php, in der Lage HostAdvice / CustomWidget / Block / Widget /, mit dem folgenden Code:

<?php

Namespace HostAdvicel \ CustomWidget \ Block \ Widget;

Verwenden Sie Magento \ Framework \ View \ Element \ Template.
Verwenden Sie Magento \ Widget \ Block \ BlockInterface.

Klasse Samplewidget erweitert Template implementiert BlockInterface
{

protected $ _template = "widget / samplewidget.phtml";;

}}

Im obigen Befehl, HostAdvice \ CustomWidget \ Block \ Widge \ Samplewidget ist ordnungsgemäß deklariert und eine benutzerdefinierte Vorlage wird innerhalb der zugewiesen $ _template Variable.

Jetzt verwenden wir den folgenden Befehl, um eine Vorlagendatei zu erstellen samplewidget.phtml, in der Lage HostAdvice / CustomWidget / view / frontend / templates / widget.

<?PHP wenn ($ Block->getData (‘widgettitle’)): ?>

<?PHP Echo $ Block->getData (‘widgettitle’); ?>

<?PHP Endif; ?>
<?PHP wenn ($ Block->getData (‘widgetcontent’)): ?>

<?PHP Echo $ Block->getData (‘widgetcontent’); ?>

<?PHP Endif; ?>
Im obigen Code wurden die Widget-Parameter durch Aufrufen von $ this ausgewählt->getData (‘widgettitle’); und $ this->getData (‘widgetcontent’); Werte.

Schritt 5 – Veröffentlichen des Widgets

Inzwischen wurde Ihr benutzerdefiniertes Widget erfolgreich erstellt. Melden Sie sich im Magento 2-Administrationsbereich an und wählen Sie Inhalt dann Seiten.

Klicken Wählen in der Homepage-Option und wählen Sie Bearbeiten.

Erweitern Sie die Inhalt Abschnitt und klicken Sie auf die Widget einfügen Symbol zum Posten des benutzerdefinierten Widgets.

Dies bringt Sie zum Widget einfügen Bereich. Klicken Sie im Widget-Typ auf den Pfeil und wählen Sie HostAdvice-Beispiel-Widget, aus der Dropdown-Liste.

In dem Widgets-Optionen, Geben Sie die Inhalt und Titel Klicken Sie auf Widget einfügen, um auf der Startseite angezeigt zu werden.

Um Änderungen vorzunehmen, leeren Sie den Magento 2-Cache, indem Sie die CLI starten und die folgenden Befehle ausführen:

PHP Bin / Magento Cache: sauber
PHP Bin / Magento Cache: Flush

Laden Sie das Frontend Ihres Shops.

Fazit

Das ist es! Sie haben erfolgreich ein neues benutzerdefiniertes Widget in Ihrem Magento 2-Store entwickelt und veröffentlicht. Das neue Widget ist für Ihren Front-End-Betrieb von entscheidender Bedeutung, da es mehr kreative Freiheit bietet und es Ihnen ermöglicht, Ihre Produkte problemlos zu vermarkten.

Schauen Sie sich diese Top 3 Magento Hosting Services an:

FastComet

Startpreis:
2,95 $


Verlässlichkeit
9.7


Preisgestaltung
9.5


Benutzerfreundlich
9.7


Unterstützung
9.7


Eigenschaften
9.6

Bewertungen lesen

Besuchen Sie FastComet

A2 Hosting

Startpreis:
$ 3,92


Verlässlichkeit
9.3


Preisgestaltung
9.0


Benutzerfreundlich
9.3


Unterstützung
9.3


Eigenschaften
9.3

Bewertungen lesen

Besuchen Sie A2 Hosting

ScalaHosting

Startpreis:
4,95 $


Verlässlichkeit
9.4


Preisgestaltung
9.5


Benutzerfreundlich
9.5


Unterstützung
9.5


Eigenschaften
9.4

Bewertungen lesen

Besuchen Sie ScalaHosting

Verwandte Anleitungen

  • So erstellen Sie Bundle-Produkte in Magento 2
    mittlere
  • So erstellen Sie ein neues Produkt in Magento
    Neuling
  • So richten Sie die SSL / TLS-Verschlüsselung unter Magento ein
    mittlere
  • So erstellen Sie ein neues Magento-Design
    mittlere
  • So installieren Sie Magento in Cpanel
    Neuling
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me