定期注文詳細画面 頒布会商品の編集
頒布会商品の編集画面です。
ショップのパス
ドメイン/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であてたイメージになります。
コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。