ギフト商品一覧（部分テンプレート）

{% if gift_assignable_order_items.size > 0 and gifts.size > 0 %}
  <!-- ギフト設定領域の表示ボタン -->
  <button id="btn-toggle-gift-addition">ギフト設定</button>
 
  <div id="gift-addition" style="display: none;">
    <!-- ギフト設定する商品の選択 -->
    ギフト設定をする商品を選択してください
    <select id="select-order-item-for-gift">
      <option value="">選択してください</option>
      {% for order_item in gift_assignable_order_items %}
        {% assign quantity = order_item.quantity | minus: order_item.set_item_quantity %}
        <option value="{{order_item.id}},{{quantity}},{{order_item.variant_id}}">{{order_item.variant.name_with_option_values_presentation}}</option>
      {% endfor %}
    </select>
 
    <!-- ギフト商品一覧（ギフト商品の選択と個数、名入れの設定） -->
    {% for gift in gifts %}
      <div class="gift">
        <!-- ギフト商品画像 -->
        {% if gift.thumbnail.url %}
          {% assign src = gift.thumbnail.url %}
        {% else %}
          {% assign src = 'missing' | image_url %}
        {% endif %}
        <img src="{{ src }}" class="gift-product-img">
 
        <!-- ギフト商品名 -->
        {{ gift.name | truncate: 35 }}
 
        <!-- ギフト商品販売価格 -->
        <span class="sales-price">{{ gift.first_price | number_to_currency }}</span>
 
        <form action="/shop/cart/add" method="post" class="gift-form">
          <input type="hidden" name="variant_id" value="{{ gift.master_id }}" class="variant-id">
          <input type="hidden" name="gift_id" value="{{ gift.id }}" class="gift-id">
          <input type="hidden" class="order-item-id-for-gift" name="gift[order_item_id_for_gift]" value="">
 
          <!-- ギフト商品（熨斗）の場合 -->
          {% if gift.noshi? %}
            <!-- 表書き -->
            {% if gift.description_part_of_noshi != blank %}
              {{ gift.description_part_of_noshi }}
            {% endif %}
 
            <!-- 名入れ 入力欄 -->
            名入れ
            <input type="text" placeholder="例)山田 花子" name="gift[name_part_of_noshi]" class="name_part_of_noshi">
          {% endif %}
 
          <!-- ギフト商品規格選択 -->
          <div class="option_types">
            <div class="option_type option_template" style="display: none;">
              <select class="input_option_type validate[required]">
                <option value="">選択してください</option>
              </select>
            </div>
          </div>
 
          <!-- ギフト商品個数選択 -->
          <input class="text-out-of-stock" value="在庫切れ" disabled="true" style="display: none;">
          <select class="gift-quantity" name="quantity">
            <option value="1">1 個</option>
          </select>
 
          <!-- ギフト商品カート追加ボタン -->
          <button type="submit" class="submit-gift">カートに追加する</button>
        </form>
      </div>
    {% endfor %}
  </div>
{% endif %}