テーマ仕様書
shop
マイページ
ポイント
履歴一覧

ポイント履歴一覧画面

会員が持つポイント情報を表示する画面です。
デフォルトでは、以下の項目を表示します。

  • 現在のポイント
    • 保有ポイントと有効期限
      • ポイントの有効期限は「付与履歴ごとに有効期限を保有」「付与するごとに日数更新」のいずれかの設定が可能です。
        詳細はecforce FAQ「ポイントの設定 (opens in a new tab)」をご確認ください。
    • 付与予定ポイント
  • 招待コード
    • 招待コード
    • 使用済み回数
    • 使用可能回数
    • 招待コード使用上限数
    • 招待コード発行ボタン
    • 招待コード発行上限時メッセージ
    • 招待コード購入リンク
  • ポイント履歴
    • ポイント履歴一覧
    • 日時
    • 名目
    • 受注番号
    • ポイント
    • 合計ポイント

ショップのパス

ドメイン/shop/customer/points

テーマ管理のファイルパス

ec_force/shop/customer/points/index.html.liquid
ec_force/shop/customer/points/index.html+smartphone.liquid

JS タグ

{{ 'shop/customer/base' | javascript_include_tag }}

必要なコンポーネント

※任意とあるもの以外はシステム上必要なコンポーネントとなりますので、必ず使用するようにしてください。

{{ 'shop/customer/base' | javascript_include_tag }}
 
<!-- ポイント情報 -->
{% if point_total == null or point_total == 0 %}
  {% if current_customer.grant_plan_point == null or current_customer.grant_plan_point == 0 %}
    保有しているポイントはありません。
  {% endif %}
{% endif %}
{% if point_total > 0 or current_customer.grant_plan_point > 0 %}
  <!-- 付与予定ポイント -->
  {{ current_customer.grant_plan_point | number_with_delimiter }}
 
  <!-- 合計ポイント -->
  {{ current_customer.point_total | number_with_delimiter }}
 
  <!-- 消費予定ポイント -->
  {% if pre_redeem_points_amount > 0 %}
    {{ current_customer.pre_redeem_points_amount | number_with_delimiter }}
  {% endif %}
 
  <!-- 有効期限(ポイント有効期限の設定が「付与する毎に日数更新」かつ有効期限が1種類の場合) -->
  {% if is_point_expired_date_taken_each_history == false and point_details.size <= 1 %}
    <!-- 有効期限 -->
    {% if latest_point_expiration == null %}
      無制限
    {% else %}
      {{ latest_point_expiration | date: "%Y/%m/%d %H:%M:%S" }}
    {% endif %}
  {% endif %}
 
  <!-- 有効期限別ポイント数(ポイント有効期限の設定が「付与履歴毎に有効期限を保有」または有効期限が複数ある場合) -->
  {% if is_point_expired_date_taken_each_history or point_details.size > 1 %}
    <!-- 有効期限別 -->
    {% for point_detail in point_details %}
 
      {% if point_detail.point_each and point_detail.point_each != 0 %}
        <!-- 所有ポイント -->
        {{ point_detail.point_each | number_with_delimiter }}
 
        <!-- 有効期限 -->
        {% if point_detail.point_expired_at == null %}
          無制限
        {% else %}
          {{ point_detail.point_expired_at | date: "%Y/%m/%d %H:%M:%S" }}
        {% endif %}
      {% endif %}
 
    {% endfor %}
 
  {% endif %}
 
{% endif %}
 
<!-- 招待コード管理 -->
{% if base_info.use_point_for_customer_invitation and base_info.point_event_invite %}
 
  <!-- フラッシュメッセージ -->
  {{ 'notice' | flash: 'alert alert-success', 'text' }}
  {{ 'alert' | flash: 'alert alert-danger', 'text' }}
  {{ 'error' | flash: 'alert alert-danger', 'text' }}
 
  <!-- 招待コードの利用状況 -->
  {% if current_customer.invite_codes != empty %}
 
    {% for invite_code in invite_codes %}
 
      <!-- 招待コード -->
      {{ invite_code.number }}
 
      <!-- 使用済み回数 -->
      {{ invite_code.invitees | size }}
 
      <!-- 使用可能回数 -->
      {% if base_info.invite_codes_invitee_limit == 0 %}
        無制限
      {% else %}
        {{ invite_code.available_invited_times }}
      {% endif %}
 
      <!-- 招待コード使用上限数 -->
      {% if base_info.invite_codes_invitee_limit == 0 %}
        無制限
      {% else %}
        {{ base_info.invite_codes_invitee_limit }}
      {% endif %}
 
      <!-- 招待コード購入リンク -->
      {% if invite_code_end_path %}
        {{ invite_code_end_path }}{{ invite_code.number }}
      {% endif %}
 
    {% endfor %}
 
  {% endif %}
 
  <!-- 招待コード発行欄 -->
  {% if current_customer.can_create_invite_code? %}
 
    <!-- 招待コード発行ボタン -->
    <a rel="nofollow" data-method="post" href="/shop/customer/points">招待コードを発行する</a>
 
  {% else %}
 
    <!-- 招待コード発行上限時メッセージ -->
    ※招待コードの発行上限に達しました
 
  {% endif %}
 
{% endif %}
 
{% if points != null and points.size > 0 %}
 
  <!-- ポイント履歴一覧 -->
  {% for point in points %}
 
    {% if point.point %}
 
      <!-- 日時 -->
      {{ point.created_at | date: "%Y/%m/%d %H:%M" }}
 
      <!-- 名目 -->
      {% if point.point_event.eventable_type == 'EcForce::Campaign' %}
        ポイント還元(特典)
      {% else %}
        {{ point.point_event.name }}
      {% endif %}
 
      <!-- 受注番号 -->
      {% if point.order.deleted_at != null or point.order.customer.id != current_customer.id or point.point_event.invite_coupon? or point.order == null %}
        -
      {% else %}
        <a href="/shop/customer/orders/{{ point.order.number }}">{{ point.order.number }}</a>
      {% endif %}
 
      <!-- ポイント -->
      {{ point.point | number_with_delimiter }}
 
      <!-- 合計ポイント -->
      {{ point.point_total | number_with_delimiter }}
 
      {% if is_point_expired_date_taken_each_history or point_details.size > 1 %}
        <!-- 有効期限 -->
        {% if expirations[point.id] %}
          {{ expirations[point.id] }}
        {% endif %}
      {% endif %}
 
    {% endif %}
 
  {% endfor %}
 
{% endif %}

画面イメージ

※こちらは、上記で紹介しているコンポーネントのコードにデフォルトデザインをCSSであてたイメージになります。コンポーネントのコードのみだと、このような表示にはなりませんのでご注意ください。