テーマ仕様書
shop
購入画面
複数のお届け先入力★

複数のお届け先入力フォーム(部分テンプレート)

注文情報入力画面で利用する各入力フォーム用部分テンプレートです。
注文情報入力画面で include して利用します。(注文情報入力画面以外では利用できません)

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

ec_force/shop/orders/_view_multiple_shipping_information_form_data.html.liquid
ec_force/shop/orders/_view_multiple_shipping_information_form_data.html+smartphone.liquid

必要なコンポーネント

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

{% if multiple_shipping_is_available %}
 
  <!-- 複数のお届け先フォームデータ -->
  <div id="multiple-shipping-raw-form">
    {% for shipping_address in order.shipping_addresses_without_deleted %}
      <!-- お届け先ごとのフォームデータ枠(必須タグ) -->
      <div>
 
        {% assign index = forloop.index0 %}
 
        <button class="delete_shipping_address" type="button">削除</button>
 
        <!-- お届け先住所の選択 -->
        <label>お届け先住所</label>
        <select class="shipping_addresses_id" name="order[shipping_addresses_attributes][{{ index }}][shipping_address_id]">
          <option value="same" {% if selected_shipping_addresses_value[index] == blank or selected_shipping_addresses_value[index] == 'same' %}selected{% endif %}>請求先住所と同じ</option>
          {% if customer_signed_in %}
            {% for sa in current_customer.shipping_addresses %}
              <option value="{{ sa.id }}" {% if selected_shipping_addresses_value[index] == sa.id %}selected{% endif %}>
                {{ sa.full_name }} | 〒{{ sa.full_zip }} {{ sa.full_address }}
              </option>
            {% endfor %}
          {% endif %}
          <option value="new" {% if selected_shipping_addresses_value[index] == 'new' %}selected{% endif %}>新しく入力する</option>
        </select>
 
        <div id="shipping_address_input_{{ index }}">
 
          <!-- お名前 -->
          <label>お名前</label>
          {% if shop_form_settings['name_1_field'] %}
            <input type="text" class="validate[required]" id="order_shipping_addresses_{{index}}_attributes_name01" name="order[shipping_addresses_attributes][{{ index }}][name01]" placeholder="例)山田 花子" value="{{ shipping_address.full_name }}">
          {% else %}
            <span>姓</span>
            <input type="text" class="validate[required]" id="order_shipping_addresses_{{index}}_attributes_name01" name="order[shipping_addresses_attributes][{{ index }}][name01]" placeholder="例)山田" value="{{ shipping_address.name01 }}">
            <span>名</span>
            <input type="text" class="validate[required]" id="order_shipping_addresses_{{index}}_attributes_name02" name="order[shipping_addresses_attributes][{{ index }}][name02]" placeholder="例)花子" value="{{ shipping_address.name02 }}">
          {% endif %}
 
          <!-- フリガナ -->
          <label>フリガナ</label>
          {% if shop_form_settings['kana_1_field'] %}
            <input type="text" class="validate[required,custom[katakana]]" id="order_shipping_addresses_{{index}}_attributes_kana01" name="order[shipping_addresses_attributes][{{ index }}][kana01]" placeholder="例)ヤマダ ハナコ" value="{{ shipping_address.full_kana }}">
          {% else %}
            <span>セイ</span>
            <input type="text" class="validate[required,custom[katakana]]" id="order_shipping_addresses_{{index}}_attributes_kana01" name="order[shipping_addresses_attributes][{{ index }}][kana01]" placeholder="例)ヤマダ" value="{{ shipping_address.kana01 }}">
            <span>メイ</span>
            <input type="text" class="validate[required,custom[katakana]]" id="order_shipping_addresses_{{index}}_attributes_kana02" name="order[shipping_addresses_attributes][{{ index }}][kana02]" placeholder="例)ハナコ" value="{{ shipping_address.kana02 }}">
          {% endif %}
 
          <!-- 郵便番号 -->
          <label>郵便番号</label>
          {% if shop_form_settings['zip_1_field'] %}
            <span>〒</span>
            <input type="tel" class="shipping_addresses_zip01 validate[required,custom[integer],minSize[7]]" id="order_shipping_addresses_{{index}}_attributes_zip01" maxlength="7" name="order[shipping_addresses_attributes][{{ index }}][zip01]" placeholder="1500031" value="{{ shipping_address.full_zip }}">
          {% else %}
            <span>〒</span>
            <input type="tel" class="shipping_addresses_zip01 validate[required,custom[integer],minSize[3]]" id="order_shipping_addresses_{{index}}_attributes_zip01" maxlength="3" name="order[shipping_addresses_attributes][{{ index }}][zip01]" placeholder="150" value="{{ shipping_address.zip01 }}">
            <span>−</span>
            <input type="tel" class="shipping_addresses_zip02 validate[required,custom[integer],minSize[4]]" id="order_shipping_addresses_{{index}}_attributes_zip02" maxlength="4" name="order[shipping_addresses_attributes][{{ index }}][zip02]" placeholder="0031" value="{{ shipping_address.zip02 }}">
          {% endif %}
 
          <!-- 都道府県 -->
          <label>都道府県</label>
          <select class="validate[required]" id="order_shipping_addresses_{{index}}_attributes_prefecture_name" name="order[shipping_addresses_attributes][{{ index }}][prefecture_id]">
            <option value="">選択してください</option>
            {% for prefecture in prefectures %}
              <option value="{{ prefecture.id }}" {% if shipping_address.prefecture_id == prefecture.id %}selected{% endif %}>{{ prefecture.name }}</option>
            {% endfor %}
          </select>
 
          <!-- 住所1 -->
          <label>{{ shop_form_settings['addr01_label'] }}</label>
          <input type="text" class="validate[required]" id="order_shipping_addresses_{{index}}_attributes_addr01" name="order[shipping_addresses_attributes][{{ index }}][addr01]" placeholder="{{ shop_form_settings['addr01_placeholder'] }}" value="{{ shipping_address.addr01 }}">
 
          <!-- 住所2 -->
          <label>{{ shop_form_settings['addr02_label'] }}</label>
          {% if shop_form_settings['addr03'] %}
            <input type="text" class="{% if shop_form_settings['addr02_require'] %}validate[required]{% endif %}" id="order_shipping_addresses_{{index}}_attributes_addr02" name="order[shipping_addresses_attributes][{{ index }}][addr02]" value="{{ shipping_address.addr02 }}" placeholder="{{ shop_form_settings['addr02_placeholder'] }}">
          {% else %}
            <input type="text" class="{% if shop_form_settings['addr02_require'] %}validate[required]{% endif %}" id="order_shipping_addresses_{{index}}_attributes_addr02" name="order[shipping_addresses_attributes][{{ index }}][addr02]"
            value="{{ shipping_address.addr02 }}{{ shipping_address.addr03 }}" placeholder="{{ shop_form_settings['addr02_placeholder'] | append: shop_form_settings['addr03_placeholder'] }}">
          {% endif %}
 
          <!-- 住所3 -->
          {% if shop_form_settings['addr03'] %}
            <label>{{ shop_form_settings['addr03_label'] }}</label>
            <input type="text" id="order_shipping_addresses_{{index}}_attributes_addr03" name="order[shipping_addresses_attributes][{{ index }}][addr03]" placeholder="{{ shop_form_settings['addr03_placeholder'] }}" value="{{ shipping_address.addr03 }}">
          {% endif %}
 
          <!-- 電話番号 -->
          <label>電話番号</label>
          {% if shop_form_settings['tel_1_field'] %}
            <input type="tel" class="validate[required,custom[integer]]" maxlength="12" name="order[shipping_addresses_attributes][{{ index }}][tel01]" value="{{ shipping_address.full_tel }}">
          {% else %}
            <input type="tel" class="validate[required,custom[integer]]" maxlength="5" name="order[shipping_addresses_attributes][{{ index }}][tel01]" value="{{ shipping_address.tel01 }}">
            <span>-</span>
            <input type="tel" class="validate[required,custom[integer]]" maxlength="4" name="order[shipping_addresses_attributes][{{ index }}][tel02]" value="{{ shipping_address.tel02 }}">
            <span>-</span>
            <input type="tel" class="validate[required,custom[integer]]" maxlength="4" name="order[shipping_addresses_attributes][{{ index }}][tel03]" value="{{ shipping_address.tel03 }}">
          {% endif %}
 
          <!-- お届け先登録-->
          <label for="order_shipping_addresses_{{ index }}_attributes_persist_as_customer_shipping_address">
            <input type="hidden" name="order[shipping_addresses_attributes][{{ index }}][persist_as_customer_shipping_address]" value="0">
            <input type="checkbox" id="order_shipping_addresses_{{ index }}_attributes_persist_as_customer_shipping_address" name="order[shipping_addresses_attributes][{{ index }}][persist_as_customer_shipping_address]" value="1" {% if shipping_address.persist_as_customer_shipping_address == true %}checked{% endif %}>お届け先登録する
          </label>
        </div>
 
        <!-- お届け先商品情報 -->
        {% for order_item in order_items_without_bundled_and_gift %}
          {% assign order_items_info = "" %}
          {% for oiil in shipping_address.order_items_info_list %}
            {% if oiil.order_item.id == order_item.id %}
              {% assign order_items_info = oiil %}
            {% endif %}
          {% endfor %}
 
          <label>{{ order_item.variant.name_with_option_values_presentation }}</label>
          <div class="order_items_info">
 
            <!-- お届け先商品数量の選択 -->
            <input type="hidden" class="order_items_info__order_item_id" name="order[shipping_addresses_attributes][{{ index }}][order_items_info_list_attributes][{{ forloop.index0 }}][order_item_id]" value="{{ order_item.id }}">
            <select class="order_items_info__quantity" name="order[shipping_addresses_attributes][{{ index }}][order_items_info_list_attributes][{{ forloop.index0 }}][quantity]">
              {% for i in (0..order_item.quantity) %}
                <option value="{{ i }}" {% if order_items_info.quantity == i %}selected{% endif %}>{{ i }}</option>
              {% endfor %}
            </select>
 
          </div>
        {% endfor %}
 
        <!-- 配送業者情報 -->
        <div style="{% unless display_shipping_carrier_view_flag %}display: none;{% endunless %}">
          <div class="shipping_carrier_contents">
 
            <!-- 配送業者の選択-->
            <label>配送業者</label>
            <select class="shipping_carrier_id" name="order[shipping_addresses_attributes][{{ index }}]['delivery_info_attributes'][shipping_carrier_id]">
              {% if shipping_address.shipping_carrier_id %}
                <option value="{{ shipping_address.shipping_carrier_id }}" selected>{{ shipping_address.shipping_carrier.name }}</option>
              {% endif %}
            </select>
            <div class="shipping_carrier_description"></div>
 
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
 
  <!-- 複数のお届け先入力フォームテンプレート -->
  <div id="multiple-shipping-template-form" style="display: none;">
    {% assign index = '#{index}' %}
    {% assign shipping_address = shipping_address_instance %}
 
    <button class="delete_shipping_address" type="button">削除</button>
 
    <!-- お届け先住所の選択 -->
    <label>お届け先住所</label>
    <select class="shipping_addresses_id" name="order[shipping_addresses_attributes][{{ index }}][shipping_address_id]">
      <option value="same" {% if selected_shipping_addresses_value[index] == blank or selected_shipping_addresses_value[index] == 'same' %}selected{% endif %}>請求先住所と同じ</option>
      {% if customer_signed_in %}
        {% for sa in current_customer.shipping_addresses %}
          <option value="{{ sa.id }}" {% if selected_shipping_addresses_value[index] == sa.id %}selected{% endif %}>
            {{ sa.full_name }} | 〒{{ sa.full_zip }} {{ sa.full_address }}
          </option>
        {% endfor %}
      {% endif %}
      <option value="new" {% if selected_shipping_addresses_value[index] == 'new' %}selected{% endif %}>新しく入力する</option>
    </select>
 
    <div id="shipping_address_input_{{ index }}">
 
      <!-- お名前 -->
      <label>お名前</label>
      {% if shop_form_settings['name_1_field'] %}
        <input type="text" class="validate[required]" id="order_shipping_addresses_{{index}}_attributes_name01" name="order[shipping_addresses_attributes][{{ index }}][name01]" placeholder="例)山田 花子" value="{{ shipping_address.full_name }}">
      {% else %}
        <span>姓</span>
        <input type="text" class="validate[required]" id="order_shipping_addresses_{{index}}_attributes_name01" name="order[shipping_addresses_attributes][{{ index }}][name01]" placeholder="例)山田" value="{{ shipping_address.name01 }}">
        <span>名</span>
        <input type="text" class="validate[required]" id="order_shipping_addresses_{{index}}_attributes_name02" name="order[shipping_addresses_attributes][{{ index }}][name02]" placeholder="例)花子" value="{{ shipping_address.name02 }}">
      {% endif %}
 
      <!-- フリガナ -->
      <label>フリガナ</label>
      {% if shop_form_settings['kana_1_field'] %}
        <input type="text" class="validate[required,custom[katakana]]" id="order_shipping_addresses_{{index}}_attributes_kana01" name="order[shipping_addresses_attributes][{{ index }}][kana01]" placeholder="例)ヤマダ ハナコ" value="{{ shipping_address.full_kana }}">
      {% else %}
        <span>セイ</span>
        <input type="text" class="validate[required,custom[katakana]]" id="order_shipping_addresses_{{index}}_attributes_kana01" name="order[shipping_addresses_attributes][{{ index }}][kana01]" placeholder="例)ヤマダ" value="{{ shipping_address.kana01 }}">
        <span>メイ</span>
        <input type="text" class="validate[required,custom[katakana]]" id="order_shipping_addresses_{{index}}_attributes_kana02" name="order[shipping_addresses_attributes][{{ index }}][kana02]" placeholder="例)ハナコ" value="{{ shipping_address.kana02 }}">
      {% endif %}
 
      <!-- 郵便番号 -->
      <label>郵便番号</label>
      {% if shop_form_settings['zip_1_field'] %}
        <span>〒</span>
        <input type="tel" class="shipping_addresses_zip01 validate[required,custom[integer],minSize[7]]" id="order_shipping_addresses_{{index}}_attributes_zip01" maxlength="7" name="order[shipping_addresses_attributes][{{ index }}][zip01]" placeholder="1500031" value="{{ shipping_address.full_zip }}">
      {% else %}
        <span>〒</span>
        <input type="tel" class="shipping_addresses_zip01 validate[required,custom[integer],minSize[3]]" id="order_shipping_addresses_{{index}}_attributes_zip01" maxlength="3" name="order[shipping_addresses_attributes][{{ index }}][zip01]" placeholder="150" value="{{ shipping_address.zip01 }}">
        <span>−</span>
        <input type="tel" class="shipping_addresses_zip02 validate[required,custom[integer],minSize[4]]" id="order_shipping_addresses_{{index}}_attributes_zip02" maxlength="4" name="order[shipping_addresses_attributes][{{ index }}][zip02]" placeholder="0031" value="{{ shipping_address.zip02 }}">
      {% endif %}
 
      <!-- 都道府県 -->
      <label>都道府県</label>
      <select class="validate[required]" id="order_shipping_addresses_{{index}}_attributes_prefecture_name" name="order[shipping_addresses_attributes][{{ index }}][prefecture_id]">
        <option value="">選択してください</option>
        {% for prefecture in prefectures %}
          <option value="{{ prefecture.id }}" {% if shipping_address.prefecture_id == prefecture.id %}selected{% endif %}>{{ prefecture.name }}</option>
        {% endfor %}
      </select>
 
      <!-- 住所1 -->
      <label>{{ shop_form_settings['addr01_label'] }}</label>
      <input type="text" class="validate[required]" id="order_shipping_addresses_{{index}}_attributes_addr01" name="order[shipping_addresses_attributes][{{ index }}][addr01]" placeholder="{{ shop_form_settings['addr01_placeholder'] }}" value="{{ shipping_address.addr01 }}">
 
      <!-- 住所2 -->
      <label>{{ shop_form_settings['addr02_label'] }}</label>
      {% if shop_form_settings['addr03'] %}
        <input type="text" class="{% if shop_form_settings['addr02_require'] %}validate[required]{% endif %}" id="order_shipping_addresses_{{index}}_attributes_addr02" name="order[shipping_addresses_attributes][{{ index }}][addr02]" value="{{ shipping_address.addr02 }}" placeholder="{{ shop_form_settings['addr02_placeholder'] }}">
      {% else %}
        <input type="text" class="{% if shop_form_settings['addr02_require'] %}validate[required]{% endif %}" id="order_shipping_addresses_{{index}}_attributes_addr02" name="order[shipping_addresses_attributes][{{ index }}][addr02]"
        value="{{ shipping_address.addr02 }}{{ shipping_address.addr03 }}" placeholder="{{ shop_form_settings['addr02_placeholder'] | append: shop_form_settings['addr03_placeholder'] }}">
      {% endif %}
 
      <!-- 住所3 -->
      {% if shop_form_settings['addr03'] %}
        <label>{{ shop_form_settings['addr03_label'] }}</label>
        <input type="text" id="order_shipping_addresses_{{index}}_attributes_addr03" name="order[shipping_addresses_attributes][{{ index }}][addr03]" placeholder="{{ shop_form_settings['addr03_placeholder'] }}" value="{{ shipping_address.addr03 }}">
      {% endif %}
 
      <!-- 電話番号 -->
      <label>電話番号</label>
      {% if shop_form_settings['tel_1_field'] %}
        <input type="tel" class="validate[required,custom[integer]]" maxlength="12" name="order[shipping_addresses_attributes][{{ index }}][tel01]" value="{{ shipping_address.full_tel }}">
      {% else %}
        <input type="tel" class="validate[required,custom[integer]]" maxlength="5" name="order[shipping_addresses_attributes][{{ index }}][tel01]" value="{{ shipping_address.tel01 }}">
        <span>-</span>
        <input type="tel" class="validate[required,custom[integer]]" maxlength="4" name="order[shipping_addresses_attributes][{{ index }}][tel02]" value="{{ shipping_address.tel02 }}">
        <span>-</span>
        <input type="tel" class="validate[required,custom[integer]]" maxlength="4" name="order[shipping_addresses_attributes][{{ index }}][tel03]" value="{{ shipping_address.tel03 }}">
      {% endif %}
 
      <!-- お届け先登録-->
      <label for="order_shipping_addresses_{{ index }}_attributes_persist_as_customer_shipping_address">
        <input type="hidden" name="order[shipping_addresses_attributes][{{ index }}][persist_as_customer_shipping_address]" value="0">
        <input type="checkbox" id="order_shipping_addresses_{{ index }}_attributes_persist_as_customer_shipping_address" name="order[shipping_addresses_attributes][{{ index }}][persist_as_customer_shipping_address]" value="1" {% if shipping_address.persist_as_customer_shipping_address == true %}checked{% endif %}>お届け先登録する
      </label>
    </div>
 
    <!-- お届け先商品情報 -->
    {% for order_item in order_items_without_bundled_and_gift %}
      {% assign order_items_info = "" %}
      {% for oiil in shipping_address.order_items_info_list %}
        {% if oiil.order_item.id == order_item.id %}
          {% assign order_items_info = oiil %}
        {% endif %}
      {% endfor %}
 
      <label>{{ order_item.variant.name_with_option_values_presentation }}</label>
      <div class="order_items_info">
 
        <!-- お届け先商品数量の選択 -->
        <input type="hidden" class="order_items_info__order_item_id" name="order[shipping_addresses_attributes][{{ index }}][order_items_info_list_attributes][{{ forloop.index0 }}][order_item_id]" value="{{ order_item.id }}">
        <select class="order_items_info__quantity" name="order[shipping_addresses_attributes][{{ index }}][order_items_info_list_attributes][{{ forloop.index0 }}][quantity]">
          {% for i in (0..order_item.quantity) %}
            <option value="{{ i }}" {% if order_items_info.quantity == i %}selected{% endif %}>{{ i }}</option>
          {% endfor %}
        </select>
 
      </div>
    {% endfor %}
 
    <!-- 配送業者情報 -->
    <div style="{% unless display_shipping_carrier_view_flag %}display: none;{% endunless %}">
      <div class="shipping_carrier_contents">
 
        <!-- 配送業者の選択-->
        <label>配送業者</label>
        <select class="shipping_carrier_id" name="order[shipping_addresses_attributes][{{ index }}]['delivery_info_attributes'][shipping_carrier_id]">
          {% if shipping_address.shipping_carrier_id %}
            <option value="{{ shipping_address.shipping_carrier_id }}" selected>{{ shipping_address.shipping_carrier.name }}</option>
          {% endif %}
        </select>
        <div class="shipping_carrier_description"></div>
 
      </div>
    </div>
 
  </div>
{% endif %}