Tài liệu xStore

Hướng dẫn phát triển giao diện storefront

account/profile

Trang tổng quan tài khoản.

Ngoài những biến dưới đây, slot này còn nhận toàn bộ biến toàn cục.

Biến của trang

Biến Kiểu Mô tả Từ phiên bản
customer Customer Hồ sơ khách đang đăng nhập. 1.0
orders Order[] Đơn hàng gần đây. 1.0

Mã đầy đủ

Toàn bộ tệp account/profile.html của bộ giao diện mặc định. Chép về templates/<bộ giao diện của bạn>/account/profile.html rồi sửa theo ý muốn.

<div class="container page-content">
  <h1 class="page-title">Tài khoản của tôi</h1>
  <div class="account-layout">
    {% assign active_page = 'overview' %}
    {% include 'account/_sidebar' %}
    <div class="account-main">
      <section class="account-section">
        <h2 class="account-section__title">Điểm thưởng</h2>
        <p class="account-points">{{ customer.points_balance | default: 0 }} điểm</p>
        <a href="/tai-khoan/diem-thuong" class="btn btn--secondary btn--sm">Xem lịch sử điểm</a>
      </section>

      <section class="account-section">
        <h2 class="account-section__title">Đơn hàng gần đây</h2>
        {% if orders.size > 0 %}
          <table class="orders-table">
            <thead>
              <tr>
                <th>Mã đơn</th>
                <th>Ngày đặt</th>
                <th>Trạng thái</th>
                <th>Tổng tiền</th>
              </tr>
            </thead>
            <tbody>
              {% for order in orders limit: 5 %}
              <tr>
                <td><a href="/tai-khoan/don-hang/{{ order.id }}">#{{ order.code | default: order.id }}</a></td>
                <td>{{ order.created_at | date_vi }}</td>
                <td><span class="status-badge">{{ order.current_status }}</span></td>
                <td>{{ order.total_amount | money }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          <a href="/tai-khoan/don-hang" class="account-section__more">Xem tất cả đơn hàng →</a>
        {% else %}
          <p class="empty-state">Bạn chưa có đơn hàng nào.</p>
        {% endif %}
      </section>

      <section class="account-section account-quick-links">
        <h2 class="account-section__title">Truy cập nhanh</h2>
        <div class="quick-links-grid">
          <a href="/tai-khoan/thong-tin" class="quick-link-card">Thông tin cá nhân</a>
          <a href="/tai-khoan/dia-chi" class="quick-link-card">Địa chỉ giao hàng</a>
          <a href="/tai-khoan/danh-gia" class="quick-link-card">Đánh giá của tôi</a>
          <a href="/tai-khoan/san-pham-yeu-thich" class="quick-link-card">Sản phẩm yêu thích</a>
          <a href="/tai-khoan/ma-giam-gia" class="quick-link-card">Mã giảm giá</a>
          <a href="/doi-mat-khau" class="quick-link-card">Đổi mật khẩu</a>
        </div>
      </section>
    </div>
  </div>
</div>