カスタム商品選択有効時のコーディング方法とLP上での表示例

カスタム商品選択とは、商品一覧画面のようなUIでLPにて購入する商品を選択できる機能です。
購入フォームまで到達しなくても商品を追加でき、商品のビジュアルや説明などを見ながら商品を選択する購入体験になります。
そのため、商品点数の多いLPでのユーザーの体験が向上します。
また、LPのため同一画面に購入フォームもあり、フォーム一体型の特集ページという形でのご利用も可能です。

「マーケティング管理 > 広告管理 > 広告 URL 管理」画面で「複数商品購入」と「確認画面スキップ」にしている場合に「カスタム商品選択」を有効にできます。
設定すると、複数商品購入のプルダウンではなく自由にコーディングしたテンプレートの要素から商品の選択、削除が行えるようになります。

コーディング以外の広告URL管理の設定については「複数商品購入」の設定方法をご確認ください。

LPの表示例

LP上に以下のような商品選択UIを設置できます。

購入フォーム上は以下のように表示されます。
商品の選択は必須項目となるので、「LPフォーム設定」の「残り必須項目数」を表示に設定している場合は商品未選択の時に未入力項目としてカウントされます。

商品追加後、購入数に応じた規格の選択などは複数商品購入と同様の表示になります。
商品の削除などは商品選択UI上に設置可能です。

商品未選択時のフォームについて

【お支払い情報】
商品未選択時の表示：販売商品に設定されている商品の中で並び順先頭の商品を元に算出して表示されます。
※ 個数下限：0 の販売商品は除く

【お届け日の指定】
商品未選択時の表示：販売商品に設定されている商品の中で並び順先頭の商品を元に算出して表示ます。
※ 個数下限：0 の販売商品は除く

【配送業者】
商品未選択時の表示：デフォルトの配送業者がテキストで表示されます。

※商品選択後は既存の仕様通りの動きとなります。

コーディングルール

※ [] で囲われている部分は商品ごとに書き換えてください

コーディングの例

以下のコードにて下記の情報が表示されます。
・商品名
・商品画像（「商品管理 > 商品管理 > 該当商品」の「タブ：基本設定」の商品画像）
・商品価格（「商品管理 > 商品管理 > 該当商品」の「タブ：基本設定」の販売価格（マスター）もしくは「タブ：定期詳細設定」の1回目販売価格）
・規格選択（商品に設定された規格がない、もしくは1つ。規格が2つ以上ある場合は、規格選択は記載せず、購入フォームで選択してください）
・数量選択（広告URL管理で設定した販売個数は参照できません）
・更新ボタンと削除ボタン

<div>
    {% for product in url.products %}
        <!-- 商品サムネイル画像の取得 -->
        {% if product.thumbnail.url %}
            {% assign thumbnail = product.thumbnail.url %} 
        {% else %} 
            {% assign thumbnail = 'missing' | image_url %}
        {% endif %}
    <div id='custom-product-selection-{{ product.id }}'>
        <!-- 商品画像 -->
        <img class='product-img' src="{{ thumbnail }}">
        <!-- 商品名 --> 
         <p>{{ product.name }}</p>
        <!-- 商品価格 --> 
         <p>{{ product.initial_price }} 円</p>
        <!-- 規格選択 --> 
        {% if product.option_types[0].presentation %}
            <div>
                <label>
                   <!-- 規格名の表記 -->
                   {{ product.option_types[0].presentation }}：
                 </label> 
                <!-- 分類 --> 
                <select class="custom-product-selection-variant-id" >
                     {% for variant in product.variants_including_master %} 
                        <option value={{ variant.id }}>
                                <!-- 分類名の表記 --> 
                                {{ variant.option_values[0].presentation }}
                        </option>
                     {% endfor %}
                </select> 
                </div>
        {% endif %}
        <!-- 数量選択 --> 
        <div>
            <span>数量</span>
            <select class='custom-product-selection-quantity' name='product-{{ product.id }}'>
                <option value=1>1</option>
                <option value=2>2</option>
                <option value=3>3</option>
                <option value=4>4</option>
                <option value=5>5</option>
            </select>
        </div>
        <div>
            <button class='custom-product-selection-submit-btn' name='custom-product-selection-{{ product.id }}'>
                更新
            </button>
            <button class='custom-product-selection-delete-btn' name='custom-product-selection-{{ product.id }}'>
                削除
            </button>
        </div>
    </div>
    {% endfor %}
</div>