Tutorial 2: Blöcke | Magento 2.4 Handbuch

Das folgende Tutorial veranschaulicht den Unterschied zwischen einfachen Blöcken und dynamischen Blöcken, und wie man Page Builder verwendet, um jede Art von Block zu erstellen.

Page Builder hat einen neuen Inhaltstyp namens Banner, der im ersten Tutorial vorgestellt wird und nichts mit der bisherigen Bannerfunktionalität zu tun hat. Die frühere Option Banner im Inhaltsmenü ist jetzt Dynamischer Block.

Dynamischer Block im Frontend

Dieses Lernprogramm setzt voraus, dass Sie Lernprogramm 1: Einfache Seite abgeschlossen haben, einschließlich der Voraussetzungen und der heruntergeladenen Beispieldateien. Folgen Sie den Teilen 1, 2, 3 und 4 dieses Tutorials der Reihe nach.

Diese Tutorials wurden aktualisiert, um die jüngsten Änderungen am Arbeitsbereich Page Builder in der Version 2.4.1 zu berücksichtigen. Wenn Sie eine frühere Version von Adobe Commerce verwenden, benutzen Sie die Page Builder Tutorials, die im Commerce 2.3 User Guide enthalten sind.

Teil 1: Erstellen eines einfachen Blocks

In diesem Tutorial werden Sie einen einfachen Block mit Inhalten von Google Maps erstellen. Einfache Blöcke werden manchmal auch CMS-Blöcke oder statische Blöcke genannt, weil sich der Inhalt nicht ändert. Ein einfacher Block ist ideal für Inhalte, die Sie vielleicht wiederverwenden möchten.

Schritt 1: Erstellen eines neuen Blocks

Gehen Sie in der Seitenleiste von Admin auf Inhalt > Elemente > Blöcke.
Klicken Sie in der oberen rechten Ecke auf “ Neuen Block hinzufügen”.
Geben Sie für Blocktitel Google Map ein.
Für Kennung, geben Sie google-map ein.
Wählen Sie die **AnsichtStore **, in der der Block verfügbar sein soll.

Blockinformationen
Klicken Sie in der oberen rechten Ecke auf Speichern.

Schritt 2: Hinzufügen einer Google-Karte

Scrollen Sie nach unten zur Inhaltsvorschau von Page Builder, die derzeit leer ist, und klicken Sie auf Bearbeiten mit Page Builder.
Erweitern Sie im Bedienfeld Page Builder Medien und ziehen Sie einen Platzhalter Karte auf den Arbeitsbereich.

Ziehen einer Karte auf den Arbeitsbereich

Eine Karte mit dem Standort Ihres Geschäfts wird angezeigt, wenn Google Maps für Ihr Geschäft konfiguriert ist.

Konfigurierte Google-Karte für Ihr Geschäft

Eine Platzhalterkarte wird angezeigt, wenn Google Maps noch nicht für Ihr Geschäft konfiguriert ist.

Google Maps-Platzhalter
Klicken Sie in der oberen rechten Ecke des Arbeitsbereich auf das Symbol Vollbild schließen ().

Dadurch kehren Sie zum Abschnitt Inhalt des Blocks zurück, in dem die Vorschau angezeigt wird.
Klicken Sie in der oberen rechten Ecke auf den Pfeil Speichern und wählen Sie Speichern && Schließen.

Schritt 3: Google Maps konfigurieren

Wenn Google Maps bereits für Ihren Shop konfiguriert ist, können Sie diesen Schritt überspringen und mit dem nächsten fortfahren.

Gehen Sie zur [Google Cloud Platform Console] (https://cloud.google.com/console/google/maps-apis/overview).
Klicken Sie auf die Dropdown-Liste “Projekt” und wählen Sie das Projekt aus, für das Sie einen API-Schlüssel hinzufügen möchten, oder erstellen Sie es.
Folgen Sie den Anweisungen in der Google Maps-Dokumentation, um Ihre API-Anmeldeinformationen zu konfigurieren.
Kopieren Sie Ihren API-Schlüssel in die Zwischenablage.
Kehren Sie zum Commerce Admin zurück und gehen Sie zu Stores > Einstellungen > Konfiguration.
Wählen Sie im linken Bereich unter Allgemein die Option Inhaltsverwaltung.
Erweitern Sie Erweiterte Inhaltswerkzeuge.

Erweiterte Inhalts-Tools
Fügen Sie bei Google Maps API Key den kopierten Schlüssel ein.
Klicken Sie auf Schlüssel testen.

Wenn es ein Problem mit Ihrem Schlüssel gibt, kehren Sie zur Google Maps Platform-Website zurück, um das Problem zu lösen. Versuchen Sie es dann erneut.
Nachdem Ihr Schlüssel überprüft wurde, klicken Sie auf Save Config.

Schritt 4: Hinzufügen des Blocks zu einer Seite

Gehen Sie in der Seitenleiste von Admin auf Inhalt > Elemente > Seiten.
Suchen Sie im Raster die Einfache Seite, die Sie im ersten Tutorial erstellt haben, und wählen Sie Bearbeiten in der Spalte Aktion.
Erweitern Sie den Abschnitt Inhalt und klicken Sie auf Bearbeiten mit Page Builder oder im Bereich der Inhaltsvorschau.
Ziehen Sie im Bereich Page Builder unter Layout einen Platzhalter Reihe an den oberen Rand des Arbeitsbereich.

Hinzufügen der Zeile am oberen Rand des Arbeitsbereich
Erweitern Sie im Bereich Page Builder Inhalt hinzufügen und ziehen Sie einen Block-Platzhalter in die neue Zeile.
Bewegen Sie den Mauszeiger über den leeren Blockcontainer, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ().

Block-Werkzeugkasten
Klicken Sie auf der Seite Block bearbeiten auf Block auswählen.

Block auswählen
Geben Sie in das Suchfeld map ein und drücken Sie die Enter/Return-Taste, um den von Ihnen erstellten Block zu finden.

Block in Liste suchen
Klicken Sie im Raster auf Auswählen, um den Google Maps-Block auszuwählen.
Klicken Sie in der oberen rechten Ecke auf Speichern, um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.
Klicken Sie in der oberen rechten Ecke des Arbeitsbereich auf das Symbol Vollbild schließen ().

Damit kehren Sie zum Abschnitt Inhalt der Seite zurück, auf der die Vorschau angezeigt wird.
Klicken Sie in der oberen rechten Ecke auf den Pfeil Speichern und wählen Sie Speichern && Schließen.

Auswählen der Option “Speichern und schließen”

Glückwunsch! Sie haben Teil 1 des Block-Tutorials abgeschlossen. Bewahren Sie Ihre Arbeit zum Nachschlagen auf.

Teil 2: Einen dynamischen Block erstellen

Ein dynamischer Block enthält eine Logik, die bestimmt, wo, wann und für wen er angezeigt wird. In diesem Tutorial werden Sie einen dynamischen Block für eine Werbeaktion erstellen, der ausgelöst wird, wenn die Bedingungen der Preisregel erfüllt sind, und der nur für ein bestimmtes Kundensegment angezeigt wird. Das Endergebnis dieses Beispiels ähnelt dem Banner, das im ersten Tutorial erstellt wurde, jedoch mit einer Logik, die steuert, wann es im Frontend angezeigt wird.

Beispiel für eine Luma-Tee-Aktion

Schritt 1: Erstellen eines neuen dynamischen Blocks

Gehen Sie in der Seitenleiste von Admin auf Inhalt > Elemente > Dynamische Blöcke.

Liste Dynamische Blöcke
Klicken Sie in der oberen rechten Ecke auf Dynamischen Block hinzufügen.

Seite Neuer dynamischer Block
Nehmen Sie die Grundeinstellungen für den neuen dynamischen Block vor:
- Setzen Sie Dynamischen Block aktivieren auf Ja.
- Geben Sie für Dynamischer Blockname Tee Shirt Promo ein.
- Setzen Sie Dynamischer Blocktyp auf Inhaltsbereich und klicken Sie auf Fertig.
  
  Der Typ des dynamischen Blocks bestimmt, wo im Seitenlayout der Block platziert werden soll. Wenn Sie einen dynamischen Block für Ihren Shop einrichten, sollten Sie sowohl das Seitenlayout als auch das Thema berücksichtigen, damit Sie den verfügbaren Platz optimal nutzen können. Einige Shops haben einen aktiven Inhaltsbereich, der auf eine feste Breite begrenzt ist, während andere sich über die gesamte Breite des Bildschirms erstrecken.
  
  Einstellung Dynamischer Blocktyp
- Aktivieren Sie unter Kundensegment das Kontrollkästchen für jedes Segment, das Sie auf den dynamischen Block anwenden möchten, und klicken Sie auf Fertig, um die Liste der Segmente zu speichern.
  
  Für dieses Beispiel haben wir zwei Kundensegmente erstellt, die registrierte Kunden nach Geschlecht identifizieren. Dieser dynamische Block wird nur registrierten weiblichen Kunden angezeigt, die in ihren Konten eingeloggt sind, während sie in Ihrem Shop einkaufen.
  
  Auswahl der Kundensegmente

Schritt 2: Vervollständigen Sie die Einstellungen

Scrollen Sie nach unten zum Abschnitt Inhalt, der eine leere Page Builder Inhaltsvorschau anzeigt, und klicken Sie auf Bearbeiten mit Page Builder. Führen Sie dann die folgenden Aufgaben aus:

Aufgabe 1: Hinzufügen eines Hintergrundbildes

Bewegen Sie den Mauszeiger über den Zeilencontainer, um die Toolbox anzuzeigen, und wählen Sie das Symbol Settings ().
Wählen Sie unter Auftritt die Option Voller Beschnitt.
Geben Sie für Minimum Height 400px ein.
Scrollen Sie zum Abschnitt Hintergrund und legen Sie das Hintergrundbild fest, indem Sie auf Aus Galerie auswählen klicken und das im ersten Tutorial hochgeladene Bild wide-banner-background.png auswählen.
Klicken Sie in der oberen rechten Ecke auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

Zeile mit dem Bild

Aufgabe 2: Spalten hinzufügen

Ziehen Sie im Page Builder Panel unter Layout einen Spalten Platzhalter auf die Zeile.

Ziehen Sie den Spaltentyp in die Zeile

Die Zeile ist nun in zwei gleich breite Spalten unterteilt.

Aufgabe 3: Text hinzufügen

Erweitern Sie im Page Builder Panel Elemente und ziehen Sie einen Text Platzhalter in die zweite Spalte.

Ziehen eines Textfeldes in die zweite Spalte
Geben Sie die folgenden drei Textzeilen in den Editor ein:

Noch mehr Möglichkeiten zum Mischen und Anpassen

Kaufe 3 Luma-T-Shirts und erhalte ein 4. gratis

Shop Tees >

Text für die Spalte eingeben
Markieren Sie alle drei Textzeilen und stellen Sie die Zeilenhöhe über die Symbolleiste auf 40px ein.

Einstellung der Zeilenhöhe
Stellen Sie die Schriftgröße für jede Zeile wie folgt ein:

Zeile 1: 28px

Zeile 2: 24px

Zeile 3: 18px

Da dieser Block überall auf der Seite platziert werden könnte, verwenden wir den Standard-Absatzstil und nicht die Überschriftenebenen. Machen Sie sich auch keine Sorgen, dass der Text in der Spalte noch nicht richtig umbricht.

Formatierter Text

Aufgabe 4: Einen Link hinzufügen

Im ersten Tutorial haben Sie gelernt, wie man den Inhaltstyp Button verwendet, um einen Link zu erstellen. In diesem Beispiel wird gezeigt, wie man einen Link über die Symbolleiste des Editors einfügt.

Öffnen Sie in einem anderen Browser-Tab das Frontend und navigieren Sie zu der Seite, die das Ziel für den Link sein soll.

Sie können die vollständig qualifizierte URL oder eine relative URL verwenden, bei der der Verweis auf die Domäne Ihres Geschäfts weggelassen wird.

Vollständige URL

https://mystore.com/women/tops-women/tees-women.html

Relative URL

../frauen/oberteile-frauen/tees-frauen.html
Kehren Sie zur Registerkarte Page Builder Arbeitsbereich und zum Texteditor zurück, markieren Sie den Text Shop Tees &> in der dritten Zeile und wählen Sie Fett () in der Symbolleiste des Editors.
Wenn der Text Shop Tees > in der dritten Zeile immer noch ausgewählt ist, wählen Sie Link einfügen/bearbeiten () in der Symbolleiste des Editors.

Link einfügen
Für Url geben Sie den relativen Link ein, den Sie vorbereitet haben.
Setzen Sie Target auf None.

Mit dieser Einstellung wird die Seite im selben Browserfenster geöffnet, anstatt eine neue Registerkarte zu öffnen.
Geben Sie für Titel Shop Tees ein.

Das Link-Attribut Titel wird von einigen Browsern als Tooltip verwendet.
Klicken Sie auf OK, um den Link zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

Link-Details
Klicken Sie in der oberen rechten Ecke des Arbeitsbereich auf das Symbol Vollbild schließen ().

Dadurch kehren Sie zum Abschnitt Inhalt für den dynamischen Block zurück, in dem die Vorschau angezeigt wird.
Klicken Sie in der oberen rechten Ecke auf Speichern.

Schritt 3: Hinzufügen einer Preisregel

Öffnen Sie den dynamischen Block Tee Shirt Promo erneut im Bearbeitungsmodus.
Erweitern Sie den Abschnitt Verwandte Angebote und klicken Sie auf Preisregeln zum Warenkorb hinzufügen.

Zugehörige Sonderangebote
Aktivieren Sie auf der Seite Zugehörige Preisregeln zum Warenkorb hinzufügen das Kontrollkästchen für die Preisregel Kaufen Sie 3 T-Shirts und erhalten Sie das vierte gratis und klicken Sie auf Ausgewählte hinzufügen.

Hinzufügen einer Preisregel für den verbundenen Warenkorb

Die Preisregel wird im Abschnitt Verbundene Aktionen unter Preisregel für verbundenen Warenkorb angezeigt. Sie können mehrere Preisregeln mit einem dynamischen Block verknüpfen. Für dieses einfache Beispiel verwenden wir jedoch nur eine.

Ausgewählte Warenkorbpreisregel
Klicken Sie in der oberen rechten Ecke auf Speichern.

Schritt 4: Hinzufügen des dynamischen Blocks zu einer Seite

Gehen Sie in der Seitenleiste von Admin auf Inhalt > Element > Seiten
Suchen Sie die Einfache Seite, die Sie im ersten Tutorial erstellt haben, und öffnen Sie sie im Bearbeitungsmodus.
Erweitern Sie den Abschnitt Inhalt und klicken Sie auf Bearbeiten mit Page Builder.
Bewegen Sie den Mauszeiger über die oberste Zeile mit demselben Bild wie der dynamische Block, um die Toolbox und das Symbol Entfernen () anzuzeigen.

Klicken Sie auf OK, um das Entfernen der Zeile von der Seite zu bestätigen.
Ziehen Sie im Bereich Page Builder unter Layout einen neuen Platzhalter Zeile an den oberen Rand des Arbeitsbereich.
Erweitern Sie im Bedienfeld Page Builder unter Inhalt hinzufügen und ziehen Sie einen Platzhalter Dynamischer Block in die neue Zeile.

Ziehen eines dynamischen Blocks auf die Zeile
Bewegen Sie den Mauszeiger über den Container des dynamischen Blocks, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ().

Werkzeugkasten Dynamischer Block
Klicken Sie auf der Seite Dynamischen Block bearbeiten auf Dynamischen Block auswählen.

Dynamischen Block auswählen
Suchen Sie den dynamischen Block Tee Shirt Promo, den Sie erstellt haben, und klicken Sie auf Auswählen.

Eine Zusammenfassung der Informationen des dynamischen Blocks wird unten angezeigt.

Informationen zum Dynamischen Block
Übernehmen Sie die Standardvorlage Vorlage, Dynamischer Block Blockvorlage.
Wenn Sie fertig sind, klicken Sie auf Speichern, um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

Dynamischer Block in der Seitenvorschau
Klicken Sie in der oberen rechten Ecke des Arbeitsbereich auf das Symbol Vollbild schließen ().

Damit kehren Sie zum Abschnitt Inhalt der Seite zurück, auf der die Vorschau angezeigt wird.
Klicken Sie in der oberen rechten Ecke auf den Pfeil Speichern und wählen Sie Speichern && Schließen.

*Herzlichen Glückwunsch!** Sie haben den Teil 2 des Block-Tutorials abgeschlossen. Bewahren Sie Ihre Arbeit zum Nachschlagen auf.

Teil 3: Aktualisieren des dynamischen Blocks

In diesem letzten Teil des Tutorials werden Sie einen dynamischen Block bearbeiten, während die Seite in Ihrem Shop live ist. Loggen Sie sich dann als Mitglied des Kundensegments in den Shop ein, damit der Block erscheint.

Beispiel für einen dynamischen Block im Frontend

Schritt 1: Bearbeiten Sie den dynamischen Block

Gehen Sie in der Seitenleiste von Admin auf Inhalt > Elemente > Dynamische Blöcke.
Suchen Sie Ihren dynamischen Block Tee Shirt Promo im Raster und öffnen Sie ihn im Bearbeitungsmodus.
Erweitern Sie den Inhalt Abschnitt und klicken Sie auf Bearbeiten mit Page Builder.
Ändern Sie die Spaltenbreite:
- Bewegen Sie den Mauszeiger über den Rand zwischen den beiden Spalten.
- Halten Sie die Maustaste gedrückt und ziehen Sie den Rahmen um zwei Bereiche nach links.
  
  Rastereinteilungen
  
  Die erste Spalte ist nun vier von zwölf (4/12) Rasterabschnitten breit, die zweite Spalte acht von zwölf (8/12) Abschnitten.
  
  Zwei ungleiche Spalten
Ändern Sie die Textfarbe:
- Markieren Sie die ersten beiden Zeilen des Textes.
- Wählen Sie in der Symbolleiste des Editors die Option Textfarbe und klicken Sie auf das Farbfeld Weiß.
Textfarbe
Klicken Sie in der oberen rechten Ecke des Arbeitsbereich auf das Symbol Vollbild schließen ().

Dadurch kehren Sie zum Abschnitt Inhalt des dynamischen Blocks zurück, in dem die Vorschau angezeigt wird.
Klicken Sie in der oberen rechten Ecke auf Speichern.

Schritt 2: Anzeigen des dynamischen Blocks

Da dieser dynamische Block nur für Mitglieder eines bestimmten Kundensegments sichtbar ist, müssen Sie sich als Kunde anmelden, der Mitglied des Kundensegments ist, um die Aktion zu sehen. In diesem Beispiel wird der Block nur für weibliche Kunden angezeigt.

Öffnen Sie ein Browserfenster zu Ihrem Frontend.
Um Ihre Musterseite anzuzeigen, ändern Sie die URL in der Adressleiste wie folgt:

mystore.com/sample-page

Wenn Ihr Shop so konfiguriert ist, dass er das Suffix html enthält, fügen Sie das Suffix wie folgt ein:

mystore.com/beispiel-seite.html
Melden Sie sich als Kundin an:
- Klicken Sie in der oberen rechten Ecke Ihrer Homepage auf Einloggen.
- Wenn die Luma-Beispieldaten auf Ihrem System installiert sind, verwenden Sie die folgenden Anmeldedaten:
  
  E-Mail roni_cost@example.com
  
  Passwort roni_cost3@example.com
- Klicken Sie auf ”Anmelden”.
- Kehren Sie zur Musterseite zurück, um den dynamischen Block zu sehen, den Sie mit dem Tee Shirt Promo erstellt haben.
Dynamischer Block für ein Kundensegment angezeigt

*Herzlichen Glückwunsch!** Sie haben den Teil 3 des Block-Tutorials abgeschlossen. Bewahren Sie Ihre Arbeit zum Nachschlagen auf.

Wenn Sie bereit sind, fahren Sie fort mit Tutorial 3: Kataloginhalt

E-Mail	`roni_cost@example.com`
Passwort	`roni_cost3@example.com`

Zeile 1:	28px
Zeile 2:	24px
Zeile 3:	18px