product/search#

Kết quả tìm kiếm sản phẩm.

• Tệp giao diện: product/search.html
• Đường dẫn: /tim-kiem?q=...
• Controller: App\Modules\Product\ProductController::searchPage

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/search.html của bộ giao diện mặc định. Chép về templates/<bộ giao diện của bạn>/product/search.html rồi sửa theo ý muốn.

<div class="container page-content">
  <form action="/tim-kiem" method="get" class="search-form search-form--page">
    <input type="text" name="q" value="{{ query | escape }}"
           placeholder="Tìm kiếm sản phẩm..." class="search-input search-input--lg">
    <button type="submit" class="btn btn--primary">Tìm kiếm</button>
  </form>

  {% if query != "" %}
    <p class="search-summary">
      {% if products.size > 0 %}
        Kết quả tìm kiếm cho "<strong>{{ query | escape }}</strong>"
      {% else %}
        Không tìm thấy sản phẩm nào cho "<strong>{{ query | escape }}</strong>"
      {% endif %}
    </p>
  {% endif %}

  {% if query != "" %}
    <form method="get" action="/tim-kiem" class="storefront-sort">
      <input type="hidden" name="q" value="{{ query | escape }}">
      <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" action="/tim-kiem" class="storefront-filters">
      <input type="hidden" name="q" value="{{ query | escape }}">
      {% 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>
  {% endif %}

  {% 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="?q={{ query | url_encode }}{% 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 %}
  {% elsif query != "" %}
    <div class="empty-state">
      <p>Thử tìm với từ khóa khác hoặc <a href="/san-pham">xem tất cả sản phẩm</a>.</p>
    </div>
  {% endif %}
</div>