In modern e-commerce and content display websites, providing multi-dimensional parameter filtering functions for product lists has become a key factor in improving user experience and conversion rates.Visitors can quickly locate the products they need based on their own needs, which not only saves time but also greatly improves the usability of the website.For users of AnQiCMS, it is not difficult to achieve such a function, the built-in powerful functions and flexible template tags make the whole process intuitive and efficient.
This article will deeply explore how to add multi-dimensional parameter filtering functionality to the product list page in Anqi CMS and clearly display the filtering results.We will start from the background configuration of product properties and gradually explain to the construction of the front-end template, ensuring that you can easily get started and create a fully functional product display page.
Understand the multi-dimensional filtering mechanism of AnQi CMS
The Anqi CMS can easily achieve multi-dimensional filtering, the core lies in its "flexible content model" and "custom field" functions.You can create dedicated content models for different types of content (such as products, articles, services, etc.) and add various custom fields to these models.These custom fields are the foundation of our multi-dimensional filtering.
After you define filterable properties (such as color, size, material, brand, etc.) for products in the background, Anqi CMS provides two key template tags to work together:
archiveFiltersTagIt is responsible for automatically generating a series of filter link conditions based on the product model you define and its custom fields. These links will intelligently attach filter parameters to the URL.archiveListTagThis tag is used to get the product list. When the URL contains byarchiveFiltersgenerated byarchiveListIt will intelligently read these parameters and return product data that meets the conditions.
This mechanism allows us to avoid writing complex backend logic, just by using simple backend configuration and front-end template tags, we can achieve powerful multi-dimensional filtering functions.
Backend configuration: Define filterable properties for products
To add a filter function to the product list, you first need to define the corresponding filterable properties for your product model in the Anqi CMS backend.
- Enter content model management: Log in to the Anqi CMS backend, navigate to "Content Management" -> "Content Model".
- Select or create a product model: Usually, anqicms will integrate a "product model".If you need more fine-grained management, you can also create a new product model.Click to enter the product model editing page where you want to add the filter function.
- Add custom fieldHere, you will see the existing fields of the model and the "Content Model Custom Fields" area. Click "Add Field" to add filterable properties to your product.
- Parameter NameThis is the Chinese name of the field, for example, 'Color', 'Size', 'Material'.
- Field invocationThis is the English identifier used when calling the field in the template, for example,
color/size/materialMake sure to use lowercase English letters. - Field typeThis step is crucial, as it determines the form of the filtering conditions.
- Single choice/dropdown selection: The product properties are mutually exclusive, for example, 'Color: Red, Blue, Black'. The user can only choose one.
- Multiple selections: Suitable for product properties that can be multiple, such as 'Features: Waterproof, sun protection, abrasion resistance'. Users can select multiple options.
- Default valueFor single-choice, multiple-choice, or dropdown fields, you need to enter all possible options here, one per line. For example, if the field is "Color", you can enter the default value as:
These options will become specific values in the front-end filter conditions.红色 蓝色 白色 黑色 - Mandatory?: Decide according to your business requirements.
- Save the custom fields you add.
After completing the customization of the field settings, when you add or edit products in the background, you can fill in these newly defined attribute values for each product.These property values will become the data source for front-end filtering.
Front-end template: Build the filter interface and result display.
After the background configuration is completed, the next step is to modify your product list page template, usually this template file might beproduct/list.htmlor a custom list template you have created.
Step 1: Generate filtering conditions
In the product list page template, find the location where you want to place the filter conditions (usually at the top or sidebar of the product list). UsearchiveFilterstags to generate filter conditions:
{# 假设您的产品模型ID是2，并且您希望“全部”选项显示为“不限” #}
<div class="product-filters">
{% archiveFilters filters with moduleId="2" allText="不限" %}
{% for item in filters %}
<div class="filter-group">
<span class="filter-name">{{ item.Name }}:</span> {# 显示筛选维度名称，如“颜色” #}
<ul class="filter-options">
{% for val in item.Items %}
<li class="{% if val.IsCurrent %}active{% endif %}">
<a href="{{ val.Link }}">{{ val.Label }}</a> {# val.Link 包含了筛选参数的URL #}
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
{% endarchiveFilters %}
</div>
Code description:
moduleId="2": Replace it with yourProduct Model IDYou can find the corresponding ID in the background "Content Model".allText="不限": Set the display text for the "All" option, if it is set tofalsethen the "All" option will not be displayed.filtersThis isarchiveFiltersAn array object returned by the label, containing all filterable dimensions (such as color, size).item.Name: Display filter dimensions (such as "color").item.Items: This is all the options under the current filtering dimension (such as "red", "blue"), and it is also an array.val.Label: Display the name of the specific option (such as "red").val.LinkThis is the key! Anqi CMS will automatically generate a URL containing the corresponding filter parameters. When the user clicks on this link, the page will refresh with new filter parameters.val.IsCurrent: Determine if the current option is selected, can be used to addactiveClass name, so that it can be highlighted by CSS for the selected filter condition.
Step 2: Display the filter results
After generating the filtering conditions, the next step is to display the product list based on these conditions. You need to usearchiveListtags and make sure that itstypethe parameter to"page"So that it can respond to filtering parameters in the URL and perform pagination.
<div class="product-list">
{% archiveList archives with type="page" moduleId="2" limit="12" %} {# 每页显示12个产品 #}
{% for product in archives %}
<div class="product-item">
<a href="{{ product.Link }}">
{% if product.Thumb %}<img src="{{ product.Thumb }}" alt="{{ product.Title }}" />{% endif %}
<h3>{{ product.Title }}</h3>
<p>{{ product.Description }}</p>
{# 假设您有自定义字段：价格 price，颜色 color #}
{# 您也可以通过archiveParams标签循环显示所有自定义字段 #}
{% archiveDetail productPrice with name="price" id=product.Id %}<p>价格: {{ productPrice }}</p>{% endarchiveDetail %}
{% archiveDetail productColor with name="color" id=product.Id %}<p>颜色: {{ productColor }}</p>{% endarchiveDetail %}
</a>
</div>
{% empty %}
<p class="no-results">没有找到符合条件的产品。</p>
{% endfor %}
{% endarchiveList %}
</div>
Code description:
moduleId="2"Replace it with your product model ID.type="page":Very importantThis tellsarchiveListGo to parse the query parameters in the URL and perform pagination processing.limit="12": Set the number of products displayed per page.productThis isarchiveListLoop through each product object, you can access its properties like a regular product listproduct.Title/product.Link/product.Thumbetc.).- Display of custom fields: For custom fields, you can use
archiveDetailLabel to get individually, or usearchiveParamsLabel to display all custom parameters in a loop. For example,{% archiveDetail productPrice with name="price" id=product.Id %}Will get the current product(id=product.Id) namedpricecustom field value.
Step 3: Add Pagination Function
Pagination is essential when there are many products. CombinearchiveListoftype="page"the pattern, you can usepaginationtags to easily add pagination:
<div class="pagination-area">
{% pagination pages with show="5" %} {# 最多显示5个页码按钮 #}
<ul class="pagination-list">
{% if pages.FirstPage %}<li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a></li>{% endif %}
{% if pages.PrevPage %}<li class="prev"><a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a></li>{% endif %}
{% for item in pages.Pages %}
<li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{ item.Link }}">{{ item.Name }}</a></li>
{% endfor %}
{% if pages.NextPage %}<li class="next"><a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a></li>{% endif %}
{% if pages.LastPage %}<li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a></li>{% endif %}
</ul>
{% endpagination %}
</div>
Code description:
pagesThis ispaginationThe label provides us with the pagination information object.show="5": Controls how many page number buttons are displayed at one time in the pagination area.pages.FirstPage.Link/pages.PrevPage.LinkThese links will automatically carry the current filter parameters to ensure that the filter conditions will not be lost when the user clicks on the pagination.
Optimization and practical suggestions
- Design a user-friendly filter interface：The visual design of the filtering conditions is very important. Use CSS to highlight the currently selected conditions and provide a "Clear all filters" button (usually just