サンクスクロスセル（部分テンプレート）

<div id="cv-xsells-view">
  {% if order.show_cv_xsell_form_at_shop? == true %}
    <form id="form_cv_xsell" action="/shop/order/cv_upsell" method="post">
      <input name="_method" type="hidden" value="put">
      <input name="authenticity_token" type="hidden" value="form_authenticity_token">
      <input name="order[take_cv_xsell_offer]" type="hidden" value="1">
      <input name="preview_order[offer_name]" type="hidden" value="cv_xsell">
      <div id="view-payment-information">
        <input id="payment_method_id" name="preview_order[payment_attributes][payment_method_id]" type="hidden" value="{{ order.payment.payment_method_id }}">
        <input id="payment_times" name="preview_order[payment_attributes][payment_times]" type="hidden" value="{{ order.payment.payment_times }}">
      </div>
      <div id="view-shipping-carrier">
        <input id="shipping_carrier_id" name="preview_order[shipping_carrier_id]" type="hidden" value="{{ order.shipping_carrier_id }}">
      </div>
      <div id="xsell-select-view" class="default-hide">
        {% for cv_xsell_product in order.cv_xsell_active_products %}
          <div>
            <div id="cv-xsell-product-{{ cv_xsell_product.id }}">
              {% assign thumbnail_url = 'missing' | image_url %}
              {% if cv_xsell_product.master.thumbnails.size > 0 and cv_xsell_product.master.thumbnails.first.url != nil %}
                {% assign thumbnail_url = cv_xsell_product.master.thumbnails.first.url %}
              {% elsif cv_xsell_product.thumbnail != nil %}
                {% assign thumbnail_url = cv_xsell_product.thumbnail.url %}
              {% endif %}
              
              <!-- 商品のメイン画像URLを取得 -->
              {% assign product_thumbnail_url = 'missing' | image_url %}
              {% if cv_xsell_product.thumbnail %}
                {% assign product_thumbnail_url = cv_xsell_product.thumbnail.url %}
              {% endif %}
              <img class="cv_xsell_product_img" src="{{ thumbnail_url }}" data-product-id="{{ cv_xsell_product.id }}"></img>
              {{ cv_xsell_product.name | truncate: 35 }}
              <!-- 商品バッジ(任意) -->
              {% if campaign_badge_flg_offer_hash[cv_xsell_product.id] %}
                <!-- キャンペーンバッジ(任意) -->
                {% assign badges = campaign_badge_flg_offer_hash[cv_xsell_product.id] | liquid_render_badges %}
                {% for render_badge in badges %}
                  {{ render_badge | hash: 'value' }}
                {% endfor %}
              {% endif %}
              販売価格：{{ cv_xsell_product.initial_price | number_to_currency }}（税抜）
              {{ cv_xsell_product.description | truncate: 40 }}
              <a class="cv_xsell_variant_detail" data-product-id="{{ cv_xsell_product.id }}">
                詳細を見る
              </a>
              {% assign delivery_group_names = '' %}
              {% for delivery_group_name in cv_xsell_product.delivery_group_names %}
                {% assign delivery_group_names = delivery_group_names | append: delivery_group_name | append: "," %}
              {% endfor %}
              {% assign concurrent_purchase_group_names = '' %}
              <!-- 「バッジ表示名」を表示したい場合、cv_xsell_product.concurrent_purchase_group_names を cv_xsell_product.concurrent_purchase_badge_names に修正してください。 -->
              {% for concurrent_purchase_group_name in cv_xsell_product.concurrent_purchase_group_names %}
                {% assign concurrent_purchase_group_names = concurrent_purchase_group_names | append: concurrent_purchase_group_name | append: "," %}
              {% endfor %}
              {% assign badges = campaign_badge_flg_offer_hash[cv_xsell_product.id] | liquid_render_badges %}
              {% assign campaign_badge_types = '' %}
              {% assign campaign_badge_values = '' %}
              {% for render_badge in badges %}
                {% assign type = render_badge | hash: 'type' %}
                {% assign value = render_badge | hash: 'value' %}
                {% if campaign_badge_types == '' %}
                  {% assign campaign_badge_types = campaign_badge_types | append: type %}
                  {% assign campaign_badge_values = campaign_badge_values | append: value %}
                {% else %}
                  {% assign campaign_badge_types = campaign_badge_types | append: ',' | append: type %}
                  {% assign campaign_badge_values = campaign_badge_values | append: ',' | append: value %}
                {% endif %}
              {% endfor %}
              <div>
                <input type="hidden" name="product-name" value="{{ cv_xsell_product.name | escape }}">
                <input type="hidden" name="product_description" value="{{ cv_xsell_product.parsed_description | simple_format }}">
                <input type="hidden" name="is_pre_order" value="{% if enabled_pre_order and cv_xsell_product.master.pre_order.is_pre_order? %}1{% else %}0{% endif %}">
                <input type="hidden" name="pre_ordered_display_mark" value="{% if pre_order_settings.display_mark %}1{% else %}0{% endif %}">
                <input type="hidden" name="pre_ordered_delivery_description_modal" value="{{ cv_xsell_product.master.pre_order.pre_ordered_delivery_description | escape }}">
                <input type="hidden" name="pre_ordered_notes" value="{{ pre_order_settings.notes | escape }}">
                <input type="hidden" name="valid_pre_order" value="{% if cv_xsell_product.master.pre_order.within_pre_order_period? == false %}0{% endif %}1">
                <input type="hidden" name="delivery_group_names" value="{{ delivery_group_names }} ">
                <input type="hidden" name="concurrent_purchase_group_names" value="{{ concurrent_purchase_group_names }} ">
                <input type="hidden" name="campaign_badges_type" value="{{ campaign_badge_types }}">
                <input type="hidden" name="campaign_badges_value" value="{{ campaign_badge_values }}">
                <input type="hidden" name="list-price" value="{{ cv_xsell_product.master.list_price | number_to_currency }}">
                <input type="hidden" name="list-price-include-tax" value="(税込価格 {{ cv_xsell_product.master.list_price_include_tax | number_to_currency }})">
                <input type="hidden" name="sales-price" value="{{ cv_xsell_product.initial_price | number_to_currency }}">
                <input type="hidden" name="sales-price-include-tax" value="(税込価格 {{ cv_xsell_product.initial_price_include_tax | number_to_currency }})">
                {% assign maker_name = '-' %}
                {% assign maker_url = '-' %}
                {% if cv_xsell_product.maker != nil %}
                  {% if cv_xsell_product.maker.name != nil %}
                    {% assign maker_name = cv_xsell_product.maker.name %}
                  {% endif %}
                  {% if cv_xsell_product.maker.url != nil %}
                    {% assign maker_url = cv_xsell_product.maker.url %}
                  {% endif %}
                {% endif %}
                <input type="hidden" name="maker-name" value="{{ maker_name }}">
                <input type="hidden" name="maker-url" value="{{ maker_url }}">
                {% assign categories = '' %}
                {% for category in cv_xsell_product.product_categories %}
                  {% if category.product_category_visibility %}
                    {% unless categories == '' %}
                      {% assign categories = categories | append: ', ' %}
                    {% endunless %}
                    {% assign categories = categories | append: category.name %}
                  {% endif %}
                {% endfor %}
                <input type="hidden" name="category" value="{{ categories }}">
                <input type="hidden" name="variant_description" value="{{ cv_xsell_product.master.parsed_description | simple_format }}">
                {% assign thumbnail_urls = '' %}
                {% for url in cv_xsell_product.master.thumbnail_urls %}
                  {% assign thumbnail_urls = thumbnail_urls | append: url | append: ',' %}
                {% endfor %}
                <input type="hidden" name="variant-image" value="{{ thumbnail_urls }}">
                <input type="hidden" name="main-thumbnail" value="{{ thumbnail_url }}">
                <input type="hidden" name="product-thumbnail" value="{{ product_thumbnail_url }}">
                <input type="hidden" name="tax" value="{{ cv_xsell_product.tax.now_value }}">
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
      <!-- 商品を追加したときの情報 -->
      <div class="form_group_ec">
        <div id="cv-xsell-table" class="default-hide">
          購入した商品に加えて、以下の商品を追加で購入します。
          <!-- 追加商品一覧（table要素から変更不可） -->
          <table>
            <tbody class="cv-xsell-variant-body">
              <!-- 項目名（任意） -->
              <tr>
                <th> 商品名 </th>
                <th> 単価 </th>
                <th> 個数 </th>
                <th> 小計 </th>
                <th></th>
              </tr>
              <!-- 項目（必須） -->
              <tr class="cv-xsell-variant-row default-hide">
                <!-- 商品名（JSで自動挿入） -->
                <td class="variant-name-area"></td>
                <!-- 単価（JSで自動挿入） -->
                <td class="variant-price"></td>
                <!-- 個数（JSで自動挿入） -->
                <td class="variant_quantity"></td>
                <!-- 小計（JSで自動挿入） -->
                <td class="variant-sum"></td>
                <td>
                  <button class="cv_xsell_variant_remove">削除</button>
                </td>
              </tr>
            </tbody>
          </table>
          ※ 各販売価格及び単価、小計は税抜金額です。
        </div>
        <div id="xsell-empty-message" class="default-hide">
          何も追加されていません。
        </div>
      </div>
      <!-- 商品を追加したときの情報 ここまで-->
      <div id="subs-order-settings" class="default-hide">
        お届け商品の設定
        {% include 'ec_force/shop/orders/view_payment_schedule.html' %}
      </div>
      <input id="submit_btn" class="default-hide" type="submit" value="申し込み内容を確認する" data-disable-with="" ></input>
    </form>
  {% else %}
    ご紹介できる商品が見つかりませんでした。
  {% endif %}
  <div id="expired_cv_xsell" class="default-hide">
    有効期限を経過しました。
    受付を終了させていただきます。
  </div>
 
  <div id="converted-items" class="default-hide">
    <div> 先ほど購入した商品</div>
    {% for item in order.order_items %}
      <div id="converted-item-{{ item.id }}">
        {% assign item_thumbnail_url = 'missing' | image_url %}
        {% if item.variant.thumbnails != nil and item.variant.thumbnails.first != nil %}
          {% assign item_thumbnail_url = item.variant.thumbnails.first.url %}
        {% elsif item.product.thumbnail.url != nil %}
          {% assign item_thumbnail_url = item.product.thumbnail.url %}
        {% endif %}
        <img src="{{ item_thumbnail_url }}" ></img>
        {{ item.product.name | truncate: 35 }}
        {{ item.view_selected_sku }}
          個数: {{ item.quantity }}
          販売価格：{{ item.variant.sales_price | number_to_currency }}（税抜）
      </div>
    {% endfor %}
  </div>
 
  <div class="modal-scrollable default-hide" id="product_details_modal">
    <!-- modal_position は CSSを含んでしまっている-->
    <div class="modal modal_position">
      <div class="modal-header">
        <button class="close"> &times;</button>
        <div class="modal-title"></div>
      </div>
      <div class="modal-body">
        <!-- 商品詳細情報（任意） -->
        <img id="main-thumbnail" src=""></img>
        <div id="sub-images-view"></div>
        <span id="product-name"></span>
        <span id="product_description"></span>
        商品詳細
        
        <!-- 商品バッジ(任意) -->
        <div class="display-badge-zone">
        {% if enabled_pre_order %}
          <!-- 予約商品マーク(任意) -->
          <span class="pre-order">
            <span id="pre_ordered_display_mark">予約商品</span>
          </span>
        {% endif %}
          <!-- 配送温度帯マーク(任意) -->
          <span class="delivery-group-badge-zone"></span>
          <!-- 同時購入グループバッジ(任意) -->
          <span class='concurrent-purchase-group-badge-zone'></span>
          <!-- キャンペーンバッジ(任意) -->
          <div class="campaign-badge-zone"></div>
        </div>
 
        <!-- 予約関連情報（任意） -->
        {% if enabled_pre_order %}
          <div class="pre-order">
            <span>お届け予定時期：</span>
            <span id="pre_ordered_delivery_description_modal"></span>
            <span id="pre_ordered_notes"></span>
          </div>
        {% endif %}
 
        <!-- 通常価格（税抜）-->
        通常価格（税抜）：<span id="list-price"></span>
        <!-- 通常価格（税込）-->
        通常価格（税込）：<span id="list-price-include-tax"></span>
        <!-- 販売価格（税込）-->
        販売価格（税抜）：<span id="sales-price"></span>
        <!-- 販売価格（税込）-->
        販売価格（税込）：<span id="sales-price-include-tax"></span>
        <!-- メーカー -->
        メーカー：<span id="maker-name"></span>
        <!-- メーカーURL -->
        メーカーURL：<span id="maker-url"></span>
        <!-- カテゴリー -->
        カテゴリー：<span id="category"></span>
        <!-- 説明 -->
        説明：<span id="variant_description"></span>
        <!-- 商品詳細情報（任意）ここまで -->
        <!-- 予約受付期間外時のメッセージ(任意) -->
        {% if enabled_pre_order %}
          <span id="invalid_pre_order_description" class="default-hide">予約受付期間外のためカートに商品を追加できません。</span>
        {% endif %}
        <!-- SKUの絞り込み -->
        <form>
          <input id="selected-variant-id" type="hidden" name="selected-variant-id" value=""></input>
          {% authenticity_token_tag %}
          <div>
          <div id="variant-option-types" class="default-hide"></div>
            数量
            <select id="quantity-area" name="quantity-area">
              {% for i in [*1..10] %}
                <option value="{{ i }}" {% if i == 1 %} selected {% endif %}>{{ i }}個</option>
              {% endfor %}
            </select>
            <button id="cv_xsell_variant_add"> 商品を選択 </button>
          </div>
        </form>
        <!-- SKUの絞り込み ここまで -->
      </div>
    </div>
  </div>
</div>