テーマ仕様書
shop
マイページ
基本情報
トップ

マイページ画面

会員のマイページ画面(ログイン後に表示するトップ画面)です。 デフォルトでは何も載せていませんが、ログインしている会員の情報を変数で取得できるので、自由度高くデザインできます。

ショップのパス

ドメイン/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であてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。