Tài liệu xStore

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

account/saved-products

Sản phẩm khách đã lưu.

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
products SavedProduct[] Sản phẩm đã lưu, mỗi mục kèm đối tượng product đã dựng sẵn. 1.0
has_more boolean Còn trang tiếp theo hay không. 1.0
next_cursor string | null Con trỏ để tải trang kế; null khi đã hết. 1.0

Mã đầy đủ

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

<div class="container page-content">
  <h1 class="page-title">Sản phẩm yêu thích</h1>
  <div class="account-layout">
    {% assign active_page = 'saved' %}
    {% include 'account/_sidebar' %}
    <div class="account-main">
      {% if products %}
        <div class="product-grid">
          {% for item in products %}
            <div class="product-card">
              {% if item.product.url %}
                <a href="{{ item.product.url }}" class="product-card__link">{{ item.product.title }}</a>
              {% else %}
                <span class="product-card__link">{{ item.product.title }}</span>
              {% endif %}
              <form method="POST" action="/tai-khoan/san-pham-yeu-thich/{{ item.product_id }}/xoa" onsubmit="return confirm('Bỏ yêu thích?')">
                <input type="text" name="_hp" style="display:none" tabindex="-1" autocomplete="off">
                <button class="btn btn--outline btn--sm" type="submit">Bỏ lưu</button>
              </form>
            </div>
          {% endfor %}
        </div>
        {% if has_more %}
          <a href="/tai-khoan/san-pham-yeu-thich?cursor={{ next_cursor }}" class="btn btn--outline">Xem thêm</a>
        {% endif %}
      {% else %}
        <p class="empty-state">Bạn chưa lưu sản phẩm nào.</p>
      {% endif %}
    </div>
  </div>
</div>