Page Builder Exemplarische Vorgehensweise: Teil 3: Kataloginhalt

Wechseln Sie in der Seitenleiste Admin 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 im Abschnitt Content und klicken Sie auf Edit with Page Builder oder innerhalb des Inhaltsvorschaubereichs.

Ziehen Sie im Bedienfeld Page Builder unter Layout ​eine Row ​an den oberen Rand der Bühne.

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

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

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

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

Wählen Sie für Select Products By Condition aus.

Hinzufügen einer Bedingung:

• Klicken Sie auf das Symbol Hinzufügen ( ).

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

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

• Vervollständigen Sie den Teil Category is… der Bedingung, indem Sie auf das Symbol Mehr (…) klicken und dann auf das Symbol Auswahl ( ) klicken.

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

• Führen Sie im Kategoriebaum einen Drilldown zur Kategorie Frauen > Tops durch und aktivieren Sie das Kontrollkästchen Tees .

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

• Klicken Sie auf das Häkchen-Symbol ( ).

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

Geben Sie den Wert Number of Products to Display ein.

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

Nehmen Sie die restlichen Einstellungen nach Bedarf vor.

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

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

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 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 um den .

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 in einem HTML-Code -Container als HTML angezeigt. Beim Thema "Luma"wird die Produktbeschreibung auf der Registerkarte "Details"angezeigt.

Ziehen Sie im Bedienfeld Page Builder unter Layout ​eine Row ​auf die Bühne und platzieren Sie sie unter dem HTML-Code-Container.

Die rote Führungslinie wird angezeigt, wenn sich die Zeile an der richtigen Position befindet.

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

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

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

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

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

Geben Sie den Wert Video URL ein.

Das Video kann auf YouTube oder Vimeo gehostet werden. Das Video in diesem Beispiel finden Sie in YouTube unter der folgenden URL:

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

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

Geben Sie die Maximum Width in Pixel 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 in der oberen rechten Ecke der Bühne auf das Symbol Vollbild schließen ( {width="20"} ).

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 Catalog > Products.

Klicken Sie in der oberen rechten Ecke 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: Women > Tops > Tees

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

Wechseln Sie in der Seitenleiste Admin zu Stores > Attributes>Product.

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

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

Verwenden Sie für dieses Beispiel My Page Builder Attribute als Beschriftung.

Setzen Sie Catalog Input Type for Store Owner auf Page Builder.

Beim Erstellen eines benutzerdefinierten Attributs können Sie den Editor, der für die Anwendung am besten geeignet ist, entweder als Page Builder oder als Standard, 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 und verwenden Sie Bindestriche anstelle von Leerzeichen. 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 Bereich Attribute Information ​auf der linken Seite Storefront Properties ​aus 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 nach Abschluss des Vorgangs auf Save Attribute.

Wiederholen Sie die vorherigen Schritte, um ein zweites Attribut mit denselben grundlegenden Eigenschaften, jedoch mit dem Eingabetyp Text-Editor wie folgt zu erstellen:

• Default Label: My Text Editor-Attribut

• Catalog Input Type for Store Owner: Texteditor

• ​

  Attributcode: my_text_editor_attribute

Wechseln Sie in der Seitenleiste Admin zu Stores > Attributes>Attribute Set.

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

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

Suchen Sie in der Liste Nicht zugewiesene 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 Zwischenspeicher.

Wechseln Sie in der Seitenleiste Admin zu Catalog > Products.

Suchen Sie im Raster "Products"nach My Product und öffnen Sie es im Bearbeitungsmodus.

Scrollen Sie nach unten und erweitern Sie den Abschnitt Content um den .

Oben im Abschnitt befinden sich zwei Standardattribute für Produktinhalte:

• Kurze Beschreibung, die den standardmäßigen WYSIWYG editor verwendet.
• Beschreibung, die die Vorschau Page Builder anzeigt.

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

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

• Mein Page Builder Attribut, das die Vorschau für Page Builder anzeigt.
• My Text Editor-Attribut, das den standardmäßigen WYSIWYG-Editor verwendet.

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

Geben Sie im Editor My Text Editor Attribute den Wert Text Editor Attribute placeholder text ein.

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

Klicken Sie für My Page Builder Attribute auf Edit with Page Builder und fügen Sie den Beschreibungstext hinzu:

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

• Geben Sie Page Builder attribute placeholder text ein.

• Klicken Sie in der oberen rechten Ecke der Bühne 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 mit der gleichen Methode wie im vorherigen Schritt verwenden möchten.

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

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

Navigieren Sie in der Storefront zu Ihrer Beispielproduktseite.

In diesem Beispiel befindet sich das Produkt in der oberen Navigation unter Frauen > Tops > Tees.

Scrollen Sie nach unten zu den Informationen My Page Builder Attribute.

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

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