「サイト設定」に移動し、「組み込みサービス」で「接続」をクリックして、製品カタログを有効にします。

商品を表示したいページに移動します。ブロックライブラリから「Vibe Block」を追加します。

製品カードブロックのデザインを説明するプロンプトを入力し、そのブロックをプロジェクト内の「製品カタログ」に接続するように指定します。ブロックが生成されるまでお待ちください。

Vibe Blockが生成されると、「カタログ設定」ボタンが表示されます。このボタンをクリックし、ページに表示する「製品カタログ」カテゴリを選択してください。

注文フォームブロック付きのST100ショッピングカートをページに追加します。

ページを公開し、ページを開いてブロックをテストしてください。ショッピングカートに商品を1つ追加してください。

すべてが正常に動作することを確認してから、お支払いを完了してください。商品データは、これまでと同様に連携先のデータ収集サービスに送信されます。

プロンプトには、商品の詳細ポップアップの説明も含めることができます。これは、メインブロックのコンテンツが生成された後に実行できます。ポップアップの外観や表示すべき情報について記述してください。

例えば、下の画像にある詳細ポップアップには、商品カタログから取得したすべての商品情報、商品の数量調整機能、および「カートに追加」ボタンが表示されています。独自のプロンプトを作成することで、ボタンを削除したり、ポップアップに表示される情報を変更したりすることも可能です。

商品の詳細ポップアップからも、ショッピングカートに商品を追加することができます。