Tài liệu xStore

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

product/index

Danh sách tất cả sản phẩm.

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 Product[] Sản phẩm của trang hiện tại. 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
sort string | null Kiểu sắp xếp đang chọn (price_asc, price_desc…). 1.0
stock string | null Bộ lọc tồn kho đang chọn (in_stock, out_of_stock). 1.0
warehouse_id string | null Kho đang lọc theo. 1.0
warehouses Warehouse[] Danh sách kho để dựng bộ lọc. 1.0

Mã đầy đủ

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

<div class="container page-content">
  <h1 class="page-title">Tất cả sản phẩm</h1>

  <form method="get" class="storefront-sort">
    <label for="sort">Sắp xếp:</label>
    <select id="sort" name="sort" onchange="this.form.submit()">
      <option value=""           {% if sort == nil or sort == '' %}selected{% endif %}>Mặc định</option>
      <option value="price_asc"  {% if sort == 'price_asc' %}selected{% endif %}>Giá: Thấp đến cao</option>
      <option value="price_desc" {% if sort == 'price_desc' %}selected{% endif %}>Giá: Cao đến thấp</option>
    </select>
    {% if stock %}<input type="hidden" name="stock" value="{{ stock }}">{% endif %}
    {% if warehouse_id %}<input type="hidden" name="warehouse_id" value="{{ warehouse_id }}">{% endif %}
  </form>

  <form method="get" class="storefront-filters">
    {% if sort %}<input type="hidden" name="sort" value="{{ sort }}">{% endif %}
    <label for="stock">Tồn kho:</label>
    <select id="stock" name="stock" onchange="this.form.submit()">
      <option value=""              {% if stock == nil or stock == '' %}selected{% endif %}>Tất cả</option>
      <option value="in_stock"      {% if stock == 'in_stock' %}selected{% endif %}>Còn hàng</option>
      <option value="out_of_stock"  {% if stock == 'out_of_stock' %}selected{% endif %}>Hết hàng</option>
    </select>

    {% if stock == 'in_stock' and warehouses.size > 0 %}
      <label for="warehouse_id">Tại kho:</label>
      <select id="warehouse_id" name="warehouse_id" onchange="this.form.submit()">
        <option value="">Tất cả kho</option>
        {% for w in warehouses %}
          <option value="{{ w.id }}" {% if warehouse_id == w.id %}selected{% endif %}>{{ w.title }}</option>
        {% endfor %}
      </select>
    {% endif %}
  </form>

  {% if products.size > 0 %}
    <div class="product-grid">
      {% for product in products %}
        {% include 'components/product_item' %}
      {% endfor %}
    </div>
    {% if has_more %}
      <div class="load-more">
        <a href="?{% if sort %}sort={{ sort }}&{% endif %}{% if stock %}stock={{ stock }}&{% endif %}{% if warehouse_id %}warehouse_id={{ warehouse_id }}&{% endif %}cursor={{ next_cursor | url_encode }}" class="btn btn--outline">Xem thêm</a>
      </div>
    {% endif %}
  {% else %}
    <div class="empty-state">
      <p>Không có sản phẩm nào.</p>
    </div>
  {% endif %}
</div>