Tìm kiếm

Các nội dung cơ bản của trang tìm kiếm

Trang tìm kiếm là trang liệt kê danh sách các sản phẩm theo từ khóa được tìm kiếm. Nội dung của trang sẽ giống trang danh sách sản phẩm. Trang tìm kiếm của 1 website cơ bản thì sẽ bao gồm các nội dung sau:

Các thẻ meta

{% extends layout_layout %}
{% block meta %}
    {% set title = getParam('q') %}
    {{ headTitle('Kết quả tìm kiếm: ' ~ title).setSeparator(' - ').setAutoEscape(false)|raw }}
    <meta name="keywords" content="Tìm kiếm">
    <meta name="description" content="Tìm kiếm">
    <link rel="canonical" href="{{ getCurrentUrl(true) }}" />
    <meta property="og:url" content="{{ getCurrentUrl(true) }}">
    <meta property="og:image" content="https://dummyimage.com/300x200/000/fff">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Tìm kiếm">
{% endblock %}

Bộ lọc

• Bộ lọc danh mục sản phẩm

{% set categories = getCategories() %}
{% if(categories is not empty) %}
    <ul>
        {% for cate in categories %}
            <li>
                <a  href="{{ cate.viewLink }}" title="{{ cate.name }}">{{ cate.name }}</a>        
            </li>
        {% endfor %}
    </ul>
{% endif %}

• Bộ lọc giá

{% set price_ranges = [
    ["0", "200000"],
    ["200000", "350000"],
    ["350000", "500000"],
    ["500000", "800000"],
    ["800000", "1000000"],
    ["1000000", "0"],
] %}

{% set price_param = getParam('price') %}
 {% for range in price_ranges %}
    {% set min_price = range[0]|number_format(0, '.', '') %}
    {% set max_price = range[1]|number_format(0, '.', '') %}
    {% set range_string = min_price ~ ':' ~ max_price %}
    {% if(range_string in price_param) %}
        {% set filter = removeFilter('price', range_string) %}
        {% set checked =  'checked' %}
    {% else %}
        {% set filter = addFilter('price', range_string) %}
        {% set checked =  '' %}
    {% endif %}
    <div class="form-check filter-item pt-1 pb-1 mb-0 ">
        <input class="form-check-input filter-check" type="checkbox"
               value="{{ filter }}" {{ checked }}>
        <label class="form-check-label">
              {% if(min_price == 0 and max_price == 200000) %}
                    Dưới {{ max_price/1000|number_format(0, '.', '') ~ 'k' }}
              {% elseif (min_price == 1000000 and max_price == 0) %}
                   Trên 1 triệu
              {% else %}
                  Từ {{ min_price/1000|number_format(0, '.', '') ~ 'k' }} - {{ max_price/1000|number_format(0, '.', '') ~ 'k' }}
              {% endif %}
        </label>
    </div>
{% endfor %}

• Bộ lọc thuộc tính

{% set allAttr = getAllAttributes() %}
{% if(allAttr) %}
    {% for attr in allAttr %}
        {% if(attr.values != null) %}
            {% set column = attr.column %}
            <li>
                {{ attr.name|raw }}
                <ul class="sub-filter">
                    {% for cl in attr.values %}
                        {% if(cl.id in attrColumnValues[column]) %}
                            <li data-link="{{ removeFilter(column, cl.id) }}">
                                <a rel="noindex" href="{{ removeFilter(column, cl.id) }}" title="{{ cl.name|raw }}"
                                    {{ cl.name|raw }}
                                </a>
                            </li>
                        {% else %}
                            <li data-link="{{ addFilter(column, cl.id, 2) }}">
                                <a rel="noindex" href="{{ addFilter(column, cl.id, 2) }}" title="{{ cl.name|raw }}">
                                    {{ cl.name|raw }}
                                </a>
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </li>
        {% endif %}
    {% endfor %}
{% endif %}

Sắp xếp

Sắp xếp có tác dụng gần tương tự như bộ lọc. Tuy nhiên sắp xếp sẽ không lược bớt sản phẩm mà chỉ hiển thị lại các sản phẩm theo một tiêu chí nhất định bao gồm: khuyến mãi, giá tăng dần, giá giảm dần, theo tên sản phẩm từ A - Z, theo tên sản phẩm từ Z - A, cũ nhất, mới nhất.

<ul>
    <li class="{{ getParam('show') == 'discount' ? 'selected' : '' }}">
        <a href="{{ addFilter('show', 'discount', 2) }}">Khuyến mãi</a>
    </li>
    <li class="{{ getParam('show') == 'priceAsc' ? 'selected' : '' }}">
        <a href="{{ addFilter('show', 'priceAsc', 2) }}">Giá:Tăng dần</a>
    </li>
    <li class="{{ getParam('show') == 'priceDesc' ? 'selected' : '' }}">
        <a href="{{ addFilter('show', 'priceDesc', 2) }}">Giá: Giảm dầm</a>
    </li>
    <li class="{{ getParam('show') == 'nameAsc' ? 'selected' : '' }}">
        <a href="{{ addFilter('show', 'nameAsc', 2) }}">Tên: A - Z</a>
    </li>
    <li class="{{ getParam('show') == 'nameDesc' ? 'selected' : '' }}">
        <a href="{{ addFilter('show', 'nameDesc', 2) }}">Tên: Z - A</a>
    </li>z
    <li class="{{ getParam('show') == 'old' ? 'selected' : '' }}">
        <a href="{{ addFilter('show', 'old', 2) }}">Cũ nhất</a>
    </li>
    <li class="{{ getParam('show') == 'new' ? 'selected' : '' }}">
        <a href="{{ addFilter('show', 'new', 2) }}">Mới nhất</a>
    </li>
</ul>

Danh sách sản phẩm

{% if (paginator.currentModels) %}
    <div class="list-product-collection row row-cols-lg-5 row-cols-2">
        {% for p in paginator.currentModels %}
            {% set priceDiscount = n.priceAfterDiscount %}
            {% set percent = n.calcDiscountPercent %}
            {% set image = n.thumbnailUri %}
            <div>
                <a href="{{ n.viewLink }}">
                    <picture>
                        <source data-srcset="{{ image }}">
                        <img loading="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
                             alt="{{ n.name | raw }}"/>
                    </picture>
                </a>
                {% if(percent > 0) %}
                    <div>- {{percent }}%</div>
                {% endif %}
                <a href="{{ n.viewLink }}">{{ n.name | raw }}</a>
                <div>
                    {% if p.priceAfterDiscount > 0 %}
                        <p>{{ p.priceAfterDiscount | number_format(0) }}₫
                        <del>{{ p.price | number_format(0) }}₫</del></p>
                    {% elseif (p.oldPrice > 0) %}
                        <p>{{ p.price | number_format(0) }}₫
                        <del>{{ p.oldPrice | number_format(0) }}₫</del></p>
                    {% else %}
                        <span>{{ p.price | number_format(0) }}₫</span>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
{% else %}
    <p>Không có sản phẩm nào thuộc danh mục này.</p>
{% endif %}

Phân trang

Phân trang giúp cho khách hàng có thể tìm kiếm được sản phẩm dễ dàng và thường sẽ được đặt ở phía cuối trang.

<div>
    {{ render_paginator(paginator) }}
</div>