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.
Gehen Sie zu der Seite, auf der Sie Produkte anzeigen möchten. Fügen Sie einen Vibe-Block aus der Blockbibliothek hinzu.
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.
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.
Fügen Sie den ST100-Warenkorb mit einem Bestellformular-Block zur Seite hinzu.
Veröffentlichen Sie die Seite und öffnen Sie sie, um den Block zu testen. Legen Sie ein Produkt in den Warenkorb.
Ü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.
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.
Produkte können auch über das Detail-Popup in den Warenkorb gelegt werden.
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.