リピストX（リピストクロス）マニュアル

- スタートガイド
- メーラー設定方法
- SHOPオープンチェックリスト
- 受注フロー

LPフォーム商品自動選択スクロールリンクについて

商品自動選択スクロールリンクとは？

LPフォームのデザインエリアに設置したボタンをクリックした際に、同一LPフォーム内で販売している商品を商品選択エリアで自動選択させ、入力フォームまでページ内スクロールさせる記述です。

【イメージ図】

商品選択等のバナーなどクリックすると、入力フォームの商品選択欄に指定した商品が選択されています。

設置方法

■設置場所
マーケティング管理＞LPフォーム管理＞より該当LPフォーム編集画面のHTML設定にある「body内挿入コード」入力エリアに表示したい個所に記述します。

■パラメータ仕様

[必須]

data-product●-id="商品ID"
↑の ● は bulkNumber (商品選択の番号)を指定してください。

[任意]

data-product●-quantity="数量" ※指定がなければ1が選択されます。
data-product●-class1="1つ目の規格ID"
data-product●-class2="2つ目の規格ID"
data-product●-class3="3つ目の規格ID"
data-product●-class4="4つ目の規格ID"
data-product●-class5="5つ目の規格ID"
data-product●-class6="6つ目の規格ID"
※規格IDは何個でも指定可能です。

以下の「設置例」を参考にご対応ください。

設置例

■記述例＿1（規格なし、1商品IDを指定）
※商品IDには選択させたい商品IDを記述してください。

<button type="button" class="sample-button-style js-api-select-product" data-product1-id="15">商品ID：15を選択させる</button>

■記述例＿2（画像を表示する場合）

<img class="sample-button-style js-api-select-product" data-product1-id="15" src="***画像のパスを記述***">

※上記記述は画像周りに枠線が表示されます。
気になる場合は以下のように記述すると枠線が消えます。

<img class="sample-button-style js-api-select-product" data-product1-id="15" src="***画像のパスを記述***" style="padding: 0px; border-width: 0px;">

■記述例＿3（規格1あり、1商品IDを数量2個指定させる）

<button type="button" class="sample-button-style js-api-select-product" data-product1-id="15" data-product1-quantity="2" data-product1-class1="5">商品ID：15で付与している規格ID：5を選択し、数量は2個指定して選択させる</button>

■記述例＿4（規格1、2あり、1商品IDを数量2個指定）

<button
  type="button"
  class="sample-button-style js-api-select-product"
  data-product1-id="15"
  data-product1-quantity="2"
  data-product1-class1="5"
  data-product1-class2="10"
>商品ID：15で付与している規格ID：5と規格ID：10を選択し、数量は2個指定して選択させる</button>

■記述例＿5（規格なし、2商品IDを指定）
※合わせ買い対応記述です。

<button
  type="button"
  class="sample-button-style js-api-select-product"
  data-product1-id="15"
  data-product2-id="20"
>商品ID：15と20を選択させる</button>

■記述例＿6（1商品目は規格1、2あり、2商品目は規格1あり、3商品目は規格なしで各数量2ずつ指定）
※合わせ買い対応記述です。

<button
  type="button"
  class="sample-button-style js-api-select-product"
  data-product1-id="15"
  data-product1-quantity="2"
  data-product1-class1="5"
  data-product1-class2="10"
  data-product2-id="20"
  data-product2-quantity="2"
  data-product2-class1="15"
  data-product3-id="30"
  data-product3-quantity="2"
>商品ID：15で付与している規格ID：5と規格ID：10を選択し、数量は2個指定。
 商品ID：20で付与している規格ID：15を選択し、数量は2個指定。
 商品ID：30を数量は2個指定。</button>

注意 ※テンプレートファイルを編集する際は、必ずバックアップをローカル環境に取ってから行ってください。
※編集後に編集ページやサイト全体が表示されなくなった場合、記述に誤りがあった可能性がある為、バックアップファイルに戻すか再度テンプレートファイルの修正を行ってください。