How to use the `archiveFilters` tag to build a dynamic document filtering feature, such as filtering by product parameters?

Utilizing AnQiCMS'sarchiveFilterstags, building an efficient and practical dynamic filtering function

In the field of content management and e-commerce, it is crucial for users to be able to quickly and accurately find the information they need to improve website experience and conversion rates.Imagine when users browse products or documents on your website, if they can quickly filter out the content they want based on various conditions such as color, size, brand, and even more specific parameters such as processor type and memory size, this will greatly enhance their user experience.Provided by AnQiCMSarchiveFiltersThe label is born for this, it allows you to easily build a powerful, flexible and versatile dynamic filtering interface.

The value of dynamic filtering: why is it indispensable?

The traditional list display method, usually can only be sorted by time, popularity, or category.However, for websites with a large amount of content or various parameter attributes (such as product, service introductions, technical documents, etc.), this method is obviously not sufficient to meet the refined search needs of users.

The core of dynamic filtering function lies in converting various attributes of content into interactive filtering conditions.Users can freely select one or more conditions, the website will update in real-time, and only display documents that meet the conditions.This greatly enhances the discoverability of content, reduces the cost of user search, and also provides data insights for website operators to understand user preferences, thereby optimizing content strategies and product presentations.This is an essential tool for e-commerce websites to enhance customer satisfaction and boost sales.

Lay a foundation: content model and custom fields

Further understandarchiveFiltersBefore the label, we need to understand the source of dynamic filtering. AnQiCMS is powerful due to its 'flexible content model' feature.All filterable parameters must be predefined as 'custom fields' in the 'Content Management' module under the 'Content Model' in the background.

For example, if you need to build a filter function for a product, you may need to create a content model named "Product Model" (AnQiCMS provides it by default), and then add custom fields under this model, such as:

• Field Name:Color,Call field: color,Field type:Single choice (for example: Red, Blue, Black)
• Field Name:Size,Call field: size,Field type:Single choice (for example: S, M, L, XL)
• Field Name:Processor,Call field: processor,Field type:Dropdown selection (for example: Intel i7, AMD Ryzen 7)

These custom fields will become the basis for your front-end dynamic filtering. Make sure that the products or documents you publish have filled in the corresponding values according to these fields.

archiveFiltersThe core function of tags: build filtering conditions

In the template system of AnQiCMS,archiveFiltersThe tag plays the role of a 'director' in generating dynamic filtering conditions.It will automatically retrieve and organize all available filter parameters and their optional values based on the model you specify and the context of the current page.It is noteworthy that,archiveFiltersTags are mainly used on the document home page or document category list page templates and are usually combined with document pagination lists (archiveListLabel collaborationtype="page") for use.

The basic usage of this tag is as follows:

{% archiveFilters filters with moduleId="1" allText="全部" %}
    {# 筛选条件渲染代码 #}
{% endarchiveFilters %}

Here:

• filtersIt is the custom variable name you create for the filtered results, which will contain all available filter parameter data.
• moduleIdParameters are crucial, as they specify the filter parameters of the content model you want to retrieve. For example,moduleId="1"indicating the parameters for retrieving the article model,moduleId="2"It may represent the parameters of a product model. You can view the IDs of each model in the background "Content Model".
• allTextThe parameter is used to set the display text of the "All" option in the filter conditions, if it is set tofalseit will not be displayed.

WhenarchiveFiltersAfter the tag is executed, it will fill the filtered data into the one you definefiltersIn the variable. ThisfiltersVariables are actually an array where each element represents a filterable parameter category (for example, "Color"). Each parameter category also contains aItemsAn array lists all specific filter values under the category (such as "Red", "Blue"), as well as the corresponding links and the current selected status.

Deploy in the template.archiveFilters

Now, we will combine actual code snippets to demonstrate how to deploy in your AnQiCMS templatearchiveFiltersto build dynamic filtering functionality.

First, make sure you have included in the template.archiveFiltersLabel, and witharchiveListUsed together, so that after the user selects the filter conditions, the filtered document list can be displayed in real time.

The following is a typical layout of a filter function:

<div class="filter-area">
    <div class="filter-header">筛选条件：</div>
    {% archiveFilters filters with moduleId="2" allText="不限" %}
        {% for item in filters %} {# 遍历每个可筛选的参数类别，如：颜色、尺寸 #}
        <ul class="filter-group">
            <li class="filter-name">{{ item.Name }}: </li> {# 显示参数名称，如：颜色 #}
            {% for val in item.Items %} {# 遍历当前参数类别下的所有可选值 #}
            <li class="filter-item {% if val.IsCurrent %}active{% endif %}">
                <a href="{{ val.Link }}">{{ val.Label }}</a> {# 链接到对应的筛选结果页 #}
            </li>
            {% endfor %}
        </ul>
        {% endfor %}
    {% endarchiveFilters %}
</div>

<div class="document-list">
    {# 这里是文档列表，它会根据筛选条件自动更新 #}
    {% archiveList archives with moduleId="2" type="page" limit="10" %}
        {% for item in archives %}
        <div class="document-item">
            <h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4>
            <p>{{ item.Description }}</p>
            {# 假设产品有自定义参数 "processor" 和 "memory" #}
            {% archiveParams params with id=item.Id %}
            {% for param in params %}
                {% if param.FieldName == "processor" %}
                <span>处理器: {{ param.Value }}</span>
                {% elseif param.FieldName == "memory" %}
                <span>内存: {{ param.Value }}</span>
                {% endif %}
            {% endfor %}
            {% endarchiveParams %}
        </div>
        {% empty %}
        <p>抱歉，没有找到符合条件的文档。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 分页导航，配合 archiveList 的 type="page" 使用 #}
    {% pagination pages with show="5" %}
        <div class="pagination-nav">
            {% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}">上一页</a>{% endif %}
            {% for p in pages.Pages %}
            <a class="{% if p.IsCurrent %}active{% endif %}" href="{{ p.Link }}">{{ p.Name }}</a>
            {% endfor %}
            {% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}">下一页</a>{% endif %}
        </div>
    {% endpagination %}
</div>

In this example,archiveFiltersThe label first generates all available filter parameter groups. Each parameter group (such as "Color") under it has a dynamically generatedLink. When the user clicks on a filter option, AnQiCMS will automatically parse this link and pass it as a URL parameter to the server.