テーマ仕様書
shop
マイページ
定期受注
頒布会
編集

定期注文詳細画面 頒布会商品の編集

頒布会商品の編集画面です。

ショップのパス

ドメイン/shop/customer/subs_orders/定期受注ID/distribution_clubs/頒布会ID/edit

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

ec_force/shop/customer/subs_orders/distribution_clubs/edit.html.liquid
ec_force/shop/customer/subs_orders/distribution_clubs/edit.html+smartphone.liquid

JSタグ

{{ 'shop/customer/subs_orders/distribution_clubs' | javascript_include_tag }}

必要なコンポーネント

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

<div id='distribution-club-edit-view'>
  <!-- フラッシュメッセージ -->
  {{ 'notice' | flash: 'alert alert-success', 'text' }}
  {{ 'alert' | flash: 'alert alert-danger', 'text' }}
  {{ 'error' | flash: 'alert alert-danger', 'text' }}
 
  {% if base_info.use_distribution_club and base_info.use_product_filter_on_mypage %}
    <div>
      <button class='btn btn-default btn-filter'>除外フィルター</button>
    </div>
      
  {% endif %}
 
  <!-- 頒布会選択商品変更フォーム -->
  <form action="/shop/customer/subs_orders/{{ subs_order.number }}/distribution_clubs/{{ distribution_club.id }}" accept-charset="UTF-8" method="post">
    <input type="hidden" name="_method" value="put">
    <input type="hidden" name="changeable_distribution_club_id" value="{{ changeable_distribution_club_id }}">
    <input type="hidden" name="selected_filter" id="selected-filter" value="">
 
    {% assign product_ids = "" %}
    {% if distribution_changed %}
      <!-- 商品切替変更 -->
      <!-- 商品名 -->
      {% for variant in distribution_club_variants %}
        {% assign changeable_variants = changeable_variants_hash[variant.id] %}
        {% if changeable_variants.size == 0 %}
          <!-- 頒布会選択商品名 -->
          {{ variant.name }}
          <input name="select_items[item][][selected_variant_id]" type="hidden" value="{{ variant.id }}">
        {% else %}
          <!-- 変更可能頒布会選択商品名(規格) -->
          <select class="select-variants distribution-select-variant-{{variant.product_id}}" name="select_items[item][][selected_variant_id]">
            {% for variant in changeable_variants %}
              {% if variant.option_values_presentation == blank %}
                {% capture product_options %}
                  {{ variant.product.name }}
                {% endcapture %}
              {% else %}
                {% capture product_options %}
                  {{ variant.product.name }}({{ variant.option_values_presentation }})
                {% endcapture %}
              {% endif %}
              <option filtered-product-id="{{ variant.product_id }}" value="{{ variant.id }}" {% if order_item.variant.id == variant.id %}selected{% endif %}>{{ product_options }}</option>
              {% assign product_ids = product_ids | append: variant.product_id | append: "," %}
            {% endfor %}
          </select>
        {% endif %}
        <!-- 個数 -->
        1個
 
        <!-- 価格(税抜) -->
        {% if changeable_variants.size == 0 %}
          {% if distribution_club.fixed_price? %}
            0円
          {% else %}
            {% assign options = "" %}
            {% assign options = options | append: variant.product_id | append: "," | append: subs_order.times %}
            {% assign options_array = options | split: "," %}
            {{ options_array | liquid_recurring_time_price | number_to_currency: format: '%n %u' }}
          {% endif %}
        {% else %}
          <span class="distribution-product-price">
            {% if distribution_club.fixed_price? %}
              0円
            {% else %}
              {% assign options = "" %}
              {% assign options = options | append: variant.product_id | append: "," | append: subs_order.times %}
              {% assign options_array = options | split: "," %}
              {{ options_array | liquid_recurring_time_price | number_to_currency: format: '%n %u' }}
            {% endif %}
          </span>
        {% endif %}
      {% endfor %}
    {% else %}
      {% for order_item in distribution_order_items %}
        {% for i in (1..order_item.distribution_item_quantity) %}
 
          <!-- 商品名 -->
          {% assign changeable_variants = changeable_variants_hash[order_item.id] %}
          {% if changeable_variants.size == 0 %}
            <!-- 頒布会選択商品名 -->
            {{ order_item.variant.name }}
          {% else %}
            <!-- 変更可能頒布会選択商品名(規格) -->
            <select class="select-variants distribution-select-variant-#{order_item.product_id}" name="select_items[{{order_item.id}}][][selected_variant_id]">
              {% for variant in changeable_variants %}
                {% if variant.option_values_presentation == blank %}
                  {% capture product_options %}
                    {{ variant.product.name }}
                  {% endcapture %}
                {% else %}
                  {% capture product_options %}
                    {{ variant.product.name }}({{ variant.option_values_presentation }})
                  {% endcapture %}
                {% endif %}
                <option filtered-product-id="{{ variant.product_id }}" value="{{ variant.id }}" {% if order_item.variant.id == variant.id %}selected{% endif %}>{{ product_options }}</option>
                {% assign product_ids = product_ids | append: variant.product_id | append: "," %}
              {% endfor %}
            </select>
            <input name="select_items[{{order_item.id}}][][origin_variant_id]" type="hidden" value="{{ order_item.variant_id }}">
          {% endif %}
 
          <!-- 個数 -->
          1個
 
          <!-- 価格(税抜) -->
          {% if changeable_variants.size == 0 %}
            {% if distribution_club.fixed_price? %}
              0円
            {% else %}
              {{ order_item.price | number_to_currency: format: '%n %u' }}
            {% endif %}
          {% else %}
            <span class="distribution-product-price">
              {% if distribution_club.fixed_price? %}
                0円
              {% else %}
                {{ order_item.price | number_to_currency: format: '%n %u' }}
              {% endif %}
            </span>
          {% endif %}
        {% endfor %}
      {% endfor %}
    {% endif %}
    <input type="hidden" name="product_ids" id="product_ids" value="{{ product_ids }}" />
 
    <!-- 送信ボタン -->
    <input class='submit' id='submit' type="submit" value="保存">
 
    <!-- 戻るボタン -->
    <a href="/shop/customer/subs_orders/{{ subs_order.number }}/order_items">戻る</a>
  </form>
 
  <!-- 商品切替変更フォーム -->
  <form id="form-change-distribution-club" action="/shop/customer/subs_orders/{{ subs_order.number }}/distribution_clubs/{{ distribution_club.id }}/edit" accept-charset="UTF-8" method="get">
    {% if changeable_distribution_club_id == distribution_club.id %}
      <!-- 変更なしラジオボタン -->
      <input type="radio" name="changeable_distribution_club_id" id="changeable_distribution_club_id_{{ distribution_club.id }}" value="{{ distribution_club.id }}" checked="checked">
    {% else %}
      <!-- 変更なしラジオボタン -->
      <input type="radio" name="changeable_distribution_club_id" id="changeable_distribution_club_id_{{ distribution_club.id }}" value="{{ distribution_club.id }}">
    {% endif %}
    <label for="changeable_distribution_club_id_{{ distribution_club.id }}">変更なし</label>
    {% for product in changeable_distribution_club_products %}
      {% if product.distribution_club_id != distribution_club.id %}
        {% if changeable_distribution_club_id == product.distribution_club.id %}
          <!-- 商品切替ラジオボタン -->
          <input type="radio" name="changeable_distribution_club_id" id="changeable_distribution_club_id_{{ product.distribution_club.id }}" value="{{ product.distribution_club.id }}" checked="checked">
        {% else %}
          <!-- 商品切替ラジオボタン -->
          <input type="radio" name="changeable_distribution_club_id" id="changeable_distribution_club_id_{{ product.distribution_club.id }}" value="{{ product.distribution_club.id }}">
        {% endif %}
        <!-- 商品名 -->
        <label for="changeable_distribution_club_id_{{ product.distribution_club.id }}">{{ product.name }}</label>
      {% endif %}
    {% endfor %}
  </form>
</div>

画面イメージ

※こちらは、上記で紹介しているコンポーネントのコードにデフォルトデザインをCSSであてたイメージになります。
コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。