When building and operating a website, providing users with an efficient content filtering function is crucial for enhancing user experience and content discoverability.The AnQiCMS (AnQiCMS) with its flexible content model and powerful template tag system, can help us easily implement dynamic generation of content model filtering conditions in templates, such as filtering by attributes.

Content Model and Custom Fields: The Basis of Filtering

One of the core advantages of Anqi CMS is its highly flexible content model.You can create or modify content models based on your business needs, such as articles, products, events, etc., and define exclusive custom fields for each model.These fields can be simple single-line text, numbers, or more complex radio, checkbox, or dropdown lists.It is these custom fields that constitute the basis for our dynamically generated filtering conditions.

For example, a "product" content model may include custom properties such as "colorUsers can greatly improve search efficiency when browsing product lists by being able to filter according to these properties.

The Key to Implementing Dynamic Filtering:archiveFilterstags

The Core of Implementing Dynamic Filtering in AnQiCMS Templates Lies in UsingarchiveFiltersLabel. This label is specifically used to generate a list of filtering conditions based on content model parameters, and automatically handles the creation of links, ensuring seamless connection between front-end display and back-end data filtering.

archiveFiltersThe label will return an array object containing the filtering conditions.Each filter condition corresponds to a custom field in the content model, lists all the options available for filtering this field, as well as the corresponding filter links and the current selected status.

This tag supports the following main parameters:

  • moduleId: Specify the filtering conditions for the content model to be retrieved. For example,moduleId="1"means the filtering conditions for the article model with ID 1.
  • allTextSet the display text for the “All” option, such as “All”, “Unlimited”, and so on. If you do not want to display this option, it can be set tofalse.
  • siteIdIn a multi-site environment, if you need to obtain the filtering conditions of a specific site, you can specify its ID. Usually, it is not necessary to fill in.

archiveFiltersThe data structure generated by the label is roughly as follows:

filters (数组)
  ├── item (每个自定义字段的筛选器)
  │   ├── Name: 字段的中文名称 (如：“颜色”)
  │   ├── FieldName: 字段的数据库名称 (如：“color”)
  │   └── Items (字段可供筛选的选项数组)
  │       ├── val (每个选项)
  │       │   ├── Label: 选项的显示文本 (如：“红色”)
  │       │   ├── Link: 点击此选项后跳转的筛选URL (如：“/products/list?color=red”)
  │       │   └── IsCurrent: 布尔值，表示当前选项是否被选中
  └── ... (其他自定义字段)

Actual operation: step by step build the filtering function

Step 1: Prepare the content model and custom fields (backend operation)

Before starting template development, please make sure you have set the custom fields needed for filtering in the AnQiCMS backend for your content model.

  1. Log in to the AnQiCMS admin panel.
  2. Navigate to "Content Management" -> "Content Model".
  3. Select the model you need to add the filter function (for example, "Product Model
  4. Add or edit fields in the "Content Model Custom Fields" area.
    • Parameter name：User visible field name (e.g., "Product Color").
    • Call field：English name used for template calls (e.g.,color).
    • field type：Suggest selecting "Single Choice
    • Default valueEnter each filter option here, one per line (for example: Red, Blue, Green).

Complete the settings, remember to save and publish some data with these custom field contents for testing on the front end.

Step 2: Call in the templatearchiveFiltersGenerate filtering conditions

Next, we will place in the content list page template (for example, the product list pageproduct/list.html)archiveFilterstags to dynamically generate filtering conditions.

{# 假设我们有一个产品列表页，产品模型ID为2 #}
<div>
    <h3>产品筛选</h3>
    {% archiveFilters filters with moduleId="2" allText="不限" %}
        {% for item in filters %} {# 遍历每个可筛选的自定义字段 #}
        <div class="filter-group">
            <span class="filter-label">{{item.Name}}：</span> {# 字段名称，如“颜色” #}
            <ul class="filter-options">
                {% for val in item.Items %} {# 遍历当前字段的所有筛选选项 #}
                <li class="filter-option {% if val.IsCurrent %}active{% endif %}">
                    <a href="{{val.Link}}">{{val.Label}}</a> {# 筛选选项的显示文本和点击链接 #}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

In this code block:

  • We first usearchiveFilterstags to getmoduleId="2"(for example, the product model) and assign all filtering conditions tofiltersa variable.allText="不限"Then an "Unlimited" option was added for each filter group.
  • Outer layerforto iteratefiltersArray,itemRepresents each custom field (such as "Color
  • Inner layerforto iterateitem.ItemsArray,valRepresents each filter option (such as “Red”, “Blue”).
  • val.LinkIt is an automatic URL generated by the Anqi CMS containing filter parameters, click to complete the filter.
  • val.IsCurrentUsed to determine whether the current option is selected, convenient for us to addactiveclass to highlight display.

Third step: combinearchiveListTags to display filtered content

archiveListThe label is a core label used to display the document list. Its strength lies in its ability toautomatically recognize and process the filtering parameters carried in the URL. This means that when the user clicksarchiveFiltersGenerated filter link after,archiveListwill automatically query and display the corresponding content based on the parameters in the URL (for example,color=red&size=M), without the need for additional programming logic.

`twig {# In the same template, directly below the filtering condition code, or in other areas on the same page #}

{% archiveList archives with moduleId="2" type="page" limit="12" %}
    {% for product in archives %}
    <div class="