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="✓" />
<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'] %}