Page Builder-Anleitung Teil 2: -Blöcke

Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Blocks.

Klicken Sie oben rechts auf Add New Block.

Geben Sie Block Title Google Map ein.

Geben Sie Identifier google-map ein.

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

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

Klicken Sie oben rechts auf Save.

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

Erweitern Sie im Page Builder Bedienfeld Media und ziehen Sie einen Map Platzhalter auf das Bühnenbild.

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

Eine Zuordnung zu Ihrem Store-Standort 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 oben rechts im Stadium auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, kehren Sie zum Content ​für den Block mit der angezeigten Vorschau zurück.

Klicken Sie oben rechts auf den Save und wählen Sie Save & Close aus.

Wechseln Sie zur Google Cloud Platform-Konsole.

Klicken Sie auf die Dropdown-Liste Projekt 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, folgen Sie den Anweisungen in der Google Maps.

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 Bedienfeld unter General ​die Option Content Management ​aus.

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 Google Maps API Key den kopierten Schlüssel ein.

Klicken Sie auf Test Key.

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

Nachdem der Schlüssel überprüft wurde, klicken Sie auf Save Config.

Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Pages.

Suchen Sie im Raster die Simple Page, die Sie im ersten Tutorial erstellt haben, und wählen Sie Edit ​in der Spalte​ Action aus.

Erweitern Sie den Abschnitt Content und klicken Sie auf Edit with Page Builder oder in den Bereich für die Inhaltsvorschau.

Ziehen Sie im Page Builder Bedienfeld unter Layout ​einen Row ​Platzhalter an den Anfang des Stadiums.

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

Erweitern Sie im Page Builder Bedienfeld Add Content 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 ( {width="20"} ) aus.

{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 erstellten Block zu finden.

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

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

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

Klicken Sie oben rechts im Stadium auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, kehren Sie zum Content ​Abschnitt für die Seite mit der angezeigten Vorschau zurück.

Klicken Sie oben rechts auf den Save und wählen Sie Save & Close aus.

Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Dynamic Blocks.

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

Klicken Sie oben rechts auf Add Dynamic Block.

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

Vervollständigen Sie die Grundeinstellungen für den neuen dynamischen Block:

• Legen Sie Enable Dynamic Block auf Yes fest.

• Geben Sie Dynamic Block Name Tee Shirt Promo ein.

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

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

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

• Aktivieren Sie Customer Segment das Kontrollkästchen jedes Segments, das Sie auf den dynamischen Block anwenden möchten, und klicken Sie auf Fertig, um die Liste der Segmente zu speichern.

  Im folgenden Beispiel gibt es zwei „Kundensegmente die registriertenach Geschlecht identifizieren. Dieser dynamische Block wird nur für registrierte weibliche Kunden angezeigt, die bei ihren Konten angemeldet sind, während sie in Ihrem Geschäft einkaufen.

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

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

Wählen Sie unter Appearance ​die Option Full Bleed ​aus.

Geben Sie Minimum Height 400px ein.

Scrollen Sie zum Abschnitt Background ​und legen Sie die Background Image ​fest, indem Sie auf Select from Gallery ​klicken und das im ersten Tutorial hochgeladene 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 Page Builder Bedienfeld Elements und ziehen Sie einen Text-Platzhalter 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 in der Symbolleiste „Zeilenhöhe auf 40px.

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

Stellen Sie die Font Size für jede Zeile wie folgt ein:

Da dieser Block an einer beliebigen Stelle auf der Seite platziert werden kann, sollten Sie anstelle der Überschriftenebenen das standardmäßige Absatzformat verwenden. Machen Sie sich außerdem keine Sorgen, dass der Text noch nicht korrekt in der Spalte umgebrochen wird.

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

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

Sie können die vollqualifizierte URL oder eine relative URL verwenden, bei der der Verweis auf Ihre Store-Domain weggelassen wird.

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 Workspace und zum Texteditor zurück, wählen Sie den Shop Tees > Text in der dritten Zeile aus und wählen Sie Fett ( ) in der Editor-Symbolleiste.

Während der Shop Tees > Text in der dritten Zeile noch ausgewählt ist, wählen Sie Link einfügen/bearbeiten ( ) in der Editor-Symbolleiste aus.

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

Geben Sie URL den relativen Link ein, den Sie vorbereitet haben.

Legen Sie Target auf None fest.

Bei dieser Einstellung wird die Seite im selben Browser-Fenster geöffnet, anstatt eine neue Registerkarte zu öffnen.

Geben Sie Title Shop Tees ein.

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

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

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

Klicken Sie oben rechts im Stadium auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, kehren Sie zum Abschnitt Content ​für den dynamischen Block mit der angezeigten Vorschau zurück.

Klicken Sie oben rechts auf Save.

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

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

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

Aktivieren auf der Seite „Zugehörige zum Warenkorb hinzufügen“ das Kontrollkästchen für die Preisregel 3 T-Shirts kaufen und erhalten Sie die 4.-Preisregel und klicken Sie auf Add Selected.

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

Die Preisregel wird im Abschnitt Zugehörige Promotions unter „Zugehörige -Preisregel“. Sie können mehrere Preisregeln mit einem dynamischen Block verknüpfen. In diesem einfachen Beispiel wird jedoch nur ein Beispiel verwendet.

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

Klicken Sie oben rechts auf Save.

Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Pages

Suchen Sie die Einfache Seite die Sie in der ersten exemplarischen Übung erstellt haben, und öffnen Sie sie im Bearbeitungsmodus.

Erweitern Sie den 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 Entfernen-Symbol ( {width="20"} anzuzeigen.

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

Ziehen Sie im Page Builder Bedienfeld unter Layout ​einen neuen Row ​Platzhalter an den Anfang des Stadiums.

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

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

Bewegen Sie den Mauszeiger über den Container mit den dynamischen Blöcken, um die Toolbox anzuzeigen, und wählen Sie Symbol Einstellungen {width="20"}) aus.

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

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

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

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

Eine Zusammenfassung der Informationen zu dynamischen Blöcken wird unten angezeigt.

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

Akzeptieren Sie die Template, Dynamic Block Block Template.

Klicken Sie abschließend auf Save , um die Einstellungen zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

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

Klicken Sie oben rechts im Stadium auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, kehren Sie zum Content ​Abschnitt für die Seite mit der angezeigten Vorschau zurück.

Klicken Sie oben rechts auf den Save und wählen Sie Save & Close aus.

Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Dynamic Blocks.

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

Erweitern Sie den 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 um zwei Unterteilungen nach links.

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

  Die erste Spalte ist nun vier von zwölf (4/12) Rastereinteilungen breit, die zweite Spalte acht von zwölf (8/12) Einteilungen 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 White.

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

Klicken Sie oben rechts im Stadium auf das Symbol Vollbild schließen ( ).

Wenn Sie auf dieses Symbol klicken, kehren Sie zum Abschnitt Content ​für den dynamischen Block mit der angezeigten Vorschau zurück.

Klicken Sie oben rechts auf Save.

Öffnen Sie ein Browser-Fenster zu 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 es das HTML-Suffix enthält, schließen Sie das Suffix wie folgt ein:

mystore.com/sample-page.html

Melden Sie sich als Kundin oder Kunde an:

• Klicken Sie oben rechts auf der Startseite auf Sign In.

• Wenn die Beispiel-Luma-Daten 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 Block anzuzeigen, den Sie mit der T-Shirt-Aktion erstellt haben.

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