Trang danh sách sản phẩm là trang liệt kê danh sách tất cả sản phẩm có thể bán của doanh nghiệp. Tại đây, khách hàng có thể xem các thông tin cơ bản của sản phẩm như hình ảnh sản phẩm, tên sản phẩm, giá sản phẩm... cùng với các thông tin về bộ lọc sản phẩm, sắp xếp sản phẩm. Trang danh sách sản phẩm của 1 website cơ bản thì sẽ bao gồm các nội dung sau:
Bộ lọc là một phần quan trọng của trang danh sách sản phẩm, giúp cho khách hàng có thể sàng lọc được các sản phẩm muốn tìm kiếm để tìm được sản phẩm một cách đúng ý nhất. Bộ lọc cơ bản sẽ gồm bộ lọc danh mục sản phẩm, bộ lọc giá và bộ lọc thuộc tính.
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 %}
trong đó: ví dụ
{{ removeFilter('price', '0:300000') }}
Đoạn code trên là hàm dùng để bỏ lọc những sản phẩm giá dưới 300.000đ
{{ addFilter('price', '0:300000') }}
Còn trên đây là đoạn code cho hàm thêm lọc những sản phẩm giá dưới 300.000đ
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.
