テーマ仕様書 更新履歴
2023年
2023/03/14更新

2023/03/14更新

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

購入導線の改善

これまで、新規顧客の購入導線の標準は以下でした。

  • 会員登録して購入:カート画面→会員登録画面→注文情報入力画面
  • ゲストとして購入:カート画面→注文情報入力画面

今後は会員登録する場合も、ゲストとして購入する場合のいずれも「カート画面→注文情報入力画面」の導線を標準とします。

cart > カート画面

ec_force/shop/carts/show.html.liquid
ec_force/shop/carts/show.html+smartphone.liquid

- <!-- 会員登録リンク -->
- <a href="/shop/customers/sign_in?customer_return_to=%2Fshop%2Forder%2Fnew">会員登録して購入手続きへ進む</a>
+ <!-- 会員登録と同時の購入リンク -->
+ <a href="/shop/order/new?register_as_member=1">会員登録して購入手続きへ進む</a>

cart > 注文情報入力画面

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

 {% if base_info.skip_order_confirm_for_shop? %}
    {% include 'ec_force/shop/orders/view_payment_preview.html' %}
 {% endif %}
+  {% include 'ec_force/shop/orders/view_link_number.html' %}
 {% include 'ec_force/shop/orders/view_optin.html' %}
 {% include 'ec_force/shop/orders/view_checklists.html' %}
 {% include 'ec_force/shop/orders/view_term.html' %}
     <a href="/shop/cart">カートへ戻る</a>
     <!-- セット商品の再選択リンク -->
     {% if set %}
-      <a href="/shop/sets/{{ set.id }}">商品を再選択</a>
+      {% if guest_flag and customer_signed_in != true %}
+        {% assign url = "/shop/sets/" | append: set.id | append: "?register_as_member=1" %}
+      {% else %}
+        {% assign url = "/shop/sets/" | append: set.id %}
+      {% endif %}
+      <a class="btn btn-sm btn-warning" href="{{ url }}">商品を再選択</a>
     {% endif %}
 
     <!-- 確認画面リンク -->

cart > 注文情報確認画面

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

   <!-- 注文リンク -->
   <form action='/shop/order/confirm' method='post' accept-charset="UTF-8">
     <input name="_method" type="hidden" value="put">
-    <a href='/shop/order'>入力内容を修正する</a>
+    {% if guest_flag and customer_signed_in != true %}
+      <a class='btn btn-sm btn-default' href="/shop/order?register_as_member=1">入力内容を修正する</a>
+    {% else %}
+      <a class='btn btn-sm btn-default' href="/shop/order">入力内容を修正する</a>
+    {% endif %}
     <button type='submit'>ご注文完了へ</button>
   </form>

cart > 請求先住所(部分テンプレート)

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

 <!-- 部分テンプレート(お客様情報の入力) -->
 <div id='view-billing-information'>
+  <!-- 注記 -->
+  {% if guest_flag and customer_signed_in != true %}
+    ※招待コード等の「登録済み会員」向けの機能をご利用の方は<a href="/shop/customers/sign_in?customer_return_to=%2Fshop%2Forder%2Fnew">コチラ</a>より会員登録ください。
+  {% endif %}
 
   <!-- お名前 -->
+  <!-- 同時に会員登録と購入を行う際のパスワード -->
+  {% if guest_flag and customer_signed_in != true %}
+    <label>パスワード</label>
+    <input class="validate[required,minSize[8]]" placeholder="半角英数字8文字以上" type="password" name="order[customer_attributes][password]" value="">
+  {% endif %}
</div>

cart > お客様番号(部分テンプレート)

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

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

set > セット選択画面

ec_force/shop/sets/show.html.liquid
ec_force/shop/sets/show.html+smartphone.liquid

       <input name="utf8" type="hidden" value="&#x2713;" />
       <input type="hidden" name="_method" value="patch" />
       <input id="selected-filter" type="hidden" name="selected_filter" value="" />
+      {% if params['register_as_member'] == '1' %}
+        <input type="hidden" name="redirect_to" value="/shop/order/new?register_as_member=1" />
+      {% endif %}

商品一覧ページの並び替え条件の追加

発売日順・レビュー評価順で並べ替えることが可能になりました。

ec_force/shop/products/index.html.liquid
ec_force/shop/products/index.html+smartphone.liquid
ec_force/shop/product_categories/show.html.liquid
ec_force/shop/product_categories/show.html+smartphone.liquid
ec_force/shop/searches/show.html.liquid
ec_force/shop/searches/show.html+smartphone.liquid

<!-- ソート機能(任意) -->
<select id="select_sort">
   {{ 'position asc' | ransack_sort_link: 'おすすめ順' }}
   {{ 'master_sales_price desc' | ransack_sort_link: '価格の高い順' }}
   {{ 'master_sales_price asc' | ransack_sort_link: '価格の安い順' }}
+  {{ 'released_at desc' | ransack_sort_link: '発売日降順' }}
+  {{ 'released_at asc' | ransack_sort_link: '発売日昇順' }}
+  {{ 'product_reviews_average_score desc' | ransack_sort_link: 'レビュー評価順' }}
</select>

受注・定期受注カスタム項目をマイページから閲覧可能にする

mypage > 購入履歴詳細画面 基本情報

ec_force/shop/customer/orders/show.html.liquid
ec_force/shop/customer/orders/show.html+smartphone.liquid

  <!-- お届け先情報(FAX番号)(任意) -->
   {{ order.shipping_address.full_fax }}
 
+  <!-- カスタム項目 -->
+  {% if base_info.use_free_columns? and base_info.use_order_free_columns_mypage? and liquid_custom_field != empty %}
+    <!-- カスタム項目タイトル名 -->
+    {{ base_info.order_free_columns_title }}
+    {% for custom_field_info in liquid_custom_field %}
+      {% for custom_info in custom_field_info[1] %}
+        {% assign info = custom_info[1] %}
+        <!-- カテゴリ名 -->
+        {% if info['category'] %}
+          {{ info['category'] | escape }}
+        {% endif %}
+        {% for i_hash in info['info'] %}
+          {% assign i = i_hash[1] %}
+          <!-- 項目名 -->
+          {{ i['free_columns_label'] | escape }}
+          <!-- 入力、選択値 -->
+          <!-- テキストエリアの改行を反映させたい場合はstyleに「white-space: pre-wrap;」を当てて下さい -->
+          {{ i['free_column_values_value'] | join: ', ' | escape }}
+        {% endfor %}
+      {% endfor %}
+    {% endfor %}
+  {% endif %}
+
     <!-- 戻るリンク -->
     <a href="/shop/customer/orders">戻る</a>

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

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

<!-- 作成日(任意) -->
 {{ subs_order.created_at | date: "%Y/%m/%d %H:%M:%S" }}
 
+<!-- カスタム項目 -->
+{% if base_info.use_free_columns? and base_info.use_subs_order_free_columns_mypage? and liquid_custom_field != empty %}
+  <!-- カスタム項目タイトル名 -->
+  {{ base_info.subs_order_free_columns_title }}
+  {% for custom_field_info in liquid_custom_field %}
+    {% for custom_info in custom_field_info[1] %}
+      {% assign info = custom_info[1] %}
+      <!-- カテゴリ名 -->
+      {% if info['category'] %}
+        {{ info['category'] | escape }}
+      {% endif %}
+      {% for i_hash in info['info'] %}
+        {% assign i = i_hash[1] %}
+        <!-- 項目名 -->
+        {{ i['free_columns_label'] | escape }}
+        <!-- 入力、選択値 -->
+        <!-- テキストエリアの改行を反映させたい場合はstyleに「white-space: pre-wrap;」を当てて下さい -->
+        {{ i['free_column_values_value'] | join: ', ' | escape }}
+      {% endfor %}
+    {% endfor %}
+  {% endfor %}
+{% endif %}
+
 <!-- 編集・再開 -->

マイページでの頒布会商品変更時に商品除外フィルタを利用

定期注文詳細画面 頒布会商品の編集

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

参考: 2023/02/15 更新分との差分

           <!-- 変更可能頒布会選択商品名(規格) -->
-          <select class="select-variants" name="select_items[item][][selected_variant_id]">
+          <select class="select-variants distribution-select-variant-{{variant.product_id}}" name="select_items[item][][selected_variant_id]">
         <!-- 価格(税抜) -->
-        {% if distribution_club.fixed_price? %}
-          0円
+        {% if changeable_variants.size == 0 %}
+          {% if distribution_club.fixed_price? %}
+            0円
+          {% else %}
+            {% assign options = "" %}
+            {% assign options = options | append: variant.product_id | append: "," | append: subs_order.times %}
+            {% assign options_array = options | split: "," %}
+            {{ options_array | liquid_recurring_time_price | number_to_currency: format: '%n %u' }}
+          {% endif %}
         {% else %}
-          {% assign options = "" %}
-          {% assign options = options | append: variant.product_id | append: "," | append: subs_order.times %}
-          {% assign options_array = options | split: "," %}
-          {{ options_array | liquid_recurring_time_price | number_to_currency: format: '%n %u' }}
+          <span class="distribution-product-price">
+            {% if distribution_club.fixed_price? %}
+              0円
+            {% else %}
+              {% assign options = "" %}
+              {% assign options = options | append: variant.product_id | append: "," | append: subs_order.times %}
+              {% assign options_array = options | split: "," %}
+              {{ options_array | liquid_recurring_time_price | number_to_currency: format: '%n %u' }}
+            {% endif %}
+          </span>
         {% endif %}
       {% endfor %}
     {% else %}
             <!-- 変更可能頒布会選択商品名(規格) -->
-            <select class="select-variants" name="select_items[{{order_item.id}}][][selected_variant_id]">
+            <select class="select-variants distribution-select-variant-#{order_item.product_id}" name="select_items[{{order_item.id}}][][selected_variant_id]">
           <!-- 価格(税抜) -->
-          {% if distribution_club.fixed_price? %}
-            0円
+          {% if changeable_variants.size == 0 %}
+            {% if distribution_club.fixed_price? %}
+              0円
+            {% else %}
+              {{ order_item.price | number_to_currency: format: '%n %u' }}
+            {% endif %}
           {% else %}
-            {{ order_item.price | number_to_currency: format: '%n %u' }}
+            <span class="distribution-product-price">
+              {% if distribution_club.fixed_price? %}
+                0円
+              {% else %}
+                {{ order_item.price | number_to_currency: format: '%n %u' }}
+              {% endif %}
+            </span>
           {% endif %}
         {% endfor %}
       {% endfor %}

参考: 2022/09/20との差分

+  {% if base_info.use_distribution_club and base_info.use_product_filter_on_mypage %}
+    <div>
+      <button class='btn btn-default btn-filter'>除外フィルター</button>
+    </div>
+      
+  {% endif %}
+
   <!-- 頒布会選択商品変更フォーム -->
   <form action="/shop/customer/subs_orders/{{ subs_order.number }}/distribution_clubs/{{ distribution_club.id }}" accept-charset="UTF-8" method="post">
     <input type="hidden" name="_method" value="put">
     <input type="hidden" name="changeable_distribution_club_id" value="{{ changeable_distribution_club_id }}">
+    <input type="hidden" name="selected_filter" id="selected-filter" value="">
 
+    {% assign product_ids = "" %}
     {% if distribution_changed %}
       <!-- 商品切替変更 -->
           <!-- 変更可能頒布会選択商品名(規格) -->
-          <select name="select_items[item][][selected_variant_id]">
+          <select class="select-variants distribution-select-variant-{{variant.product_id}}" name="select_items[item][][selected_variant_id]">
             {% for variant in changeable_variants %}
               {% if variant.option_values_presentation == blank %}
                 {% capture product_options %}
                  {{ variant.product.name }}
                {% endcapture %}
              {% else %}
                {% capture product_options %}
                   {{ variant.product.name }}({{ variant.option_values_presentation }})
                 {% endcapture %}
               {% endif %}
-              <option value="{{ variant.id }}" {% if order_item.variant.id == variant.id %}selected{% endif %}>{{ product_options }}</option>
+              <option filtered-product-id="{{ variant.product_id }}" value="{{ variant.id }}" {% if order_item.variant.id == variant.id %}selected{% endif %}>{{ product_options }}</option>
+              {% assign product_ids = product_ids | append: variant.product_id | append: "," %}
             {% endfor %}
           </select>
         <!-- 価格(税抜) -->
-        {% if distribution_club.fixed_price? %}
-          0円
+        {% if changeable_variants.size == 0 %}
+          {% if distribution_club.fixed_price? %}
+            0円
+          {% else %}
+            {% assign options = "" %}
+            {% assign options = options | append: variant.product_id | append: "," | append: subs_order.times %}
+            {% assign options_array = options | split: "," %}
+            {{ options_array | liquid_recurring_time_price | number_to_currency: format: '%n %u' }}
+          {% endif %}
         {% else %}
-          {% assign options = "" %}
-          {% assign options = options | append: variant.product_id | append: "," | append: subs_order.times %}
-          {% assign options_array = options | split: "," %}
-          {{ options_array | liquid_recurring_time_price | number_to_currency: format: '%n %u' }}
+          <span class="distribution-product-price">
+            {% if distribution_club.fixed_price? %}
+              0円
+            {% else %}
+              {% assign options = "" %}
+              {% assign options = options | append: variant.product_id | append: "," | append: subs_order.times %}
+              {% assign options_array = options | split: "," %}
+              {{ options_array | liquid_recurring_time_price | number_to_currency: format: '%n %u' }}
+            {% endif %}
+          </span>
         {% endif %}
       {% endfor %}
     {% else %}
      {% for order_item in distribution_order_items %}
        {% for i in (1..order_item.distribution_item_quantity) %}
          <!-- 商品名 -->
          {% assign changeable_variants = changeable_variants_hash[order_item.id] %}
          {% if changeable_variants.size == 0 %}
            <!-- 頒布会選択商品名 -->
             {{ order_item.variant.name }}
           {% else %}
             <!-- 変更可能頒布会選択商品名(規格) -->
-            <select name="select_items[{{order_item.id}}][][selected_variant_id]">
+            <select class="select-variants distribution-select-variant-#{order_item.product_id}" name="select_items[{{order_item.id}}][][selected_variant_id]">
               {% for variant in changeable_variants %}
                 {% if variant.option_values_presentation == blank %}
                   {% capture product_options %}
                    {{ variant.product.name }}
                  {% endcapture %}
                {% else %}
                  {% capture product_options %}
                     {{ variant.product.name }}({{ variant.option_values_presentation }})
                   {% endcapture %}
                 {% endif %}
-                <option value="{{ variant.id }}" {% if order_item.variant.id == variant.id %}selected{% endif %}>{{ product_options }}</option>
+                <option filtered-product-id="{{ variant.product_id }}" value="{{ variant.id }}" {% if order_item.variant.id == variant.id %}selected{% endif %}>{{ product_options }}</option>
+                {% assign product_ids = product_ids | append: variant.product_id | append: "," %}
               {% endfor %}
             </select>
             <input name="select_items[{{order_item.id}}][][origin_variant_id]" type="hidden" value="{{ order_item.variant_id }}">
          {% endif %}
          <!-- 個数 -->
          1個
 
           <!-- 価格(税抜) -->
-          {% if distribution_club.fixed_price? %}
-            0円
+          {% if changeable_variants.size == 0 %}
+            {% if distribution_club.fixed_price? %}
+              0円
+            {% else %}
+              {{ order_item.price | number_to_currency: format: '%n %u' }}
+            {% endif %}
           {% else %}
-            {{ order_item.price | number_to_currency: format: '%n %u' }}
+            <span class="distribution-product-price">
+              {% if distribution_club.fixed_price? %}
+                0円
+              {% else %}
+                {{ order_item.price | number_to_currency: format: '%n %u' }}
+              {% endif %}
+            </span>
           {% endif %}
         {% endfor %}
       {% endfor %}
     {% endif %}
+    <input type="hidden" name="product_ids" id="product_ids" value="{{ product_ids }}" />
 
     <!-- 送信ボタン -->
-    <input id='submit' type="submit" value="保存">
+    <input class='submit' id='submit' type="submit" value="保存">
 
     <!-- 戻るボタン -->
     <a href="/shop/customer/subs_orders/{{ subs_order.number }}/order_items">戻る</a>

セキュリティ向上のための修正(対応推奨)

cart > 確認画面

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

         <!-- カテゴリ名 -->
         {% if info['category'] %}
-          {{ info['category'] }}
+          {{ info['category'] | escape }}
         {% endif %}
         {% for i_hash in info['info'] %}
           {% assign i = i_hash[1] %}
           <div>
             <!-- 項目名 -->
-            {{ i['label'] }}
+            {{ i['label'] | escape }}
             <!-- 入力、選択値 -->
             {% for v in i['value'] %}
-              {{ v }}
+              {{ v | escape }}
             {% endfor %}
           </div>
         {% endfor %}

cart > サンクスオファー確認画面

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

         <!-- カテゴリ名 -->
         {% if info['category'] %}
-          {{ info['category'] }}
+          {{ info['category'] | escape }}
         {% endif %}
         {% for i_hash in info['info'] %}
           {% assign i = i_hash[1] %}
           <div>
             <!-- 項目名 -->
-            {{ i['label'] }}
+            {{ i['label'] | escape }}
             <!-- 入力、選択値 -->
             {% for v in i['value'] %}
-              {{ v }}
+              {{ v | escape }}
             {% endfor %}
           </div>
         {% endfor %}

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

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

  <!-- カテゴリ名 -->
- {{ info['category'] }}
+ {{ info['category'] | escape }}
  <!-- 入力項目名 -->
- {{ i['label'] }}
+ {{ i['label'] | escape }}

※同じ記述が2箇所あり、どちらも変更が必要です。

- {% if i['is_valid_format'] == true %}{% assign value = v %}{% else %}{% assign value = '' %}{% endif %}
+ {% if i['is_valid_format'] == true %}{% assign value = v | escape %}{% else %}{% assign value = '' %}{% endif %}

※同じ記述が2箇所あり、どちらも変更が必要です。

- <label for="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}_{{ option['key'] }}">{{ option['value'] }}</label>
+ <label for="order_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}_{{ option['key'] }}">{{ option['value'] | escape }}</label>
- <option data-default="{{ default }}" value="{{ option['key'] }}"  {{ selected }}>{{ option['value'] }}</option>
+ <option data-default="{{ default }}" value="{{ option['key'] }}"  {{ selected }}>{{ option['value'] | escape }}</option>

cart > 通信欄(部分テンプレート)

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

   {% if shop_form_settings['remark'] %}
     <!-- 通信欄の入力 -->
     <p>通信欄(残り<span class='charsLeft'></span>文字)</p>
-    <textarea class='limited' name='order[remark]' maxlength='500' placeholder="{{ shop_form_settings['remark_placeholder'] }}">{{ order.remark }}</textarea>
+    <textarea class='limited' name='order[remark]' maxlength='500' placeholder="{{ shop_form_settings['remark_placeholder'] }}">{{ order.remark | escape }}</textarea>
   {% endif %}

mypage > 会員情報変更画面

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

  <!-- カテゴリ名 -->
- {{ info['category'] }}
+ {{ info['category'] | escape }}
  <!-- 入力項目名 -->
- {{ i['label'] }}
+ {{ i['label'] | escape }}

※同じ記述が2箇所あり、どちらも変更が必要です。

- {% if i['is_valid_format'] == true %}{% assign value = v %}{% else %}{% assign value = '' %}{% endif %}
+ {% if i['is_valid_format'] == true %}{% assign value = v | escape %}{% else %}{% assign value = '' %}{% endif %}

※同じ記述が2箇所あり、どちらも変更が必要です。

- <label for="customer_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}_{{ option['key'] }}">{{ option['value'] }}</label>
+ <label for="customer_free_columns_{{ custom_info_hash[0] }}_{{ seq_hash[0] }}_{{ i['free_column_id'] }}_{{ option['key'] }}">{{ option['value'] | escape }}</label>
- <option data-default="{{ default }}" value="{{ option['key'] }}"  {{ selected }}>{{ option['value'] }}</option>
+ <option data-default="{{ default }}" value="{{ option['key'] }}"  {{ selected }}>{{ option['value'] | escape }}</option>

軽微な修正

cart > 注文完了情報 (部分テンプレート)

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

   <!-- カウントダウンタイマー -->
-  {% if order.cv_upsell? and order.completed? != true and shop_form_settings['shop_cv_upsell_countdown'] %}
+  {% if request_path != complete_shop_order_path && order.cv_upsell? and order.completed? != true and shop_form_settings['shop_cv_upsell_countdown'] %}