available_coupon_list (shared_partial)

全画面で共通利用する shared_partial です。
注文情報入力画面・マイページ定期注文詳細画面基本情報の編集で、利用可能なクーポンを一覧表示・選択可能にします。

利用可能なクーポンを一覧表示するために必要な設定について

購入画面での表示
・「設定 > 購入/フォーム > ショップフォーム設定 (opens in a new tab)」の「クーポン機能」をONに設定。
・「設定 > 購入/フォーム > ショップフォーム設定 (opens in a new tab)」の「クーポン一覧表示」をONに設定。

マイページでの表示
・「ショップ管理 > 各種設定 > マイページ設定 (opens in a new tab)」の「利用可能クーポン一覧表示」を有効に設定。

上記に加えて、対象クーポンの設定も必要です。
一覧表示するクーポンの設定
・「商品管理 > クーポン管理 (opens in a new tab) 」の「購入フォームと定期便詳細ページへの表示」を有効に設定。

テーマ管理のファイルパス

ec_force/shop/shared/_available_coupon_list.html.liquid
ec_force/shop/shared/_available_coupon_list.html+smartphone.liquid

必要なコンポーネント

任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。

{% if view_available_coupon_list %}
  <div id='view-available-coupon-list'>
    <label>ご利用可能なクーポン</label>
    {% for coupon in usable_coupons %}
      <div class='coupon_box'>
        <span>
          {{ coupon | generate_coupon_discount_text: times }}
        </span>
        <button class='btn_apply_coupon' value='not_applied' id='{{ coupon.code }}' type='button'>適用する</button>
        {{ coupon | generate_coupon_expiration_date_text: times }}
        クーポン名: {{ coupon.name }}
      </div>
    {% endfor %}
  </div>
{% endif %}