Der Anfängerleitfaden für Magento-Blöcke und -Widgets

Blöcke und Widgets sind die wichtigsten Layoutfunktionen in Magento. Diese beiden Funktionen sind sehr eng miteinander verbunden und werden oft zusammen verwendet.

Eine Möglichkeit, über Blöcke nachzudenken, ist, dass sie Mini-Seiten sind. Ein Block kann auch Text, Bilder, Videos und mehr enthalten. Da Blöcke jedoch kleiner sind, werden Sie sie an den Rändern Ihrer Website sehen. Blöcke werden oft in Kopf-, Seiten- und Fußzeilen eingefügt.

Blöcke werden jedoch mithilfe von Widgets platziert. Zuerst erstellst du einen Block und dann verwendest du ein Widget, um zu entscheiden, wo dieser Block angezeigt wird.

Lassen Sie uns Sie durch einige Beispiele führen und Ihnen zeigen, wie Blöcke und Widgets in Magento funktionieren.

Dieser Leitfaden stammt aus Magento 2 Explained, dem meistverkauften Buch für Magento 2. Wir verwenden in diesem Buch das Beispiel eines Geschäfts namens „Orangeville“, sodass Sie sehen, dass hier darauf verwiesen wird.

Erstellen von Magento-Blöcken erklärt

Lassen Sie uns den Prozess der Erstellung unseres ersten Blocks durchgehen. Diese enthält einen HTML-Link.

• Gehen Sie zu „Inhalt“ und dann zu „Blöcke“.
• Klicken Sie oben rechts auf „Neuen Block hinzufügen“.

• Geben Sie als „Blocktitel“ „Schlüssellinks“ ein. Das sehen die Besucher auf dem Bildschirm.
• Geben Sie als Bezeichner "key_links" ein. Diese Zeichenfolge verwendet Magento, um den Block zu identifizieren, aber Besucher werden ihn nie sehen.

• Klicken Sie auf das Aufzählungszeichen in der Editor-Symbolleiste:

• Geben Sie "Über Orangeville" als Aufzählungspunkt ein:
• Wählen Sie den Text „Über Orangeville“ aus und klicken Sie auf das Link-Symbol.

• Sie sehen nun ein Popup-Fenster. Geben Sie die URL Ihrer "Über Orangeville"-Seite ein. Wenn Sie sich nicht sicher sind, was das ist, können Sie Ihre Magento-Site in einem neuen Browser-Tab öffnen und die URL suchen, die wahrscheinlich example.com/about-orangeville/ lautet.
• Klicken Sie auf „Einfügen“.
• Sie haben jetzt einen „Über Orangeville“-Link in Ihrem Block:

• Klicken Sie auf „Block speichern“.

Erstellen von Magento-Widgets erklärt

Wir haben jetzt die Herausforderung, Ihren Block in Ihr Website-Design zu platzieren. Hier kommen Magentos Widgets ins Spiel. In Magento ist ein Block nur ein Stück Inhalt. Es ist das Widget, das die Platzierung des Blocks steuert.

Das ist jedoch nicht alles, was ein Widget leisten kann. Ein Widget kann unsere einfachen, neuen Blöcke platzieren, aber es kann auch viele andere Funktionen platzieren.

• Gehen Sie zu „Inhalt“ und dann zu „Widgets“.
• Klicken Sie auf „Widget hinzufügen“.
• Wählen Sie als „Typ“ „CMS Static Block“ aus.
• Wählen Sie als „Designthema“ „Magento Luma“.
• Klicken Sie auf „Weiter“.

• Geben Sie als „Widget-Titel“ „Key Orangeville Links“ ein.
• Wählen Sie unter „Zu Store-Ansichten zuweisen“ „Alle Store-Ansichten“ aus.

Als Nächstes steuern wir, auf welchen URLs dieser Block angezeigt wird.

• Klicken Sie auf „Layoutaktualisierung hinzufügen“.

• Wählen Sie „Alle Seiten“.

• Wählen Sie „CMS Footer Links“ für die Option „Container“.

Diese beiden Optionen, „Alle Seiten“ und „CMS-Fußzeilen-Links“, sind für Sie möglicherweise noch nicht sehr sinnvoll. Wir werden jedoch die Erstellung des Widgets abschließen und später in diesem Kapitel, im Abschnitt „Erläuterung der Platzierung des Magento-Widgets“, mehr darüber erklären, warum wir diese Auswahl getroffen haben.

Unter "Layout-Updates" treffen wir eine zweite Wahl für die Platzierung unseres Widgets.

• Wählen Sie „Alle Produkttypen“.
• Wählen Sie erneut "CMS-Fußzeilen-Links".
• Nachdem Sie diese beiden Optionen hinzugefügt haben, sieht Ihr Bildschirm wie im Bild unten aus.

An diesem Punkt haben Sie das Widget erstellt und Magento mitgeteilt, wo es auf Ihrer Website erscheinen soll: Dieses Widget wird auf allen unseren Seiten und allen unseren Produkten erscheinen.

Jetzt ist es an der Zeit, den Inhalt des Widgets auszuwählen, das der zuvor erstellte Block sein wird.

• Klicken Sie in der Seitenleiste auf „Widget-Optionen“.
• Klicken Sie auf „Block auswählen“.

• Jetzt können Sie den zuvor erstellten Block "Schlüsselverknüpfungen" auswählen:

• Klicken Sie auf "Speichern".
• Besuchen Sie die Vorderseite Ihrer Website, und Sie werden sehen, dass Ihr Link jetzt in der Fußzeile veröffentlicht ist. Sie haben einen Block mit dem Inhalt erstellt und ihn in einem Widget veröffentlicht.

Gemeinsam Blöcke und Widgets erstellen

Es gibt definitiv einige knifflige Schritte beim Erstellen von Blöcken und Widgets. Lassen Sie uns also diesen ganzen Prozess gemeinsam ausprobieren. Wir erstellen einen zweiten Block und platzieren ihn mit Hilfe eines Widgets auf unserer Seite. Dieser Block wird den Leuten sagen, dass wir eine 100%ige Zufriedenheitsgarantie haben.

• Gehen Sie zu „Inhalt“ und dann zu „Blöcke“.
• Klicken Sie auf „Neuen Block hinzufügen“.
• Titel: Zufriedenheit garantiert
• Identifikator: Garantie

• Geben Sie Text für Ihren Block ein. Ich schrieb: „Hier bei Orangeville steht Ihre Zufriedenheit an erster Stelle. Wenn Sie nicht zufrieden sind, erstatten wir Ihnen Ihr Geld.“

Als nächstes werden wir ein Bild für unseren Block hochladen.

• Platzieren Sie Ihren Cursor im Hauptinhaltsbereich unter dem Text, den Sie gerade geschrieben haben.
• Klicken Sie auf das Baumsymbol in Ihrer Editor-Symbolleiste.
• Wenn Sie das Popup-Fenster sehen, klicken Sie auf das kleine Kästchensymbol.
• Suchen Sie ein Bild, das Sie hochladen können. Ich habe mich für ein 100%-Abzeichen entschieden.

• Klicken Sie auf „Datei einfügen“.
• Bildbeschreibung: Zufriedenheitsgarantie
• Klicken Sie auf „Einfügen“.

• Sie haben jetzt einen Block, der sowohl Text als auch Ihr neues Bild enthält.
• Klicken Sie auf „Block speichern“, um die Erstellung dieses Blocks abzuschließen.

Als Nächstes erstellen wir das Widget, das diesen Block auf unserer Website anzeigt.

• Gehen Sie zu „Inhalt“ und dann zu „Widgets“.
• Klicken Sie auf „Widget hinzufügen“.
• Typ: Statischer CMS-Block
• Designthema: Magento Luma

• Titel des Widgets: Zufriedenheit garantiert
• Store-Ansichten zuweisen: Alle Store-Ansichten

• Layout-Update: Ankerkategorien
• Container: Seitenleiste Main
• Klicken Sie auf „Widget-Optionen“ und wählen Sie den Block „Zufriedenheitsgarantie“, den Sie gerade erstellt haben.

• Klicken Sie auf "Speichern".
• Besuchen Sie die Vorderseite Ihrer Website. Klicken Sie auf einen der Kategorie-Links im oberen Menü. Im Bild unten habe ich auf „Obst“ geklickt. Sie sehen nun Ihren Garantieblock in der linken Seitenleiste:

Magento-Widget-Platzierung erklärt

Eine häufige Frage, die ich von Magento-Lernenden bekomme, betrifft die Platzierung von Widgets.

Woher wissen Sie, ob Sie „CMS Footer Links“ oder „Sidebar Main“ für den Container auswählen sollen? Immerhin gibt es 22 verschiedene Möglichkeiten, wie Sie im Bild unten sehen können.

Was ist der Unterschied zwischen „After Page Header“ und „After Page Header Top“? Was ist der Unterschied zwischen „Page Footer“ und „Page Footer Container“? Diese Namen sind so ähnlich, dass sie definitiv verwirrend sein können.

Leider gibt es keine sichere Möglichkeit, dies im Voraus zu sagen, obwohl der Name Ihnen eine gute Vorstellung von der Platzierung gibt:

• After Page Header: Dies ist wahrscheinlich unter dem Hauptmenü.
• Hauptinhalt unten: Dies ist wahrscheinlich ganz unten in der Mitte des Bildschirms, unter unseren Produkten oder Seiteninhalten.
• Seitenanfang: Dies wird ganz oben auf den Seiten angezeigt, aber nicht auf den Produktbildschirmen.

Es ist erwähnenswert, dass sich diese Optionen ändern, sogar auf derselben Website. Wenn Sie versuchen, einen Block zu platzieren und „Alle Produkttypen“ für die „Layout-Optionen“ Ihres Widgets auszuwählen, erhalten Sie andere Auswahlmöglichkeiten, wie im Bild unten gezeigt. Diese Optionen bieten einige Platzierungen, die nur für Ihre Produktbildschirme sinnvoll sind. Beispielsweise sehen Sie jetzt Auswahlmöglichkeiten, die „Container für soziale Links des Produkts“ und „Formularfelder vorher überprüfen“ enthalten. Diese Widget-Platzierungen sind nirgendwo sinnvoll, außer auf Produktbildschirmen.

Andererseits kann diese Liste manchmal viel kürzer sein. Im nächsten Teil dieses Kapitels werden wir sehen, dass einige Widgets nur mit drei Container-Optionen ausgestattet sind.

Es gibt also keine garantierte Möglichkeit, genau zu sagen, wo Ihr Widget erscheinen wird, wenn Sie einen bestimmten Container auswählen. Beim Testen dieser verschiedenen Optionen sind einige Tests und Experimente erforderlich.

Zusammenfassung der Magento-Blöcke und -Widgets

Mit Blöcken und Widgets können Sie dem Design Ihrer Website neue Elemente hinzufügen. Es gibt jedoch einige Elemente auf Ihrer Website, die nicht einfach über die Admin-Oberfläche von Magento geändert oder ersetzt werden können. Sie sehen aus, als sollten sie Blöcke und Widgets sein, aber Magento hat sie nicht so erstellt. Also habe ich eine Seite mit Anweisungen zum Aktualisieren einiger dieser Standardelemente erstellt.

Wenn Sie bereit sind, mehr über Magento zu erfahren, lesen Sie Magento 2 Explained, das meistverkaufte Buch für Magento 2.

Wir haben auch einige weitere großartige Magento-Tutorials online, darunter:

• Der Anfängerleitfaden zum Verständnis von Magento-Steuern
• Basis-, kleine, Miniatur- und Musterbilder in Magento
• Erfahren Sie, was Magento 2-Indizes sind und wie Sie sie verwalten können