Page Builder Anleitung Teil 3: Kataloginhalt

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

Suchen Sie die Einfache Seite die Sie in der ersten Übung erstellt und in der zweiten geändert 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 ​eine Row ​an den Anfang der Bühne.

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

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

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

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

Wählen Sie Select Products By "Condition".

Bedingung hinzufügen:

• Klicken Sie auf Symbol Hinzufügen ).

• Wählen Sie unter Product Attribute ​die Option Category ​aus.

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

• Schließen Sie den Category is… Teil der Bedingung ab, indem Sie auf das Symbol Mehr (…) und dann auf das Symbol Auswahl ( ) klicken.

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

• Gehen Sie in der Kategoriestruktur zur Kategorie Damen >" und aktivieren Sie das Kontrollkästchen T-.

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

• Klicken Sie auf das Häkchen .

  Die entsprechende Kategorie-ID wird im Feld angezeigt, um die Bedingung abzuschließen.

Geben Sie die Number of Products to Display ein.

Standardmäßig werden in der Liste fünf Produkte angezeigt.

Füllen Sie die restlichen Einstellungen nach Bedarf aus.

Verwenden Sie bei Bedarf die Feldbeschreibungen am Ende der Seite Inhalt hinzufügen - Produkte als Referenz.

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 ( {width="20"} ).

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 der Admin-Seitenleiste zu Catalog > Products.

Suchen Sie ein einfaches Produkt, das Sie für dieses Beispiel verwenden können, und öffnen Sie es im Bearbeitungsmodus.

Scrollen Sie nach unten und erweitern Sie den Abschnitt Content .

Klicken Sie neben Description ​auf Edit with Page Builder.

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

Wenn die Produktbeschreibung zuvor ohne Page Builder eingegeben wurde, wird die aktuelle Beschreibung als HTML in einem HTML-Code-Container angezeigt. Beim Luma-Design wird die Produktbeschreibung auf der Registerkarte Detail angezeigt.

Ziehen Sie im Page Builder unter Layout ​einen Row ​auf den Schritt und legen Sie ihn unter dem HTML-Code-Container ab.

Suchen Sie nach der roten Richtlinie, die angezeigt wird, wenn sich die Zeile an der richtigen Position befindet.

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

Erweitern Sie im Page Builder Bedienfeld Media und ziehen Sie einen Video Platzhalter in die neue Zeile.

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

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

{width="500" modal="regular"}

Geben Sie die Video URL ein.

Das Video kann entweder auf YouTube oderVimeo gehostet. Das Video zu diesem Beispiel finden Sie auf YouTube unter folgender URL:

https://www.youtube.com/watch?v=ZpFrNyD4100

{width="500" modal="regular"}

Geben Sie die Maximum Width in Pixeln für die Videoanzeige ein.

Wenn Sie diese Option leer lassen, füllt das Video den verfügbaren Platz aus.

Klicken Sie 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 ( {width="20"} ).

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 der Admin-Seitenleiste zu Catalog > Products.

Klicken Sie oben rechts auf Add Product.

Erstellen Sie das Produkt mit den folgenden Eigenschaften:

• ​

  Attributsatz: Default

• Product Name: Mein Produkt

• ​

  SKU: Tutorial

• ​

  Price: 75.00

• ​

  Quantity: 100

• Stock Status: Auf Lager

• ​

  Weight: 1

• Categories: Damen > Tops > T-Shirts

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

Navigieren Sie in Admin-Seitenleiste zu Stores > Attributes>Product.

Klicken Sie oben rechts auf Add New Attribute.

Geben Sie einen Default Label für das Attribut ein.

Verwenden Sie für dieses Beispiel My Page Builder Attribute für die Bezeichnung .

Legen Sie Catalog Input Type for Store Owner auf Page Builder fest.

Beim Erstellen eines benutzerdefinierten Attributs können Sie den Editor, der für das Programm am besten geeignet ist, entweder als Page Builder oder als standardmäßige WYSIWYG-Text Editor angeben.

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

Erweitern Sie den Abschnitt Advanced Attribute Properties und nehmen Sie die folgenden Einstellungen vor:

• Attribute Code: Geben Sie einen Attributcode in Kleinbuchstaben ein, indem Sie Bindestriche anstelle von Leerzeichen verwenden. Verwenden Sie für dieses Beispiel my_page_builder_attribute.

• Scope: Akzeptieren Sie den Standardwert Store View.

• Default Value: Geben Sie einen Standardwert für das Attribut ein.

• ​

  Unique Value: No

• ​

  Add to Column Options: No

• ​

  Use in Filter Options: Yes

Wählen Sie im Bedienfeld Attribute Information ​auf der linken Seite Storefront Properties ​und nehmen Sie die folgenden Einstellungen vor:

• ​

  Use for Promo Rule Conditions: Yes

• ​

  Visible on Catalog Pages on Storefront: Yes

• ​

  Used in Product Listing: Yes

Klicken Sie abschließend auf Save Attribute.

Wiederholen Sie die vorherigen Schritte, um ein zweites Attribut mit denselben grundlegenden Eigenschaften, aber mit dem Eingabetyp Texteditor wie folgt zu erstellen:

• Default Label: Mein Texteditor-Attribut

• Catalog Input Type for Store Owner: Texteditor

• ​

  Attributcode: my_text_editor_attribute

Navigieren Sie in Admin-Seitenleiste zu Stores > Attributes>Attribute Set.

In diesem Beispiel fügen Sie die neuen Attribute vorübergehend zum default Attributsatz hinzu. Entfernen Sie am Ende dieser Übung die Attribute aus dem Attributsatz, sodass sich dies nicht auf Ihren Katalog auswirkt.

Suchen Sie das in der Liste festgelegte Default ​Attribut und doppelklicken Sie darauf, um es im Bearbeitungsmodus zu öffnen.

Suchen Sie in Liste „Nicht Attribute“ die neu erstellten Attribute und ziehen Sie die einzelnen Attribute in die Spalte Groups ​unter Content.

Die Position des Attributs in der Spalte Groups bestimmt, wo es auf der Seite angezeigt wird.

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

Klicken Sie auf Save , um zur Liste der Attributsätze zurückzukehren.

Wenn Sie dazu aufgefordert werden, klicken Sie oben auf der Seite auf den Link Cache Management und aktualisieren Sie alle ungültigen Cache-Einträge.

Navigieren Sie in der Admin-Seitenleiste zu Catalog > Products.

Suchen Sie im Produktraster nach "Produkt und öffnen Sie es im Bearbeitungsmodus.

Scrollen Sie nach unten und erweitern Sie den Abschnitt Content .

Oben im Abschnitt gibt es zwei Standardattribute für Produktinhalte:

• Kurzbeschreibung verwendet den standardmäßigen WYSIWYG Editor.
• Beschreibung, die die Page Builder-Vorschau anzeigt.

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

Wenn Sie zur unteren Hälfte des Abschnitts scrollen, gibt es die beiden Attribute, die Sie erstellt und zugewiesen haben:

• Mein Page Builder-Attribut, das die Page Builder-Vorschau anzeigt.
• Mein Texteditor-Attribut das den standardmäßigen WYSIWYG-Editor verwendet.

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

Geben im Editor „Mein Texteditorattribut "Text Editor Attribute placeholder text ein.

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

Klicken für „Mein Page Builder Attribut auf Edit with Page Builder und fügen Sie den Beschreibungstext hinzu:

• Erweitern Sie im Page Builder Bedienfeld Elements und ziehen Sie eine Text object auf die Bühne.

• Page Builder attribute placeholder text eingeben.

• Klicken Sie oben rechts im Stadium auf das Symbol Vollbild schließen ( {width="20"} ).

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

Scrollen Sie nach oben zu Description, klicken Sie auf Edit with Page Builder und fügen Sie Text hinzu, den Sie wie im vorherigen Schritt verwenden möchten.

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

Wenn Sie dazu aufgefordert werden, klicken Sie auf den Link Cache Management in der Nachricht oben auf der Seite und aktualisieren Sie alle ungültigen Caches.

Navigieren Sie zu Ihrer Beispiel-Produktseite in der Storefront.

In diesem Beispiel befindet sich das Produkt in der oberen Navigationsleiste unter Damen > Oberteile > T-Shirts.

Scrollen Sie nach unten zu den My Page Builder-Attribut-Informationen.

Die Position der Attribute auf der Produktseite wird durch das Design bestimmt. Im Luma-Design befinden sich die neuen Attribute direkt nach der Produktbeschreibung.

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