Using AnQiCMS'sarchiveFiltersTags to build an efficient and practical dynamic filtering function

In the field of content management and e-commerce, users being able to quickly and accurately find the information they need is the key to improving website experience and conversion rates.Imagine if users could quickly filter the content they want on your website by color, size, brand, and even more specific parameters like processor type, memory size, and other conditions. This would greatly enhance their user experience.archiveFiltersTags are born for this, allowing you to easily build powerful, flexible and diverse dynamic filtering interfaces.

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 introduction, technical documents, etc.), this method is obviously insufficient to meet the users' refined search requirements.

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

Lay a foundation: Content model and custom fields

Before getting a deeper understandingarchiveFiltersBefore the label, we need to understand the source of dynamic filtering.The strength of AnQiCMS lies in its 'flexible content model' feature.All parameters available for filtering must be pre-defined as 'custom fields' under the 'Content Model' in the 'Content Management' module on the backend.

For example, if you want to build a filtering feature 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,Field call: color,Field Type:Single selection (e.g., red, blue, black)
  • Field Name:Size,Field call: size,Field Type:Single selection (e.g., S, M, L, XL)
  • Field Name:Processor,Field call: processor,Field Type:Dropdown selection (e.g., 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 the label: to build filtering conditions

In the template system of AnQiCMS,archiveFiltersTags play the role of a "director" that generates dynamic filtering conditions.It will automatically fetch and organize all available filtering parameters and their options based on the model you specify and the context of the current page.archiveFiltersLabels are mainly used on the template of the document home page or document category list page, and are usually used with document pagination lists (archiveListlabel combined withtype="page") combined.

The basic usage of this tag is as follows:)

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

Here:

  • filtersIt is the custom variable name you use to filter results, and it will include all available filter parameter data.
  • moduleIdParameters are crucial; they specify which filter parameters under which content model you want to retrieve. For example,moduleId="1"represents the parameters to retrieve the article model.moduleId="2"May represent the parameters of a product model. You can view the ID of each model in the "Content Model" backend.
  • allTextParameters used to set the display text of the "All" option in the filter conditions, if set tofalseit will not be displayed.

WhenarchiveFiltersAfter the tag is executed, it will fill the filter data into thefiltersvariables you define.filtersVariables are actually an array, where each element represents a filterable parameter category (such as "Color"). Each parameter category also contains aItemsAn array that lists all specific filter values under the category (e.g., "Red

Deploy in the templatearchiveFilters

Now, we will combine actual code snippets to demonstrate how to deploy in your AnQiCMS template.archiveFiltersTo build dynamic filtering functions.

Firstly, please make sure you have included in your template.archiveFiltersTags, and witharchiveListused together with tags so that the document list filtered after the user selects a filter condition can be displayed in real time.

The following is a typical layout for a filtering feature:

<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 tag first generates all available filter parameter groups. Each specific option under a parameter group (such as "Color") has a dynamically generatedLinkWhen the user clicks on a filter option, AnQiCMS will automatically parse this link and pass it as a URL parameter to the server.