購入ボタンを生成する

製品リストと製品ページに「カートに追加」ボタンを追加、スタイル設定、カスタマイズします。

オプションとして、 ショッピングカートに追加 特集 選択 あなたの「商品」にリンクされたリスト コレクションこれにより、顧客はランディング ページやその他のセクションに表示されている製品セレクションから、すぐにショッピング カートにアイテムを追加できるようになります。

商品レイアウト ページに「カートに追加」機能を配置することもできます。

このチュートリアル全体を通して
  1. 配置する カートに追加 選択リスト内の要素
  2. 多様な条件を設計し、パーソナライズする
  3. 製品ページにパーソナライズされた購入ボタンを挿入します
このチュートリアルの前提条件

このチュートリアルを進める前に、必ず次のガイドを確認してください。

  • ショッピングカートに追加
  • 選択リスト
  • 選択ページ

購入ボタン要素を組み込む

商品コレクションにリンクされた選択リストである商品表示グリッドが設定されていることを確認してください。 ショッピングカートに追加 この選択リストの要素から パネルを追加 または クイック検索 (CMD/CTRL+E)。

今すぐ購入ボタンを非表示にする(オプション)

シンプルな購入ボタンの場合は、 今すぐ注文 ボタンはデフォルトで有効になっています。カートに追加要素を選択したら、 今すぐ注文 ボタンの カートに追加設定 パネル

数量フィールドを非表示にする(オプション)

さらにシンプルな購入ボタンにするには、数量フィールドをデフォルトの状態で非表示にすることもできます。そのため、購入ボタン要素を選択した状態で、 フィールドの カートに追加設定 パネル。

「購入」コンポーネントの数量フィールドを非表示にすることを選択した場合、顧客が商品をショッピングカートに追加したときに、デフォルトの数量である 1 アイテムが含まれます。顧客は後でカート内から数量を変更できます。

さまざまな条件を設計およびカスタマイズする

購入コンポーネントは複数の要素で構成されています。これらの要素は、幅広くスタイル設定およびカスタマイズできます。「送信ボタン」、「在庫切れ」状態メッセージ、「エラー」状態メッセージなどの要素の外観を柔軟に変更することができます。

商品にバリエーションがある場合は、ラベルとオプション フィールドをある程度カスタマイズできます。さらに、「購入」コンポーネントが有効になっている場合は、数量フィールドのラベルと入力フィールドのスタイルを設定できます。

デフォルトのエラーメッセージは、 エラーメッセージの設定.

以下についてさらに詳しくご覧ください: ショッピングカートに追加

カスタマイズされた購入ボタンを商品ページに統合する

あなたの ショッピングカートに追加 コンポーネントをスタイル設定してパーソナライズすると、他の商品選択リストや商品レイアウトページに組み込むことができます。これを実現するには、プライマリを選択するようにしてください。 ショッピングカートに追加 ラッパーをコピーします。その後、商品ページにアクセスするか、「商品」category にリンクされている選択リストを選択して、完全にカスタマイズされたカートに追加コンポーネントを貼り付けます。

メインを選択 ショッピングカートに追加 さまざまなページやリストに貼り付けるためのラッパー。

現在、カートに追加コンポーネントをシンボルとして保存することはできません。ただし、複製して商品ページと商品選択リストの間に挿入することはできます。要素パネルで設定に加えた変更は、選択したインスタンスにのみ影響します。スタイルに関しては、クラスを持つ要素のスタイルを更新すると、同じクラスを持つすべての要素が更新されます。したがって、すぐにスタイルを設定するつもりがない場合でも、カート内の各要素にクラスを割り当てるようにしてください。将来の自分は、このアプローチに感謝するでしょう。

ユアン・マック