Tài liệu xStore

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

product/collection-detail

Trang một bộ sưu tập 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
collection Collection Bộ sưu tập đang xem. 1.0
products Product[] Sản phẩm trong bộ sưu tập, 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
cursor string | null Con trỏ của trang đang xem. 1.0
sort string | null Kiểu sắp xếp đang chọn. 1.0
stock string | null Bộ lọc tồn kho đang chọn. 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/collection-detail.html của bộ giao diện mặc định. Chép về templates/<bộ giao diện của bạn>/product/collection-detail.html rồi sửa theo ý muốn.

<div class="container page-content">
  <nav class="breadcrumb">
    <a href="/">Trang chủ</a> / <span>{{ collection.title }}</span>
  </nav>

  <div class="collection-banner">
    {% if collection.cover_image_url %}
      <img src="{{ collection.cover_image_url }}" alt="{{ collection.title }}" class="collection-banner__img">
    {% endif %}
    <div class="collection-banner__overlay">
      <h1>{{ collection.title }}</h1>
      {% if collection.description %}<p>{{ collection.description }}</p>{% endif %}
    </div>
  </div>

  <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>Bộ sưu tập chưa có sản phẩm nào.</p></div>
  {% endif %}
</div>