商品ページ統合

商品ページ統合

商品ページにproteger延長保証購入ボタン、モーダルを追加します。

1. 商品詳細画面に移動します。
2. テンプレート → 商品情報 → ブロックを追加をクリックします。
3. モーダルが開くのでアプリタブからproteger 商品詳細SDKを探して追加します。

追加しただけでは保証が表示されない場合は以下の手順を行ってください。

4. [カートに追加]ボタンのクラス名を見つけます。
   1. 商品ページで[カートに追加]ボタンを見つけます。
   2. 右クリックしてから、右クリックメニューの[検証]をクリックします。
   3. 要素上で<button>が見つかるまで要素の上にカーソルを置きます。
   4. クラス名を見つけます。これは、ステートメント class= の後の属性名になります。
   5. クラス名をコピーして、後で使用するために別の場所に貼り付ける等保存しておきます。

5. フォームのクラス名を見つけます。
   1. 商品ページで[カートに追加]ボタンを見つけます。
   2. 右クリックしてから、右クリックメニューの[検証]をクリックします。
   3. 要素で、 <form> が見つかるまで要素の上にカーソルを置きます。
      Note: タブの要素にカーソルを合わせると、ページ上で強調表示されていることがわかります。
   4. クラス名を見つけます。これは、ステートメント class= の後の属性名になります。
   5. クラス名をコピー
6. テーマの編集にもどり、フォームセレクタ、カート追加ボタンセレクタに先ほど保存したクラス名等を入力します。

各設定項目の説明（商品詳細SDK）

確認

---

1. [ストアをプレビュー]をクリックしてプレビューを開きます。
2. 保証対象製品ページに移動します。
3. プランが表示されている事を確認します。

4. モーダルが表示される事を確認します。

5. 両方のパターンで商品と保証がカートに追加される事を確認します。

6. 完了です 🎉

📘

NOTE

お困りの際は担当者または下記のメールアドレスにいつでもご連絡下さい。
[email protected]