product/category#

Trang một danh mục sản phẩm.

• Tệp giao diện: product/category.html
• Đường dẫn: /danh-muc/{slug} — hoặc đường dẫn riêng của danh mục
• Controller: App\Modules\Product\ProductController::categoryPageById

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#

Mã đầy đủ#

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

<div class="container page-content">

  {% if breadcrumb.size > 0 %}
  <nav class="breadcrumb" aria-label="breadcrumb">
    <a href="/">Trang chủ</a>
    {% for crumb in breadcrumb %}
      <span class="breadcrumb__sep">/</span>
      {% if forloop.last %}
        <span class="breadcrumb__current">{{ crumb.title }}</span>
      {% elsif crumb.url %}
        <a href="{{ crumb.url }}">{{ crumb.title }}</a>
      {% else %}
        <span>{{ crumb.title }}</span>
      {% endif %}
    {% endfor %}
  </nav>
  {% endif %}

  <div class="category-header">
    {% if category.cover_image_url %}
      <img src="{{ category.cover_image_url }}" alt="{{ category.title }}"
           class="category-header__img" loading="lazy">
    {% endif %}
    <h1 class="category-header__title">{{ category.title }}</h1>
    {% if category.description %}
      <p class="category-header__desc">{{ category.description }}</p>
    {% endif %}
  </div>

  {% if subcategories.size > 0 %}
  <div class="subcategory-nav">
    {% for sub in subcategories %}
      {% if sub.url %}<a href="{{ sub.url }}" class="subcategory-nav__item">{% else %}<span class="subcategory-nav__item">{% endif %}
        {% if sub.cover_image_url %}
          <img src="{{ sub.cover_image_url }}" alt="{{ sub.title }}"
               class="subcategory-nav__img" loading="lazy">
        {% endif %}
        <span>{{ sub.title }}</span>
      {% if sub.url %}</a>{% else %}</span>{% endif %}
    {% endfor %}
  </div>
  {% endif %}

  <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="pagination">
      <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 %}
    <p class="empty-state">Danh mục này chưa có sản phẩm.</p>
  {% endif %}

</div>