カートページ統合
カートページからprotegerを表示・購入できるようにしましょう。
概要
この記事では、カートページへの保証追加ボタンの表示と、不正な保証商品が購入されないように防ぎます。
カスタマイズされている場合お使いのテーマやアプリでカートが大きくカスタマイズされている場合（例：スライド式カート、独自のカートUI、Ajaxで内容を書き換えるカートなど）、保証と商品の数量チェックや自動調整が正しく動作しないことがあります。
所要時間：約1時間
設定
- cartのitem列を見つけます。
- カートに商品が入っている状態でカートページに移動します。アイテムのタイトルを見つけます。
- 右クリックしてから、右クリックメニューの[検証]をクリックします。
- elementタブで、列全体が強調表示されるまで要素にカーソルを合わせます。これには、商品のタイトル、数量、画像等が含まれます。
- クラス名を見つけます。これは、ステートメント
class=の後の属性名になります。 - クラス名をコピーします。後ほどカート行セレクタの入力で使用します。
- cartのitemタイトルを見つけます。
- カートに商品が入っている状態でカートページに移動します。アイテムのタイトルを見つけます。
- 右クリックしてから、右クリックメニューの[検証]をクリックします。
- elementタブで、タイトルが強調表示されるまで要素にカーソルを合わせます。
- クラス名を見つけます。これは、ステートメント
class=の後の属性名になります。 - クラス名をコピーします。後ほど商品名セレクタの入力で使用します。
- cartのitem数量[quantity]を見つけます。
- カートに商品が入っている状態でカートページに移動します。アイテムのタイトルを見つけます。
- 右クリックしてから、右クリックメニューの[検証]をクリックします。
- elementタブで、数量が強調表示されるまで要素にカーソルを合わせます。
NOTE: 通常、これは<input>タグ内にあります。 - クラス名を見つけます。これは、ステートメント
class=の後の属性名になります。 - クラス名をコピーします。後ほど数量入力セレクタの入力で使用します。
- Shopfiyのテーマ編集を開きカート画面に移動します。
- テンプレート → 小計 → ブロックを追加をクリックします。
- モーダルが開くのでアプリタブからproteger カートSDKを探して追加します。
- 先ほど取得したセレクタをproteger カートSDKのセレクタ設定に入力します。
各設定項目の説明（カートSDK）
項目 | 必須 | 説明 |
|---|---|---|
カート行セレクタ | 必須 | カート内の「1商品分の行（明細）」を囲む要素のCSSセレクタです。 |
商品名セレクタ | 必須 | カート行の中で「商品名が表示されている要素」のCSSセレクタです。 |
数量入力セレクタ | 必須 | カート行の中で「数量（quantity）を変更する入力欄」を指すCSSセレクタです。 |
カート正規化を実行 | 任意 | 商品と保証プランの数量が一致するように、カート内の内容を自動で整合させます。 |
ボタンカラー | 任意 | カート行に表示される「保証を追加」ボタンの色を指定します。 |
確認
- [ストアをプレビュー]をクリックしてプレビューを開きます。
- 保証対象製品ページに移動します。
- 製品のみをカートに追加します。
- カートページでプラン表示のボタンが表示されているのを確認します。
- ボタンを押すとモーダルが表示される事を確認します。
- モーダルからプランを追加するとカートに追加される事を確認します。
- 製品の数量を変更するとプランの数量も自動で変更される事を確認します。
- 完了です 🎉
NOTEお困りの際は担当者または下記のメールアドレスにいつでもご連絡下さい。
[email protected]
Updated 18 days ago