2022/02/07更新

+ 追加した行
- 削除した行

 <!-- 定期購入停止リンク -->
 {% if base_info.subs_order_cancelable? and subs_order.human_state_name == "有効" and subs_order.remaining_block_times == 0 %}
-  <a href="/shop/customer/subs_orders/{{ subs_order.number }}" data-method="delete" data-confirm="本当に停止しますか？">停止</a>
+  {% if base_info.subs_order_cancelable_reason? and reasons.size != 0 %}
+    <a href="/shop/customer/subs_orders/{{ subs_order.number }}/cancel">停止</a>
+  {% else %}
+    <a href="/shop/customer/subs_orders/{{ subs_order.number }}" data-method="delete" data-confirm="本当に停止しますか？">停止</a>
+  {% endif %}
 {% endif %}

     <select id='wrapping-id' name='order[wrapping_id]'>
       <option value=''>無し</option>
       {% for wrapping in wrappings %}
-        <option value="{{ wrapping.id }}" {% if order.wrapping_id == wrapping.id %}selected{% endif %} data-thumbnail-url="{{ wrapping.thumbnail.url }}">{{ wrapping.name }} {{ wrapping.price | number_to_currency : format: '%n %u' }}</option>
+        {% if wrapping.active %}
+          <option value="{{ wrapping.id }}" {% if order.wrapping_id == wrapping.id %}selected{% endif %} data-thumbnail-url="{{ wrapping.thumbnail.url }}">{{ wrapping.name }} {{ wrapping.price | number_to_currency : format: '%n %u' }}</option>
+        {% endif %}
       {% endfor %}
     </select>

 <!-- 商品の追加(任意) -->
-{% assign order_item_ids = subs_order.order_items | map: 'variant_id' | join: ',' | split: ',' %}
 {% if base_info.variant_addable_on_mypage? and products_addable_on_mypage_in_all_variants%}
-  {% for product in products %}
-    {% assign flag = true %}
-    {% for oi in order_item_ids %}
-      {% assign id =  oi | plus: 0 %}
-      {% if product.master.id == id %}
-        {% assign flag = false %}
+  {% for product in addable_products %}
+    <a href="/shop/customer/subs_orders/{{ subs_order.number }}/order_items/add?product_number={{ product.number }}">
+      {% if product.thumbnail.url %}
+        {% assign src = product.thumbnail.url %}
+      {% else %}
+        {% assign src = 'missing' | image_url %}
       {% endif %}
-    {% endfor %}
-    {% if flag == true and product.master.products_addable_on_mypage == true and product.master.visible_in_cart %}
-      <a href="/shop/customer/subs_orders/{{ subs_order.number }}/order_items/add?product_number={{ product.number }}">
-        {% if product.thumbnail.url %}
-          {% assign src = product.thumbnail.url %}
-        {% else %}
-          {% assign src = 'missing' | image_url %}
-        {% endif %}
-        <img src="{{ src }}">
-      </a>
-      <p>{{ product.name | truncate: 35 }}</p>
-      <p>販売価格：<span>{{ product.first_price | number_to_currency: format: '%n %u' }}</span></p>
-      <a href="/shop/customer/subs_orders/{{ subs_order.number }}/order_items/add?product_number={{ product.number }}">
-        <button>追加する</button>
-      </a>
-    {% endif %}
+      <img src="{{ src }}">
+    </a>
+    <p>{{ product.name | truncate: 35 }}</p>
+    {% assign options = "" %}
+    {% assign options = options | append: product.id | append: "," | append: subs_order.times %}
+    {% assign options_array = options | split: "," %}
+    <p>販売価格：<span>{{ options_array | liquid_recurring_time_price | number_to_currency: format: '%n %u' }}</span></p>
+    <a href="/shop/customer/subs_orders/{{ subs_order.number }}/order_items/add?product_number={{ product.number }}">
+      <button>追加する</button>
+    </a>
   {% endfor %}
 {% endif %}

 {% assign template = 'shop/customer/subs_orders/variants' %}
 
 <div id="product-show-view">
-
-
+  <input id="subs-order-number" type="hidden" value="{{ params[:id] }}">
+  <input id="variant-sku" type="hidden" value="{{ product.master.sku }}">
 
   <!-- 商品画像 -->
   {% if product.thumbnail.url %}

   <!-- 通常価格(税込み) -->
   <span id="list-price-include-tax">{{ product.master.list_price_include_tax | number_to_currency: format: '%n %u' }}</span>
 
+  {% assign options = "" %}
+  {% assign options = options | append: product.id | append: "," | append: subs_order.times %}
+  {% assign options_array = options | split: "," %}
   <!-- 販売価格 -->
-  <span id="sales-price">{{ product.first_price | number_to_currency: format: '%n %u' }}</span>
+  <span id="sales-price">{{ options_array | liquid_recurring_time_price | number_to_currency: format: '%n %u' }}</span>
   <!-- 販売価格(税込み) -->
-  <span id="sales-price-include-tax">{{ product.first_price_include_tax | number_to_currency: format: '%n %u' }}</span>
+  <span id="sales-price-include-tax">{{ options_array | liquid_recurring_time_price_include_tax | number_to_currency: format: '%n %u' }}</span>
 
   <!-- メーカー(任意) -->
   {{ product.maker.name }}

       <!-- カード番号 -->
       <label for="number">カード番号</label>
-      <input class="validate[required,custom[integer],maxSize[16]]" id="number" name="card[number]">
+      {% if ecforce_payment_available %}
+        <div id="ecforce-payment-card-number-error"></div>
+        <div id="ecforce-view-input-card-number">
+          <div class="ecforce-payment-card-number">
+            <div id="card-number"></div>
+          </div>
+          <input id="number" style="display: none;" class="validate[required]" name="card[number]" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-number-error">
+        </div>
+      {% else %}
+        <input class="validate[required,custom[integer],maxSize[16]]" id="number" name="card[number]">
+      {% endif %}
 
       <!-- カード有効期限 -->
       <label for="month">カード有効期限</label>
-      <select class="validate[required]" id="month" name="card[month]">
-        <option value="">--</option>
-        {% for m in (1..12) %}
-          <option value='{{ m }}'>{{ m }}</option>
-        {% endfor %}
-      </select>
-      月
-      <select class="validate[required]" id="year" name="card[year]">
-        <option value="">--</option>
-        {% assign now_year = "now" | date: "%Y" | minus: 2000 %}
-        {% assign later_15_years = "now" | date: "%Y" | plus: 15 | minus: 2000 %}
-        {% for y in (now_year..later_15_years) %}
-          <option value='{{ y }}'>{{ y }}</option>
-        {% endfor %}
-      </select>
-      年
+      {% if ecforce_payment_available %}
+        <div id="expire-validation" class="ecforce-input-card-info">
+          <div id="ecforce-payment-card-expiry-error"></div>
+          <div class="ecforce-payment-card-expiry">
+            <div id="card-expiry"></div>
+          </div>
+          <input type="hidden" id ="ecforce-payment-expiry" class="validate_req validate[required]" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-expiry-error" disabled>
+          <input type="hidden" id="month" name="card[month]">
+          <input type="hidden" id="year" name="card[year]">
+        </div>
+      {% else %}
+        <select class="validate[required]" id="month" name="card[month]">
+          <option value="">--</option>
+          {% for m in (1..12) %}
+            <option value='{{ m }}'>{{ m }}</option>
+          {% endfor %}
+        </select>
+        月
+        <select class="validate[required]" id="year" name="card[year]">
+          <option value="">--</option>
+          {% assign now_year = "now" | date: "%Y" | minus: 2000 %}
+          {% assign later_15_years = "now" | date: "%Y" | plus: 15 | minus: 2000 %}
+          {% for y in (now_year..later_15_years) %}
+            <option value='{{ y }}'>{{ y }}</option>
+          {% endfor %}
+        </select>
+        年
+      {% endif %}
 
       <!-- カード名義 -->
       <label for="name">カード名義</label>
-      <input class="validate[required,custom[onlyLetterSp]]" id="name" name="card[name]">
+      {% if ecforce_payment_available %}
+        <div id="ecforce-payment-card-name-error"></div>
+        <input class="validate[required,custom[onlyLetterSp]]" id="name" name="card[name]" placeholder="例）HANAKO YAMADA" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-name-error">
+      {% else %}
+        <input class="validate[required,custom[onlyLetterSp]]" id="name" name="card[name]">
+      {% endif %}
 
       <!-- セキュリティコード -->
       <div id="view-input-card-cvv" style="display: none;">
         <label for="name">セキュリティコード</label>
-        <input class="validate[required]" id="cvv" name="cvv">
+        {% if ecforce_payment_available %}
+          {% if use_cvc == 'true' %}
+            <div id="cvv-validation" class="ecforce-input-card-info">
+              <div id="ecforce-payment-card-cvv-error"></div>
+              <div class="ecforce-payment-card-cvv">
+                <div id="card-cvv"></div>
+              </div>
+              <input type="hidden" id="cvv" class="validate_req validate[required]" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-cvv-error" disabled>
+            </div>
+          {% endif %}
+        {% else %}
+          <input class="validate[required]" id="cvv" name="cvv">
+        {% endif %}
       </div>
 
       <!-- デフォルト -->

     <div id="view-input-card-number" style="{% if current_customer_has_card %}display:none;{% endif %}">
       <label>クレジットカード番号</label>
       {% if ecforce_payment_available %}
-        <div class="ecforce-payment-card-number">
-          <div id="card-number"></div>
-          <input type="hidden" name="order[payment_attributes][source_attributes][last_digits]" id="ecforce-payment-last-digits" class="validate[required]">
+        <div id="ecforce-payment-card-number-error"></div>
+        <div id="ecforce-view-input-card-number">
+          <div class="ecforce-payment-card-number">
+            <div id="card-number"></div>
+          </div>
+          <input id="ecforce-payment-last-digits" style="display: none;" class="validate[required]" name="order[payment_attributes][source_attributes][last_digits]" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-number-error">
         </div>
       {% else %}
         <input type="hidden" name="order[payment_attributes][source_attributes][default]" id="input-cc-default" {% if current_customer_has_card %}disabled{% endif %} value="1">

     <div id="view-input-card-expire" style={% if current_customer_has_card %}"display:none;"{% endif %}>
       <label>カードの有効期限</label>
       {% if ecforce_payment_available %}
-        <div class="ecforce-payment-card-expiry">
-          <div id="card-expiry"></div>
+        <div id="expire-validation" class="ecforce-input-card-info">
+          <div id="ecforce-payment-card-expiry-error"></div>
+          <div class="ecforce-payment-card-expiry">
+            <div id="card-expiry"></div>
+          </div>
+          <input type="hidden" id ="ecforce-payment-expiry" class="validate_req validate[required]" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-expiry-error" disabled>
           <input type="hidden" id="ecforce-payment-month" name="order[payment_attributes][source_attributes][month]">
           <input type="hidden" id="ecforce-payment-year" name="order[payment_attributes][source_attributes][year]">
         </div>

     <!-- クレジットカード名義人の入力 -->
     <div id="view-input-card-name" style={% if current_customer_has_card %}"display:none;"{% endif %}>
       <label>カードの名義人</label>
-      <input type="text" name="order[payment_attributes][source_attributes][name]" id="input-cc-name" class="validate[required,custom[onlyLetterSp]]" value='{{ order.payment.source.name }}' {% if current_customer_has_card %}disabled{% endif %}>
+      {% if ecforce_payment_available %}
+        <div id="ecforce-payment-card-name-error"></div>
+        <input type="text" name="order[payment_attributes][source_attributes][name]" id="input-cc-name" class="validate[required,custom[onlyLetterSp]]" value='{{ order.payment.source.name }}' {% if current_customer_has_card %}disabled{% endif %} placeholder="例）HANAKO YAMADA" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-name-error">
+      {% else %}
+        <input type="text" name="order[payment_attributes][source_attributes][name]" id="input-cc-name" class="validate[required,custom[onlyLetterSp]]" value='{{ order.payment.source.name }}' {% if current_customer_has_card %}disabled{% endif %}>
+      {% endif %}
     </div>
 
     <!-- セキュリティコードの入力 -->
     <div id="view-input-card-cvv" {% if current_customer_has_card %}style="display:none;"{% endif %}>
       <label>セキュリティコード</label>
       {% if ecforce_payment_available %}
-        <div class="ecforce-payment-card-cvc">
-          <div id="card-cvc"></div>
-        </div>
+        {% if use_cvc == 'true' %}
+          <div id="cvv-validation" class="ecforce-input-card-info">
+            <div id="ecforce-payment-card-cvv-error"></div>
+            <div class="ecforce-payment-card-cvv">
+              <div id="card-cvv"></div>
+            </div>
+            <input type="hidden" id="cvv" class="validate_req validate[required]" data-prompt-position="inline" data-prompt-target="ecforce-payment-card-cvv-error" disabled>
+          </div>
+        {% endif %}
       {% else %}
         <input type="text" name="cvv" id="input-cc-cvv" class="validate[required]" {% if current_customer_has_card %}disabled{% endif %}>
       {% endif %}

       <!-- 価格（税抜）　-->
-      0円
+      {% if distribution_club.fixed_price? %}
+        0円
+      {% else %}
+        {{ order_item.recurring_next_current_price | number_to_currency: format: '%n %u' }}
+      {% endif %}
     {% endfor %}
   {% endfor %}

     <!-- 操作 -->
-    <a data-confirm="商品名：{{ favorite.product.name }} をお気に入りから削除しますか?" rel="nofollow" data-method="delete" href="/shop/customer/favorites/{{ favorite.product.id }}">削除</a>
+    <a data-confirm="商品名：{{ favorite.product.name }} をお気に入りから削除しますか?" rel="nofollow" data-method="delete" href="/shop/customer/favorites/{{ favorite.id }}">削除</a>

   <!-- ポイント交換予約キャンセル -->
   {% if base_info.use_point? and order_item.point_exchange_reserved? %}
     <a data-confirm="本当に予約キャンセルしますか?" rel="nofollow" data-method="delete" href="/shop/customer/subs_orders/{{ subs_order.number }}/point_exchange_reservations/{{ order_item.id }}">予約キャンセル</a>
-  {% elsif order_item.point_exchange_reserved? == false %}
-  <!-- 削除ボタン -->
+  {% elsif base_info.variant_deletable_on_mypage? and order_item.point_exchange_reserved? == false %}
+    <!-- 削除ボタン -->
     <a data-confirm="本当に削除しますか?" data-method="delete" href="/shop/customer/subs_orders/{{ subs_order.number }}/order_items/{{ order_item.id }}">削除</a>
   {% endif %}
 </div>

-  <!-- セット詳細 -->
+  <!-- (PCの場合)セット詳細 -->
  {{ set.description }}
+  <!-- (SPの場合)セット詳細 -->
+  {{ set.description_mobile }}

         <!-- 保存ボタン -->
-        <input id="save-btn" class='submit' data-disable-with='保存中...' type='submit' value='保存'>
+        <input id="save-btn" class='submit' data-disable-with='保存中...' type='submit' value='保存' disabled>