Page Builder Durchgehender Teil 2: Blöcke

Wechseln Sie in der Seitenleiste Admin zu Content > Elements>Blocks.

Klicken Sie in der oberen rechten Ecke auf Add New Block.

Geben Sie für Block Title den Wert Google Map ein.

Geben Sie für Identifier den Wert google-map ein.

Wählen Sie die Store View aus, wo der Block verfügbar sein soll.

{width="600" modal="regular"}

Klicken Sie in der oberen rechten Ecke auf Save.

Scrollen Sie nach unten zur Inhaltsvorschau Page Builder (derzeit leer) und klicken Sie auf Edit with Page Builder.

Erweitern Sie im Bedienfeld Page Builder den Wert Media und ziehen Sie einen Platzhalter Map auf die Bühne.

{width="600" modal="regular"}

Eine Zuordnung zu Ihrem Speicherort wird angezeigt, wenn Google Maps für Ihren Store konfiguriert ist.

{width="600" modal="regular"}

Eine Platzhalterzuordnung wird angezeigt, wenn Google Maps noch nicht für Ihren Store konfiguriert ist.

{width="600" modal="regular"}

Klicken Sie in der oberen rechten Ecke der Bühne auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, gelangen Sie zum Abschnitt "Content"für den Block mit der Vorschau.

Klicken Sie in der oberen rechten Ecke auf den Pfeil Save und wählen Sie Save & Close.

Wechseln Sie zur Google Cloud Platform Console.

Klicken Sie auf das Projekt-Dropdown-Menü und wählen oder erstellen Sie das Projekt, für das Sie einen API-Schlüssel hinzufügen möchten.

Um Ihre API-Anmeldeinformationen zu konfigurieren, befolgen Sie die Anweisungen in der Google Maps -Dokumentation.

Kopieren Sie Ihren API-Schlüssel in die Zwischenablage.

Kehren Sie zum Commerce Admin zurück und gehen Sie zu Stores > Settings>Configuration.

Wählen Sie im linken Bereich unter General ​die Option Content Management.

Erweitern Sie Advanced Content Tools.

{width="600" modal="regular"}

Weitere Informationen zu den Content Management Advanced Tools -Konfigurationsoptionen finden Sie im Konfigurationshandbuch.

Fügen Sie für Google Maps API Key den kopierten Schlüssel ein.

Klicken Sie auf Test Key.

Wenn ein Problem mit Ihrem Schlüssel auftritt, kehren Sie zur Platform-Site "Google Maps"zurück, um das Problem zu beheben. Versuchen Sie es dann erneut.

Nachdem Ihr Schlüssel verifiziert wurde, klicken Sie auf Save Config.

Wechseln Sie in der Seitenleiste Admin zu Content > Elements>Pages.

Suchen Sie im Raster nach dem im ersten Tutorial erstellten Simple Page ​und wählen Sie Edit ​in der Spalte​ Action aus.

Erweitern Sie im Abschnitt Content und klicken Sie auf Edit with Page Builder oder innerhalb des Inhaltsvorschaubereichs.

Ziehen Sie im Bedienfeld Page Builder unter Layout ​einen Platzhalter Row ​an den Anfang der Bühne.

{width="600" modal="regular"}

Erweitern Sie im Bedienfeld Page Builder den Wert Add Content und ziehen Sie einen Platzhalter Block in die neue Zeile.

Bewegen Sie den Mauszeiger über den leeren Block-Container, um die Toolbox anzuzeigen und das Symbol Einstellungen ( {width="20"} ) zu wählen.

{width="600" modal="regular"}

Klicken Sie auf der Seite Block bearbeiten auf Select Block.

{width="600" modal="regular"}

Geben Sie im Suchfeld map ein und drücken Sie die Eingabetaste, um den von Ihnen erstellten Block zu suchen.

{width="600" modal="regular"}

Klicken Sie im Raster auf Select , um den Block Google Maps auszuwählen.

Klicken Sie oben rechts auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

Klicken Sie in der oberen rechten Ecke der Bühne auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, gelangen Sie zum Abschnitt "Content"für die Seite, in der die Vorschau angezeigt wird.

Klicken Sie in der oberen rechten Ecke auf den Pfeil Save und wählen Sie Save & Close.

Wechseln Sie in der Seitenleiste Admin zu Content > Elements>Dynamic Blocks.

{width="700" modal="regular"}

Klicken Sie in der oberen rechten Ecke auf Add Dynamic Block.

{width="600" modal="regular"}

Konfigurieren Sie die grundlegenden Einstellungen für den neuen dynamischen Block:

• Setzen Sie Enable Dynamic Block auf Yes.

• Geben Sie für Dynamic Block Name den Wert Tee Shirt Promo ein.

• Setzen Sie Dynamic Block Type auf Content Area und klicken Sie auf Done.

  Der dynamische Blocktyp bestimmt, wo der Block im Seitenlayout platziert wird. Beim Einrichten eines dynamischen Blocks für Ihren Store sollten Sie sowohl das Seitenlayout als auch das Design berücksichtigen, damit Sie den verfügbaren Platz sinnvoll einsetzen können. Einige Stores haben einen aktiven Inhaltsbereich, der auf eine feste Breite beschränkt ist, während andere die volle Breite des Bildschirms erweitern.

  {width="600" modal="regular"}

• Aktivieren Sie für "Customer Segment"das Kontrollkästchen jedes Segments, das Sie auf den dynamischen Block anwenden möchten, und klicken Sie auf "Fertig", um die Segmentliste zu speichern.

  Im folgenden Beispiel gibt es zwei Kundensegmente, die registrierte Kunden nach Geschlecht identifizieren. Dieser dynamische Block erscheint nur registrierten weiblichen Kunden, die bei ihrem Einkauf in Ihrem Geschäft bei ihren Konten angemeldet sind.

  {width="600" modal="regular"}

Bewegen Sie den Mauszeiger über den Zeilencontainer, um die Symbolleiste anzuzeigen und das Symbol Einstellungen ( {width="20"} ) zu wählen.

Wählen Sie unter "Appearance"die Option "Full Bleed".

Geben Sie für Minimum Height den Wert 400px ein.

Scrollen Sie zum Abschnitt "Background"und legen Sie den Wert "Background Image"fest, indem Sie auf "Select from Gallery"klicken und das im ersten Tutorial hochgeladene Bild "wide-banner-background.png"auswählen.

Klicken Sie oben rechts auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

{width="600" modal="regular"}

Erweitern Sie im Bedienfeld Page Builder den Eintrag Elements und ziehen Sie einen Platzhalter Text in die zweite Spalte.

{width="600" modal="regular"}

Geben Sie die folgenden drei Textzeilen in den Editor ein:

Even more ways to mix and match.

Buy 3 Luma tees and get a 4th free.

Shop Tees >

{width="600" modal="regular"}

Wählen Sie alle drei Textzeilen aus und legen Sie mithilfe der Symbolleiste die Zeilenhöhe auf 40px fest.

{width="600" modal="regular"}

Legen Sie für jede Zeile den Wert Font Size wie folgt fest:

Da dieser Block an einer beliebigen Stelle auf der Seite platziert werden kann, verwenden Sie anstelle der Überschriftenebenen den standardmäßigen Absatzstil. Beachten Sie außerdem, dass der Text noch nicht korrekt in die Spalte eingeschlossen ist.

{width="600" modal="regular"}

Öffnen Sie auf einer anderen Browser-Registerkarte die Storefront und navigieren Sie zu der Seite, die das Ziel des Links sein soll.

Sie können die vollständig qualifizierte URL oder eine relative URL verwenden, die den Verweis auf Ihre Store-Domäne weglässt.

Vollständige URL
: https://mystore.com/women/tops-women/tees-women.html

Relative URL
: ../women/tops-women/tees-women.html

Kehren Sie zur Registerkarte "Page Builder Arbeitsbereich"und zum Texteditor zurück, wählen Sie den Text "Shop Tees >"in der dritten Zeile aus und wählen Sie in der Editor-Symbolleiste die Option "Fett"( ).

Wählen Sie bei ausgewähltem Text Shop Tees > in der dritten Zeile Link einfügen/bearbeiten ( ) in der Editor-Symbolleiste.

{width="600" modal="regular"}

Geben Sie für "URL"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 Title den Wert Shop Tees ein.

Das Attribut Titel-Link wird von einigen Browsern als QuickInfo verwendet.

Um den Link zu speichern und zum Arbeitsbereich Page Builder zurückzukehren, klicken Sie auf OK.

{width="600" modal="regular"}

Klicken Sie in der oberen rechten Ecke der Bühne auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, gelangen Sie zum Abschnitt "Content" des dynamischen Blocks mit der Vorschau.

Klicken Sie in der oberen rechten Ecke auf Save.

Öffnen Sie den dynamischen Block Tee Shirt Promo erneut im Bearbeitungsmodus.

Erweitern Sie im Abschnitt Related Promotions und klicken Sie auf Add Cart Price Rules.

{width="600" modal="regular"}

Aktivieren Sie auf der Seite Zugehörige Warenkorbpreisregeln hinzufügen das Kontrollkästchen für die Shirts vom Typ Kauf 3 , erhalten Sie die 4. Preisregel von free und klicken Sie auf Add Selected.

{width="600" modal="regular"}

Die Preisregel wird im Abschnitt Zugehörige Promotions unter der Regel Zugehörige Warenkorbpreise angezeigt. Sie können mehrere Preisregeln mit einem dynamischen Block verknüpfen. In diesem einfachen Beispiel wird jedoch nur eine verwendet.

{width="600" modal="regular"}

Klicken Sie in der oberen rechten Ecke auf Save.

Wechseln Sie in der Seitenleiste Admin zu Content > Elements>Pages

Suchen Sie die einfache Seite, die Sie in der ersten exemplarischen Vorgehensweise 🔗 erstellt haben, und öffnen Sie sie im Bearbeitungsmodus.

Erweitern Sie im Abschnitt Content und klicken Sie auf Edit with Page Builder.

Bewegen Sie den Mauszeiger über die oberste Zeile mit demselben Bild wie der dynamische Block, um die Toolbox und das Symbol Entfernen ( {width="20"} ) anzuzeigen.

Um das Entfernen der Zeile von der Seite zu bestätigen, klicken Sie auf OK .

Ziehen Sie im Bedienfeld Page Builder unter Layout ​einen neuen Row ​Platzhalter an den Anfang der Bühne.

Erweitern Sie im Bedienfeld Page Builder den Wert Add Content und ziehen Sie einen Platzhalter Dynamic Block in die neue Zeile.

{width="600" modal="regular"}

Bewegen Sie den Mauszeiger über den dynamischen Block-Container, um die Toolbox anzuzeigen und das Symbol Einstellungen ( {width="20"} ) zu wählen.

{width="600" modal="regular"}

Klicken Sie auf der Seite Edit Dynamic Block ​auf Select Dynamic Block.

{width="600" modal="regular"}

Suchen Sie den von Ihnen erstellten dynamischen Block Tee Shirt Promo ​und klicken Sie auf Select.

Nachfolgend finden Sie eine Zusammenfassung der dynamischen Blockinformationen.

{width="600" modal="regular"}

Nehmen Sie die standardmäßigen Template, Dynamic Block Block Template an.

Klicken Sie nach Abschluss des Vorgangs auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

{width="600" modal="regular"}

Klicken Sie in der oberen rechten Ecke der Bühne auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, gelangen Sie zum Abschnitt "Content"für die Seite, in der die Vorschau angezeigt wird.

Klicken Sie in der oberen rechten Ecke auf den Pfeil Save und wählen Sie Save & Close.

Wechseln Sie in der Seitenleiste Admin zu Content > Elements>Dynamic Blocks.

Suchen Sie den dynamischen Block Tee Shirt Promo ​im Raster und öffnen Sie ihn im Bearbeitungsmodus.

Erweitern Sie im Abschnitt Content und klicken Sie auf Edit with Page Builder.

Spaltenbreite ändern:

• Bewegen Sie den Mauszeiger über den Rahmen zwischen den beiden Spalten.

• Halten Sie die Maustaste gedrückt und ziehen Sie den Rahmen zwei Trennlinien nach links.

  {width="600" modal="regular"}

  Die erste Spalte ist nun vier von 12 (4/12) Rasterabteilungen breit, die zweite Spalte ist acht von 12 (8/12) Divisionen breit.

  {width="600" modal="regular"}

Textfarbe ändern:

• Wählen Sie die ersten beiden Textzeilen aus.

• Wählen Sie in der Editor-Symbolleiste Text Color und klicken Sie auf das Muster White.

{width="600" modal="regular"}

Klicken Sie in der oberen rechten Ecke der Bühne auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, gelangen Sie zum Abschnitt "Content" des dynamischen Blocks mit der Vorschau.

Klicken Sie in der oberen rechten Ecke auf Save.

Öffnen Sie ein Browser-Fenster in Ihrer Storefront.

Um Ihre Beispielseite anzuzeigen, ändern Sie die URL in der Adressleiste wie folgt:

mystore.com/sample-page

Wenn Ihr Store so konfiguriert ist, dass er das HTML-Suffix enthält, schließen Sie das Suffix wie folgt ein:

mystore.com/sample-page.html

Melden Sie sich als weiblicher Kunde an:

• Klicken Sie in der rechten oberen Ecke Ihrer Startseite auf Sign In.

• Wenn die Luma-Beispieldaten auf Ihrem System installiert sind, verwenden Sie die folgenden Anmeldeinformationen:

  Email - roni_cost@example.com

  Password - roni_cost3@example.com

• Klicken Sie auf Sign In.

• Kehren Sie zur Beispielseite zurück, um den dynamischen Baustein anzuzeigen, den Sie mit der Tee Shirt-Promo erstellt haben.

{width="700" modal="regular"}