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 according to their own needs, which not only saves time but also greatly improves the usability of the website.For users of AnQiCMS, implementing such a function is not a difficult task. The powerful built-in features and flexible template tags make the entire process intuitive and efficient.
This article will delve into how to add multi-dimensional parameter filtering functionality to the product list page in the Anqi CMS, and clearly display the filtering results.We will start with configuring product properties on the backend and gradually explain to the frontend template construction, ensuring that you can easily get started and create a product display page with complete functions.
Understanding the multi-dimensional filtering mechanism of AnQi CMS
The core reason why AnQi CMS can easily achieve multi-dimensional filtering is its 'flexible content model' and 'custom field' features.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 for our multi-dimensional filtering.
When you define filterable attributes (such as color, size, material, brand, etc.) for products in the background, the Anqi CMS provides two key template tags to work together:
archiveFilterstags：It is responsible for automatically generating a series of filterable links based on the product model you define and its custom fields. These links will intelligently attach the filter parameters to the URL.archiveListtagsThis tag is used to get the product list. When the URL contains parameters separated byarchiveFiltersgenerated by the filterarchiveListIt will intelligently read these parameters and return product data that meets the conditions.
This mechanism allows us to avoid writing complex backend logic, and we can achieve powerful multi-dimensional filtering functions simply by using simple backend configuration and frontend template tags.
Background configuration: Define filterable attributes for the product
To add a filter function to the product list, you first need to define the corresponding filterable attributes for your product model in the Anqi CMS background.
- Enter content model managementLogin to the Aq CMS backend, navigate to 'Content Management' -> 'Content Model'.
- Select or create a product modelEnglish: Usually, an Antei CMS will be built-in with a 'Product Model'.If you need more refined 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 Fields：Here, you will see the existing fields of the model and the 'Custom fields of content model' area. Click 'Add field' to add filterable properties to your product.
- Parameter name：This is the Chinese name of the field, for example, "color", "size", "material".
- Call field：This is the English identifier used when calling the field in the template, for example,
color/size/material. please ensure to use english lowercase letters. - field type: this step is crucial, it determines the form of the filtering conditions.
- single choice/dropdown choice：Applicable to product attributes that are mutually exclusive, such as 'Color: Red, Blue, Black'. The user can only select one.
- Multiple selection：For product attributes, multiple can be selected, such as
- Default valueFor single-choice, multiple-choice, or dropdown field types, 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 the specific values in the front-end filter conditions.红色 蓝色 白色 黑色 - Is required: Decide according to your business requirements.
- Save the custom fields you added.
After you complete the setup of custom fields, when you add or edit products in the background, you can fill in these newly defined attribute values for each product.These attribute values will become the data source for the front-end filter.
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 your custom list template.
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 explanation:
moduleId="2": Replace it with yourProduct Model ID. You can find the corresponding ID in the "Content Model" section of the backend.allText="不限": Set the display text for the "All" option, if it is set tofalsethen the "All" option will not be displayed.filters：This isarchiveFiltersThe array returned by the label contains all the dimensions that can be filtered (such as color, size).item.Name: Display the filtered dimensions (such as 'color').item.Items：This is the list of all options under the current filter dimension (such as “Red”, “Blue”), and also an array.val.Label：Display the name of the specific option (such as “Red”).val.LinkThis is the key! Auto CMS will automatically generate a URL containing the corresponding filter parameters. When the user clicks on this link, the page will refresh and bring along the new filter parameters.val.IsCurrent：Check whether the current option is selected, can be used to addactiveclass name, so that it can be highlighted by CSS to indicate the selected filtering condition.
Step 2: Display the filtering results
After generating the filtering conditions, the next step is to display the product list filtered according to these conditions. You need to usearchiveListtags, and ensure that itstypeparameter settings"page"It allows it to respond to the 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 explanation:
moduleId="2": Replace it with your product model ID.type="page":Extremely important! This tellsarchiveListParse the query parameters from the URL and perform pagination.limit="12": Set the number of products to display per page.product：This isarchiveListCycles through each product object, you can access its properties as you would with a regular product list.product.Title/product.Link/product.Thumbetc.).- Display of custom fieldsFor custom fields, you can use:
archiveDetailLabel to get individually, or usearchiveParamsLabel to cycle through all custom parameters. 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"Mode, 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 explanation:
pages：This ispaginationThe pagination information object provided by the label.show="5": Controls the number of page number buttons displayed at one time in the pagination area.pages.FirstPage.Link/pages.PrevPage.LinkThese links will automatically carry the current filter parameters, ensuring that the user does not lose the filter conditions when clicking on pagination.
Optimization and practical suggestions
- Design a user-friendly filter interfaceIt is very important to visually design the filtering conditions. Use CSS to highlight the currently selected condition and provide a "Clear All Filters" button (usually just