フォーム一体型LPのバリエーション商品対応方法

ここでは、「デザイン管理」＞「テンプレート編集」で「LP 入力フォーム」をバリエーション商品に対応させる方法を説明します。

※ご利用には、バリエーション商品オプションのお申し込みが必要です。

ブラウザにJavaSciptのキャッシュが保持されることにより、バリエーション切り替えが正常に動作しない場合があります。
「LP 入力フォーム」テンプレートで以下の記述変更を行ってください。
[記述例(8109-00.txt)]

バリエーションを切り替える為の情報をページにセット

[説明]
バリエーションを切り替えるための JSON をセットします。
必ずクラス名「variant_list_json」を持つ不可視要素として設置して下さい。
このタグはページ内に一つのみ設置してください。（場所は任意）
このパーツが存在しないと、以降の組み込みは動作しません。

[記述例(8109-01.txt)]

バリエーション選択のフォームを追加

[説明]
バリエーションを切り替えるためのフォームを設置します。
商品選択フォームの直後に設置してください。
複数のバリエーション（サイズ、カラーなど）が存在する場合、バリエーションの数だけフォームが表示されます。
バリエーションベース商品以外を選択した場合、フォームが非表示となります。
バリエーション選択フォームの tr タグには、必ず「variation_select_table」クラスを設定してください。
「max_variant_cnt」と「variant_child_id」の hidden タグは必須ですので、記述漏れのないようご注意ください。

[記述例(8109-02.txt)]

Amazon Payでの決済にバリエーション商品を対応する

[説明]
Amazon Pay決済に対応するための修正を加えます。
id「amazon」のscript 内に「data-fromlp=”{$url}”」を追加します。
Amazon Payでバリエーション商品を購入するために必要な記述です。

[記述例(8109-03.txt)]

スマホでのバリエーション選択フォームのデザイン調整

[説明]
バリエーション選択フォームのスマホ表示を調整するCSSを追加します。
ご自身でデザイン調整される場合は不要です。

[記述例(8109-04.txt)]