2025/07/15更新
+ 更新した行
- 削除した行利用可能クーポン一覧表示機能の追加
購入画面やマイページの定期注文詳細画面で、顧客が利用可能なクーポンを一覧表示・選択できる機能が追加されました。
本機能を利用するためには、テーマ更新に加えて、次の設定が必要です。
利用可能なクーポンを一覧表示するために必要な設定について
購入画面での表示
・ 「設定 > 購入/フォーム > ショップフォーム設定 (opens in a new tab)」の「クーポン機能」をONに設定。
・ 「設定 > 購入/フォーム > ショップフォーム設定 (opens in a new tab)」の「クーポン一覧表示」をONに設定。
マイページでの表示
・ 「ショップ管理 > 各種設定 > マイページ設定 (opens in a new tab)」の「利用可能クーポン一覧表示」を有効に設定。
上記に加えて、対象クーポンの設定も必要です。
一覧表示するクーポンの設定
・ 「商品管理 > クーポン管理 (opens in a new tab) 」の「購入フォームと定期便詳細ページへの表示」を有効に設定。
shared > available_coupon_list
利用可能クーポン一覧用の新規追加ファイルです。
詳細な内容はavailable_coupon_list (shared_partial)をご確認ください。
ec_force/shop/shared/_available_coupon_list.html.liquid
ec_force/shop/shared/_available_coupon_list.html+smartphone.liquid
cart > クーポン（部分テンプレート）
ec_force/shop/orders/_view_coupon.html.liquid
ec_force/shop/orders/_view_coupon.html+smartphone.liquid
<label>クーポンコード</label>
- <!-- 購入フォームへのクーポン表示設定が有効 かつ 利用可能なクーポン数がある場合にクーポンを表示 -->
- {% if shop_form_settings['display_coupon_to_purchase_form'] and usable_coupons.size > 0 %}
- <label>ご利用可能なクーポン</label>
- {% for coupon in usable_coupons %}
- <div class='coupon_box'>
- <span>
- {{ coupon | generate_coupon_discount_text }}
- </span>
- <button class='btn_apply_coupon' value='not_applied' id='{{ coupon.code }}' type='button'>適用する</button>
- {{ coupon | generate_coupon_expiration_date_text }}
- クーポン名: {{ coupon.name }}
- </div>
- {% endfor %}
+ <!-- 利用可能クーポン一覧(PC用) -->
+ {% include 'ec_force/shop/shared/available_coupon_list.html', times: order.times %}
+ <!-- 利用可能クーポン一覧(スマートフォン用) -->
+ {% include 'ec_force/shop/shared/available_coupon_list.html+smartphone', times: order.times %}
+
+ {% if view_available_coupon_list %}
<label>クーポンコードを入力してください。</label>
<input id='input_coupon_code' name="order[coupon_code]" value="{{ coupon_code }}">
{% else %}
- <input name="order[coupon_code]" value="{{ coupon_code }}">
+ <input id='input_coupon_code' name="order[coupon_code]" value="{{ coupon_code }}">
{% endif %}mypage > 定期注文詳細画面 基本情報の編集
ec_force/shop/customer/subs_orders/edit.html.liquid
ec_force/shop/customer/subs_orders/edit.html+smartphone.liquid
<!-- クーポンコード入力フォーム -->
- <label for="subs_order_coupon_code">クーポンコード</label>
+ <label>クーポンコード</label>
{% if subs_order.coupon_id %}
使用中
{% else %}
- <input type="text" name='subs_order[coupon_code]' value="{{ subs_order.coupon_code }}" id="subs_order_coupon_code" />
+ <!-- 利用可能クーポン一覧(PC用) -->
+ {% include 'ec_force/shop/shared/available_coupon_list.html', times: subs_order.next_times %}
+ <!-- 利用可能クーポン一覧(スマートフォン用) -->
+ {% include 'ec_force/shop/shared/available_coupon_list.html+smartphone', times: subs_order.next_times %}
+
+ {% if view_available_coupon_list %}
+ <label>クーポンコードを入力してください。</label>
+ <input type="text" name='subs_order[coupon_code]' value="{{ subs_order.coupon_code }}" id='input_coupon_code' />
+ {% else %}
+ <input type="text" name='subs_order[coupon_code]' value="{{ subs_order.coupon_code }}" id='input_coupon_code' />
+ {% endif %}
{% endif %}
<!-- 送信リンク、外すリンク -->