テーマ仕様書 更新履歴
2022年
2022/08/09更新

2022/08/09更新

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

ショップの確認画面スキップ

今回のリリースによりLPだけではなく、テーマ側(ショップページ側)でも確認画面スキップの利用が可能になりました。 機能の詳細・設定の詳細については ecforce FAQ:ショップ確認画面スキップ (opens in a new tab) をご確認ください。
※決済の仕様により、確認画面スキップと併用できない支払い方法がございます。

本リリース前に提供されたテーマには確認画面スキップ対応の記述が入っていないため、本機能利用前は必要な記述の更新を実施してください。

cart > 注文情報確認プレビュー(部分テンプレート)

テーマ管理のファイルパス(新規ファイル)
ec_force/shop/orders/_view_payment_preview.html.liquid
ec_force/shop/orders/_view_payment_preview.html+smartphone.liquid

cart > 注文情報入力画面

テーマ管理のファイルパス
ec_force/shop/orders/new.html.liquid
ec_force/shop/orders/new.html+smartphone.liquid

   <!-- 入力フォーム -->
-  <form action="/shop/order" method="post">
+  {% if base_info.skip_order_confirm_for_shop? %}
+    {% assign submit_label = 'ご注文完了へ' %}
+  {% else %}
+    {% assign submit_label = '確認画面へすすむ' %}
+  {% endif %}
+
+  <form action="/shop/order" method="post" accept-charset="UTF-8" id="orders-form">
     <input name="_method" type="hidden" value="put">
     <input name="order[state]" type="hidden" value="new">
+    {% if base_info.skip_order_confirm_for_shop? %}
+      <input name="order[skip_order_confirm]" type="hidden" value="true">
+    {% endif %}
 
     <!-- エラーメッセージ -->
     {% if order.error_messages != empty %}
      <div class="alert alert-danger">
        {% for error_message in order.error_messages %}
          {{ error_message }}
        {% endfor %}
      </div>
     {% endif %}
 
+    <div class="alert alert-danger" id="preview-error" style="display:none;">
+      <span id="preview-error-message"></span>
+    </div>
+
     <!-- 各入力フォーム部分テンプレート(PC用) -->
     {% include 'ec_force/shop/orders/view_billing_information.html' %}
     {% include 'ec_force/shop/orders/view_shipping_information.html' %}
     {% include 'ec_force/shop/orders/view_wrapping_information.html' %}
     {% include 'ec_force/shop/orders/view_point_redeem.html' %}
     {% include 'ec_force/shop/orders/view_invite_code.html' %}
     {% include 'ec_force/shop/orders/view_coupon.html' %}
     {% include 'ec_force/shop/orders/view_payment_information.html' %}
     {% 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' %}
+    {% if base_info.skip_order_confirm_for_shop? %}
+      {% include 'ec_force/shop/orders/view_payment_preview.html' %}
+    {% endif %}
     {% include 'ec_force/shop/orders/view_optin.html' %}
     {% include 'ec_force/shop/orders/view_checklists.html' %}
     {% include 'ec_force/shop/orders/view_term.html' %}
 
     <!-- 各入力フォーム部分テンプレート(スマートフォン用) -->
     {% include 'ec_force/shop/orders/view_billing_information.html+smartphone' %}
     {% include 'ec_force/shop/orders/view_shipping_information.html+smartphone' %}
     {% include 'ec_force/shop/orders/view_wrapping_information.html+smartphone' %}
     {% include 'ec_force/shop/orders/view_point_redeem.html+smartphone' %}
     {% include 'ec_force/shop/orders/view_invite_code.html+smartphone' %}
     {% include 'ec_force/shop/orders/view_coupon.html+smartphone' %}
     {% include 'ec_force/shop/orders/view_payment_information.html+smartphone' %}
     {% 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' %}
+    {% if base_info.skip_order_confirm_for_shop? %}
+      {% include 'ec_force/shop/orders/view_payment_preview.html+smartphone' %}
+    {% endif %}
     {% include 'ec_force/shop/orders/view_optin.html+smartphone' %}
     {% include 'ec_force/shop/orders/view_checklists.html+smartphone' %}
     {% include 'ec_force/shop/orders/view_term.html+smartphone' %}
     
     <!-- カート画面リンク(任意) -->
     <a href="/shop/cart">カートへ戻る</a>
     <!-- セット商品の再選択リンク -->
     {% if set %}
       <a href="/shop/sets/{{ set.id }}">商品を再選択</a>
     {% endif %}
 
     <!-- 確認画面リンク -->
-    <input id="submit" type="submit" value="確認画面へすすむ">
+    <input id="submit" type="submit" value="{{ submit_label }}">
   </form>
 
 </div>

顧客限定クーポン機能利用時に、マイページ内にクーポンをお知らせする記述(任意)

mypage > マイページ画面

テーマ管理のファイルパス
ec_force/shop/customer/base/show.html.liquid
ec_force/shop/customer/base/show.html+smartphone.liquid

  <!-- 所持ポイント(任意) -->
  {{ current_customer.point }}
  {% if line_settings['display_btn'] == '1' and current_customer.line_id? == false %}
    <!-- LINE ID 説明ポップアップ -->
    {{ line_settings['information_context'] }}
    <!-- LINE ID 連携ボタン(クラス) -->
    <a class="line-token-set-btn" href="#">LINE ID 連携</a>
  {% endif %}
  <!-- アンケート回答結果(任意) -->
  {% if false %}
    {% unless current_customer.one_d_color_answers == blank %}
      {% include 'ec_force/shop/customer/base/one_d_color_answer_results.html' %}
    {% endunless %}
  {% endif %}
+
+  <!-- 顧客限定クーポン一覧(任意) -->
+  {% for granted_coupon in current_customer.granted_coupons %}
+      <!-- 顧客限定クーポン名(任意) -->
+      {{ granted_coupon.name }}
+      <!-- 顧客限定クーポンコード(任意) -->
+      {{ granted_coupon.code }}
+      <!-- 顧客限定クーポン利用可能回数(任意) -->
+      {{ granted_coupon.limit_count }}
+      <!-- 顧客限定クーポン有効期限(任意) -->
+      {{ granted_coupon.e_date | date: '%Y/%m/%d %H:%M:%S' }}
+      <!-- 顧客限定クーポン使用済み回数(任意) -->
+      {{ granted_coupon.id  | liquid_coupon_used_count: current_customer.id }}
+  {% endfor %}
 </div>

ロジック改善 (更新推奨)

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

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

     <div id="paypal-button-container"></div>
   </div>
   <div id="view_app_payment" style="display:none;">
-    {% if order.payment.source.transaction_id %}
+    {% if has_transaction_id %}
       <input id="input_app_source_id" type="hidden" name="order[payment_attributes][source_id]" value='{{ order.payment.source_id }}'/>
     {% endif %}
   </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 %}>
           {% for m in (1..12) %}
-            <option value='{{ m }}'{% if 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 %}>
           {% 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.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='{{ 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">
+        <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='{{ order.payment.source.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 %}>
       {% endif %}
     </div>