So erstellen Sie einen Vibe-Block mit Artikeln aus dem Produktkatalog
Mit dem Vibe Block können Sie einen benutzerdefinierten Produktblock erstellen und diesen mit dem Produktkatalog verknüpfen. Beschreiben Sie das gewünschte Design in einer Eingabeaufforderung, und lassen Sie sich anschließend Produktnamen, Preise, Bilder und die „Kaufen“-Schaltflächen im generierten Block anzeigen.
Produktkatalog verknüpfen und Produkte hinzufügen
Rufen Sie die Website-Einstellungen auf und klicken Sie unter „Integrierte Dienste“ auf „Verbinden“, um den Produktkatalog zu aktivieren.
Site Settings > "Built-in services": the "Connect" button in the "Product catalog" section.
Fügen Sie Produkte manuell zum Produktkatalog hinzu oder nutzen Sie die Importfunktion.
In Online Store / Catalog: the product list and the "+ Add product" button at the top right.
Füge der Seite einen Vibe-Block hinzu
Gehen Sie zu der Seite, auf der Sie Produkte anzeigen möchten. Fügen Sie einen Vibe-Block aus der Blockbibliothek hinzu.
Block Library: the "VIBE Vibe Block" in the "Other" category.
Geben Sie eine Beschreibung für das Design des Produktkartenblocks ein und legen Sie fest, dass der Block mit dem Produktkatalog des Projekts verknüpft werden soll. Warten Sie, bis der Block generiert wurde.
Achten Sie außerdem darauf, in der Eingabeaufforderung anzugeben, dass das Produkt in den Warenkorb gelegt werden soll.
Beispiel für eine Eingabeaufforderung:

Erstellen Sie einen Block mit Produktkarten und verknüpfen Sie ihn mit dem Produktkatalog im Projekt. Jede Karte soll den Produktnamen und den Preis anzeigen. Zeigen Sie drei Karten pro Zeile an. Fügen Sie am unteren Rand des Blocks eine Schaltfläche „Mehr anzeigen“ hinzu. Wenn diese angeklickt wird, sollen weitere Produkte aus dem Produktkatalog geladen werden.
In the Vibe Block: the prompt input field under "GENERATE CODE FOR THE BLOCK".
Nachdem der Vibe Block erstellt wurde, erscheint die Schaltfläche „Katalogeinstellungen“. Klicken Sie darauf und wählen Sie die Kategorie „Produktkatalog“ aus, die auf der Seite angezeigt werden soll.
The "Catalog settings" pop-up window in a Vibe block with the "DISPLAY PRODUCTS FROM CATALOG" dropdown list and the "Save" button.
Fügen Sie den ST100-Warenkorb mit einem Bestellformular-Block zur Seite hinzu.
Block Library in the Page Editor: ST100 "Shopping cart with an order form" in the "Store" section.
Veröffentlichen Sie die Seite und öffnen Sie sie, um den Block zu testen. Legen Sie ein Produkt in den Warenkorb.
Product catalog on a published page: the third product card in the "Our Products" section.
Überprüfen Sie, ob alles ordnungsgemäß funktioniert, und schließen Sie dann die Zahlung ab. Die Produktdaten werden wie bisher an die angeschlossenen Datenerfassungsdienste übermittelt.
Published page with a product catalog block and an open "Your order" cart panel showing items and a "Checkout" button.
Sie können auch die detaillierte Popup-Beschreibung des Produkts in die Eingabeaufforderung aufnehmen. Dies können Sie tun, nachdem der Inhalt des Hauptblocks generiert wurde: Beschreiben Sie, wie das Popup aussehen und welche Informationen es anzeigen soll.

Das detaillierte Popup in der Abbildung unten zeigt beispielsweise alle verfügbaren Produktinformationen aus dem Produktkatalog, Steuerelemente zur Produktmenge und eine Schaltfläche „In den Warenkorb“. Sie können Ihre eigene Eingabeaufforderung verfassen, um Schaltflächen zu entfernen oder die im Popup angezeigten Informationen zu ändern.
A pop-up window with a product card on an online store page, with an arrow pointing to the next product card behind it.
Produkte können auch über das Detail-Popup in den Warenkorb gelegt werden.
Online store page with an opened product pop-up window and the "Your order" cart sidebar on the right.
Wenn ein Produkt nicht in den Warenkorb gelegt wurde oder bestimmte Daten – beispielsweise die Artikelnummer – falsch übertragen wurden, beschreiben Sie das Problem in einer neuen Eingabeaufforderung im Vibe-Block-Editor und bitten Sie die KI, das Problem zu beheben.
Hergestellt am
Tilda