マイページ画面
会員のマイページ画面(ログイン後に表示するトップ画面)です。 デフォルトでは何も載せていませんが、ログインしている会員の情報を変数で取得できるので、自由度高くデザインできます。
ショップのパス
ドメイン/shop/customer
テーマ管理のファイルパス
ec_force/shop/customer/base/show.html.liquid
ec_force/shop/customer/base/show.html+smartphone.liquid
JS タグ
{{ 'shop/customer/base' | javascript_include_tag }}
必要なコンポーネント
※任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。
{{ 'shop/customer/base' | javascript_include_tag }}
<!-- フラッシュメッセージ -->
{{ 'notice' | flash: 'alert alert-success', 'text' }}
{{ 'alert' | flash: 'alert alert-danger', 'text' }}
<!-- マイページコンテナ -->
<div id="customers-view">
<!-- 会員番号(任意) -->
{{ current_customer.number }}
<!-- お名前, 苗字(任意) -->
{{ current_customer.billing_address.name01 }}
<!-- お名前, 名前(任意) -->
{{ current_customer.billing_address.name02 }}
<!-- フリガナ, 苗字(任意) -->
{{ current_customer.billing_address.kana01 }}
<!-- フリガナ, 名前(任意) -->
{{ current_customer.billing_address.kana02 }}
<!-- 都道府県(任意) -->
{{ current_customer.billing_address.prefecture.name }}
<!-- 郵便番号(任意) -->
〒{{ current_customer.billing_address.zip01 }}-{{ current_customer.billing_address.zip02 }}
<!-- 住所(任意) -->
{{ current_customer.billing_address.full_address }}
<!-- 電話番号(任意) -->
{{ current_customer.billing_address.tel01 }}-{{ current_customer.billing_address.tel02 }}-{{ current_customer.billing_address.tel03 }}
<!-- FAX番号(任意) -->
{{ current_customer.billing_address.fax01 }}-{{ current_customer.billing_address.fax02 }}-{{ current_customer.billing_address.fax03 }}
<!-- 会社名(任意) -->
{{ current_customer.billing_address.company_name }}
<!-- メールアドレス(任意) -->
{% if shop_form_settings['email'] %}
{{ current_customer.email }}
{% endif %}
<!-- 性別(任意) -->
{{ current_customer.sex.name }}
<!-- 職業(任意) -->
{{ current_customer.job.name }}
<!-- 生年月日, 年(任意) -->
{{ current_customer.birth_year }}年
<!-- 生年月日, 月(任意) -->
{{ current_customer.birth_month }}月
<!-- 生年月日, 日(任意) -->
{{ current_customer.birth_day }}日
<!-- ショップからのお知らせ(任意) -->
{% if current_customer.optin %}受け取る{% else %}受け取らない{% endif %}
<!-- 会員ランク(任意) -->
{{ current_customer.customer_rank.name }}
<!-- 総額購入金額(任意) -->
{{ current_customer.buy_total | number_to_currency: format: '%n %u' }}
<!-- 所持ポイント(任意) -->
{{ current_customer.point_total }}
{% 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 falses %}
{% 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 %}
<!-- 購入履歴一覧(任意) -->
{% for order in orders %}
<!-- 購入日(任意) -->
{{ order.completed_at | date: "%Y/%m/%d %H:%M:%S" }}
<!-- 購入番号(任意) -->
{{ order.number }}
<!-- 定期受注フラグ(任意) -->
{{ order.recurring? }}
<!-- 定期受注番号(任意) -->
{{ order.subs_order.number }}
<!-- 購入種別(任意) -->
{% if order.recurring? %}定期購入({{ order.nth }}){% else %}通常購入{% endif %}
<!-- 支払い方法(任意) -->
{{ order.payment.payment_method.name }}
<!-- 対応状況(任意) -->
{{ order.human_state_name }}
<!-- 決済状況(任意) -->
{{ order.payment.human_state_name }}
<!-- 合計(任意) -->
{{ order.total | number_to_currency: format: '%n %u' }}
<!-- 支払い合計(任意) -->
{{ order.payment_total | number_to_currency: format: '%n %u' }}
<!-- 注文商品名(任意) -->
{{ order.product_names | join: ', ' }}
<!-- 注文商品コード(任意) -->
{{ order.order_items | map: 'product' | map: 'number' | join: ', ' }}
<!-- 注文商品SKUコード(任意) -->
{{ order.order_items | map: 'variant' | map: 'sku' | join: ', ' }}
<!-- 商品 ID(任意) -->
{{ order.order_items | map: 'product' | map: 'id' | join: ', ' }}
<!-- SKU ID(任意) -->
{{ order.order_items | map: 'variant' | map: 'id' | join: ', ' }}
<!-- 配送業者(任意) -->
{{ order.shipping_carrier.name }}
<!-- 配送伝票番号(任意) -->
{{ order.shipping_slip }}
<!-- トラッキングURL(任意) -->
{{ order.tracking_url }}
<!-- 発送予定日(任意) -->
{{ order.scheduled_to_be_shipped_at | date: "%Y/%m/%d %H:%M:%S" }}
<!-- 配送予定日(任意) -->
{{ order.scheduled_to_be_delivered_at | date: "%Y/%m/%d %H:%M:%S" }}
<!-- 配送完了日(任意) -->
{{ order.delivered_at | date: "%Y/%m/%d" }}
<!-- 注文詳細画面へのリンク(任意) -->
<a href="/shop/customer/orders/{{ order.number }}">詳細</a>
{% endfor %}
<!-- カスタム項目(任意) -->
{% if liquid_custom_field != empty %}
<!-- カスタム項目タイトル名(任意) -->
{{ base_info.free_columns_title }}
{% 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'] | escape }} {% endif %}
{% for i_hash in info['info'] %}
{% assign i = i_hash[1] %}
<!-- 項目名(任意) -->
{{ i['label'] | escape }}
<!-- 入力、選択値(任意) -->
<!-- テキストエリアの改行を反映させたい場合はstyleに「white-space: pre-wrap;」を当てて下さい -->
{% for v in i['value'] %} {{ v | escape }} {% endfor %}
{% endfor %}
{% endfor %}
{% endfor %}
{% endif %}
</div>
画面イメージ
※こちらは、上記で紹介しているコンポーネントのコードにデフォルトデザインをCSSであてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。