2022/12/21更新

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

サンクスオファー（サンクスクロスセル）機能対応

ショップのサンクスオファー機能を利用するためには、以下のテーマファイルの更新が必要です。

購入に大きく影響する箇所です。

更新時は必ずテーマ未適用の状態・かつテスト商品での動作確認を実施した後に、新しいテーマを適用することを強く推奨します。

cart > お届けサイクル（部分テンプレート）

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

 <!-- 部分テンプレート(お届けサイクルの選択) -->
 <div id='view-payment-schedule'>
+  {% if order.cv_upsell? %}
+    <input id='payment_schedule' name='preview_order[subs_order_attributes][payment_schedule]' type='hidden'>
+    <input id='payment_schedule_locked' name='preview_order[subs_order_attributes][payment_schedule_locked]' type='hidden'>
+    <input id='scheduled_to_be_delivered_every_x_month' name='preview_order[subs_order_attributes][scheduled_to_be_delivered_every_x_month]' type='hidden'>
+    <input id='scheduled_to_be_delivered_on_xth_day' name='preview_order[subs_order_attributes][scheduled_to_be_delivered_on_xth_day]' type='hidden'>
+    <input id='scheduled_to_be_delivered_every_x_day' name='preview_order[subs_order_attributes][scheduled_to_be_delivered_every_x_day]' type='hidden'>
+    <input id='scheduled_to_be_delivered_on_xth_day_of_week' name='preview_order[subs_order_attributes][scheduled_to_be_delivered_on_xth_day_of_week]' type='hidden'>
+    <input id='scheduled_to_be_delivered_every_x_day_of_week' name='preview_order[subs_order_attributes][scheduled_to_be_delivered_every_x_day_of_week]' type='hidden'>
+    <input id='scheduled_2nd_delivery_date' name='preview_order[subs_order_attributes][scheduled_to_be_delivered_at]' type='hidden'>
+    <input id='scheduled_2nd_delivery_time' name='preview_order[subs_order_attributes][scheduled_delivery_time]' type='hidden'>
+    <input id='scheduled_to_be_delivered_at' type='hidden'>
+    <input id='scheduled_1st_delivery_date' name='preview_order[scheduled_to_be_delivered_at]' type='hidden'>
+    <input id='scheduled_1st_delivery_time' name='preview_order[scheduled_delivery_time]' type='hidden'>
+  {% else %}
     <input id='payment_schedule' name='order[subs_order_attributes][payment_schedule]' type='hidden'>
     <input id='payment_schedule_locked' name='order[subs_order_attributes][payment_schedule_locked]' type='hidden'>
     <input id='scheduled_to_be_delivered_every_x_month' name='order[subs_order_attributes][scheduled_to_be_delivered_every_x_month]' type='hidden'>
     <input id='scheduled_to_be_delivered_on_xth_day' name='order[subs_order_attributes][scheduled_to_be_delivered_on_xth_day]' type='hidden'>
     <input id='scheduled_to_be_delivered_every_x_day' name='order[subs_order_attributes][scheduled_to_be_delivered_every_x_day]' type='hidden'>
     <input id='scheduled_to_be_delivered_on_xth_day_of_week' name='order[subs_order_attributes][scheduled_to_be_delivered_on_xth_day_of_week]' type='hidden'>
     <input id='scheduled_to_be_delivered_every_x_day_of_week' name='order[subs_order_attributes][scheduled_to_be_delivered_every_x_day_of_week]' type='hidden'>
     <input id='scheduled_2nd_delivery_date' name='order[subs_order_attributes][scheduled_to_be_delivered_at]' type='hidden'>
     <input id='scheduled_2nd_delivery_time' name='order[subs_order_attributes][scheduled_delivery_time]' type='hidden'>
     <input id='scheduled_to_be_delivered_at' type='hidden'>
     <input id='scheduled_1st_delivery_date' name='order[scheduled_to_be_delivered_at]' type='hidden'>
     <input id='scheduled_1st_delivery_time' name='order[scheduled_delivery_time]' type='hidden'>
+  {% endif %}
 
   <!-- お届けサイクル -->

shared_partial > nav (shared_partial)

ec_force/shop/shared/_nav.html.liquid
ec_force/shop/shared/_nav.html+smartphone.liquid

+ {% unless order.cv_confirm? %}
   <!-- カート画面へのリンク -->
-  {% if order.completed? %}
+  {% if order.completed? or order.converted? %}
     <a href="/shop/cart">カートを見る 0 点</a>
   {% else %}
     <a href="/shop/cart">カートを見る {% if current_order %}{{ current_order.quantity }}{% else %}{{ order.quantity }}{% endif %} 点</a>
   {% endif %}
 
   {% if customer_signed_in %}
     <!-- マイページへのリンク -->
     <a href="/shop/customer">マイページ</a>
 
     <!-- ログアウト -->
     <a href="/shop/customers/sign_out">ログアウト</a>
   {% else %}
     <!-- ログイン -->
     <a href="/shop/customers/sign_in">ログイン</a>
   {% endif %}
+ {% endunless %}

また、以下の新規ファイルの作成が必要です。

cart > サンクスオファー画面
- ec_force/shop/orders/cv_upsell.html.liquid
- ec_force/shop/orders/cv_upsell.html+smartphone.liquid
cart > サンクスオファー確認画面
- ec_force/shop/orders/cv_confirm.html+smartphone.liquid
- ec_force/shop/orders/cv_confirm.html.liquid
cart > サンクスクロスセル(部分テンプレート)
- ec_force/shop/orders/_form_cv_xsell.html.liquid
- ec_force/shop/orders/_form_cv_xsell.html+smartphone.liquid
cart > 注文完了情報 (部分テンプレート)
- ec_force/shop/orders/_form_perform.html.liquid
- ec_force/shop/orders/_form_perform.html+smartphone.liquid

カスタム項目アップデート対応

購入フォームからカスタム項目（オプション機能） (opens in a new tab)の回答の入力を可能とします。

購入フォームにてカスタム項目の回答入力を実現するためには以下のテーマファイルの更新・新規追加が必要です。

cart > 注文情報入力画面

ec_force/shop/orders/new.html.liquid

 {% include 'ec_force/shop/orders/view_shipping_carrier.html' %}
 {% include 'ec_force/shop/orders/view_payment_schedule.html' %}
 {% include 'ec_force/shop/orders/view_remark.html' %}
+ {% include 'ec_force/shop/orders/view_free_columns.html' %}
 {% if base_info.skip_order_confirm_for_shop? %}
  {% include 'ec_force/shop/orders/view_payment_preview.html' %}
 {% endif %}

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

 {% include 'ec_force/shop/orders/view_shipping_carrier.html+smartphone' %}
 {% include 'ec_force/shop/orders/view_payment_schedule.html+smartphone' %}
 {% include 'ec_force/shop/orders/view_remark.html+smartphone' %}
+ {% include 'ec_force/shop/orders/view_free_columns.html+smartphone' %}
 {% if base_info.skip_order_confirm_for_shop? %}
  {% include 'ec_force/shop/orders/view_payment_preview.html+smartphone' %}
 {% endif %}

cart > 注文情報確認画面

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

     {{ order.remark }}
   {% endif %}
 
+  <!-- カスタム項目 -->
+  {% if base_info.use_free_columns? and shop_form_settings['free_column'] and liquid_custom_field %}
+    {% assign setting = shop_form_settings['free_column_title'] %}
+    <!-- カスタム項目タイトル名 -->
+    {{ setting }}
+    {% for custom_field_info_hash in liquid_custom_field %}
+      {% for seq_hash in custom_field_info_hash[1] %}
+        {% assign info = seq_hash[1] %}
+        <!-- カテゴリ名 -->
+        {% if info['category'] %}
+          {{ info['category'] }}
+        {% endif %}
+        {% for i_hash in info['info'] %}
+          {% assign i = i_hash[1] %}
+          <div>
+            <!-- 項目名 -->
+            {{ i['label'] }}
+            <!-- 入力、選択値 -->
+            {% for v in i['value'] %}
+              {{ v }}
+            {% endfor %}
+          </div>
+        {% endfor %}
+      {% endfor %}
+    {% endfor %}
+  {% endif %}
+
   <!-- 注文リンク -->

cart > カスタム項目 (部分テンプレート)

※新規追加ファイルです。

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

購入フォームでのクレジットカード読み取り対応

クレジットカードの読み取り機能 (opens in a new tab)はスマートフォンのみ対応しています。（一部ブラウザでは利用できません）

cart > 支払い方法 (部分テンプレート)

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

<!-- クレジットカード番号の入力 -->
<div id="view-input-card-number" style="{% if current_customer_has_card %}display:none;{% endif %}">
  <label>クレジットカード番号</label>
  {% 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="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">
    <input type="hidden" name="order[payment_attributes][source_attributes][cc_type]" id="input-cc-type" disabled>
-   <input type="tel" name="order[payment_attributes][source_attributes][number]" id="input-cc-number" {% if current_customer_has_card %}disabled{% endif %} class="validate[required, maxSize[16]]">
+   <input type="tel" name="order[payment_attributes][source_attributes][number]" id="input-cc-number" {% if current_customer_has_card %}disabled{% endif %} class="validate[required, maxSize[16]]" autocomplete="cc-number">
  {% endif %}
  <input type="hidden" name="order[payment_attributes][source_attributes][gateway_card_seq]" id="input-cc-gateway-card-seq" disabled>
  <span>※ 数字のみで続けて入力してください。</span>
</div>
 
<!-- クレジットカード有効期限の入力 -->
<div id="view-input-card-expire" style={% if current_customer_has_card %}"display:none;"{% endif %}>
  <label>カードの有効期限</label>
  {% 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="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>
  {% else %}
-   <select name="order[payment_attributes][source_attributes][month]" id="input-cc-month" class="validate[required]" {% if current_customer_has_card %}disabled{% endif %}>
+   <select name="order[payment_attributes][source_attributes][month]" id="input-cc-month" class="validate[required]" {% if current_customer_has_card %}disabled{% endif %} autocomplete="cc-exp-month">
      {% for m in (1..12) %}
-       <option value='{{ m }}'{% if order.payment.source_type == 'EcForce::CreditCard' && order.payment.source.month == m %} selected {% endif %}>{{ m }}月</option>
+       <option value='{{ m }}'{% if order.payment.source_type == 'EcForce::CreditCard' && order.payment.source.month == m %} selected {% endif %}>{{ m }}</option>
      {% endfor %}
    </select>
    <span>月</span>
-    <select name="order[payment_attributes][source_attributes][year]" id="input-cc-year" class="validate[required]" {% if current_customer_has_card %}disabled{% endif %}>
+    <select name="order[payment_attributes][source_attributes][year]" id="input-cc-year" class="validate[required]" {% if current_customer_has_card %}disabled{% endif %} autocomplete="cc-exp-year">
      {% 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 }}'{% if order.payment.source_type == 'EcForce::CreditCard' && order.payment.source.year == y %} selected {% endif %}>{{ y }}年</option>
+       <option value='{{ y }}'{% if order.payment.source_type == 'EcForce::CreditCard' && order.payment.source.year == y %} selected {% endif %}>{{ y }}</option>
      {% endfor %}
     </select>
    <span>年</span>
  {% endif %}
</div>
 
<!-- クレジットカード名義人の入力 -->
<div id="view-input-card-name" style={% if current_customer_has_card %}"display:none;"{% endif %}>
  <label>カードの名義人</label>
  {% if order.payment.source_type == 'EcForce::CreditCard' %}
    {% assign card_name = order.payment.source.name %}
  {% else %}
    {% assign card_name = '' %}
  {% 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='{{ card_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='{{ card_name }}' {% if current_customer_has_card %}disabled{% endif %}>
+   <input type="text" name="order[payment_attributes][source_attributes][name]" id="input-cc-name" class="validate[required,custom[onlyLetterSp]]" value='{{ card_name }}' {% if current_customer_has_card %}disabled{% endif %} autocomplete="cc-name">
  {% endif %}
</div>
 
<!-- セキュリティコードの入力 -->

マイページで選択できる「配送サイクル」の拡充

従来、商品が持つデフォルト配送サイクルで購入した場合、マイページにて配送サイクルが変更できませんでしたが、共通フォーム設定で許可されている配送サイクルへの変更が可能になります。

mypage > 定期注文詳細画面基本情報の編集

ec_force/shop/customer/subs_orders/edit.html.liquid
ec_force/shop/customer/subs_orders/edit.html+smartphone.liquid

<!-- 配送サイクルの指定 -->
<label for="subs_order_payment_schedule">配送サイクル</label>
<select name="subs_order[payment_schedule]" id="subs_order_payment_schedule">
- {% assign payment_schedules = subs_order.available_payment_schedules_on_mypage %}
- {% if payment_schedules contains 'date' %}
+ {% if available_payment_schedules contains 'date' %}
   <option value="date" {% if subs_order.payment_schedule == "date" %}selected{% endif %}>日付で指定</option>
  {% endif %}
- {% if payment_schedules contains 'term' %}
+ {% if available_payment_schedules contains 'term' %}
   <option value="term" {% if subs_order.payment_schedule == "term" %}selected{% endif %}>間隔で指定</option>
  {% endif %}
- {% if payment_schedules contains 'day_of_week' %}
+ {% if available_payment_schedules contains 'day_of_week' %}
   <option value="day_of_week" {% if subs_order.payment_schedule == "day_of_week" %}selected{% endif %}>曜日で指定</option>
  {% endif %}
</select>

軽微な修正

mypage > ポイント履歴一覧画面

ec_force/shop/customer/points/index.html.liquid
ec_force/shop/customer/points/index.html+smartphone.liquid

{{ point.point_event.name }}
 
<!-- 購入番号 -->
- {% if point.point_event.invite_coupon? or point.order == null %}
+ {% if point.order.deleted_at != null or point.order.customer.id != current_customer.id or point.point_event.invite_coupon? or point.order == null %}
   -
{% else %}
 <a href="/shop/customer/orders/{{ point.order.number }}">{{ point.order.number }}</a>

mypage > 定期注文詳細画面商品情報

ec_force/shop/customer/subs_orders/order_items/index.html.liquid
ec_force/shop/customer/subs_orders/order_items/index.html+smartphone.liquid

<!-- 編集リンク -->
- {% if base_info.variant_changeable_on_mypage? %}
+ {% if base_info.variant_changeable_on_mypage? or base_info.variant_quantity_changeable_on_mypage? %}
   {% if order_item.distribution_club? and order_item.distribution_club.changeable_on_mypage %}
     <a href="/shop/customer/subs_orders/{{ subs_order.number }}/distribution_clubs/{{ order_item.distribution_club.id }}/edit">頒布会商品を編集する</a>
   {% elsif order_item.set? %}

mypage > 定期注文詳細画面商品の編集

マイページの「定期注文詳細画面商品の編集」画面での購入個数変更について、マイページ設定 (opens in a new tab)の「定期商品個数の変更」設定を引き継ぐように修正いたしました。

ec_force/shop/customer/subs_orders/order_items/edit.html.liquid
ec_force/shop/customer/subs_orders/order_items/edit.html+smartphone.liquid

<div id="option_types"></div>
 
<!-- 個数 -->
+ {% if base_info.variant_quantity_changeable_on_mypage? %}
  <label for="order_item_quantity">個数</label>
  <select name="order_item[quantity]" id="order_item_quantity">
    {% for i in (1..10) %}
      <option value="{{ i }}">{{ i }}</option>
    {% endfor %}
  </select>
+ {% endif %}
<!-- 送信リンク -->

cart > 注文情報入力画面

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

<!-- AmazonPay -->
<div id="AmazonPayWidgetJs"></div>
{% if amazon_pay_available or amazon_pay_v2_available %}
+ {% if check_amazon_pay %}
   <div id="AmazonPayOneClickOrderArea" style="display: none;">
     <div class="amazon_pay_box">
       <div class="amazon_pay_title">ワンクリックで簡単お申込みする！</div>
       <div class="amazon_pay_button_wrapper">
         <div class="amazon_pay_button_area">
           <div class="amazon_pay_payments_area">
             <div class="amazon_pay_subtitle">Amazonアカウントをお持ちの方</div>
             <div class="amazon_pay_button_all" id="AmazonPayButtonAll"></div>
+          </div>
         </div>
       </div>
+      <div class="amazon_pay_message">アカウントに登録しているお支払い情報、お届け先情報をご使用してワンクリックでお申込みが可能です。</div>
     </div>
-    <div class="amazon_pay_message">アカウントに登録しているお支払い情報、お届け先情報をご使用してワンクリックでお申込みが可能です。</div>
     <div class="amazon_pay_not_use_message">上記アカウントをお持ちでない方は、下記よりお客様情報をご入力下さい。</div>
   </div>
+ {% endif %}
{% endif %}

2022/12/21更新

サンクスオファー（サンクスクロスセル）機能対応

cart > お届けサイクル（部分テンプレート）

shared_partial > nav (shared_partial)

カスタム項目 アップデート対応

cart > 注文情報入力画面

cart > 注文情報確認画面

cart > カスタム項目 (部分テンプレート)

購入フォームでのクレジットカード読み取り対応

cart > 支払い方法 (部分テンプレート)

マイページで選択できる「配送サイクル」の拡充

mypage > 定期注文詳細画面 基本情報の編集

軽微な修正

mypage > ポイント履歴一覧画面

mypage > 定期注文詳細画面 商品情報

mypage > 定期注文詳細画面 商品の編集

cart > 注文情報入力画面

カスタム項目アップデート対応

mypage > 定期注文詳細画面基本情報の編集

mypage > 定期注文詳細画面商品情報

mypage > 定期注文詳細画面商品の編集