購入の設定

スクリーンで購入を設定するには、購入ボタンを追加して Purchase アクションを設定します。このアクションは、特定のプロダクトを対象にするか、スクリーン上のプロダクト要素からユーザーが選択したプロダクトを対象にすることができます。

プロダクトを追加する

プロダクト要素は、キャンバス上にプロダクトを表示するビジュアルカードです。

プロダクト要素を追加するには:

プロダクトが紐付けられていないプロダクト要素は、プレビューや公開をブロックします。プロダクトを割り当てるか、要素を削除してください。

カードに取り消し線付きのアンカー価格を表示するには、カード内に旧価格要素を追加してください。

プロダクトカードのタップ時インタラクションに購入アクションを直接アタッチすることもできます。カードをタップするだけで購入がトリガーされるため、別途購入ボタンを用意する必要はありません。

プロダクトグループを削除して新しいグループに置き換えた場合は、すべてのアクションと変数が新しいグループを参照しているか確認してください。削除済みのグループへの参照が残っていると、プレビューと公開がブロックされます。

購入ボタンは、ユーザーがタップしたときに Purchase アクションをトリガーします。

購入ボタンを追加するには：

キャンバス上で、画面の + をクリックします。
Button を選択し、ボタンのプリセットを選びます。
ボタンを選択した状態で、右パネルの Interactions タブを開きます。
Add trigger > On tap をクリックし、Add action をクリックします。
Action を Purchase に設定し、Product を以下のいずれかに設定します：
- products.selectedProduct：画面上の Products 要素でユーザーが選択したプロダクトを購入します。
- 特定のプロダクト：画面上の選択内容に関わらず、常にそのプロダクトを購入します。

選択中のプロダクトの価格をボタンのラベルに挿入するには、変数を使います：

ボタンを選択した状態で、右パネルの Design タブを開きます。
Content フィールドで、価格を表示したい位置にカーソルを置きます。
変数アイコンをクリックして products.selectedProduct を選択し、続けて prod_price 属性を選択します。完全な変数は products.selectedProduct.prod_price になります。
変数の前後に固定テキストを追加します。例: Subscribe for {prod_price}。

ユーザーが別のプロダクトを選択するたびに、ラベルが自動的に更新されます。