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

Content Model and Custom Fields: The Foundation of Filtering

One of the core advantages of Anqi CMS is its highly flexible content model.You can create or modify content models according to 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, multiple choice, or dropdown lists.These custom fields are the basis for the dynamic generation of filtering conditions.

For example, a "product" content model may include custom attributes such as "color" (single selection), "size" (multiple selection), and "material" (drop-down selection).When users browse the product list, if they can filter based on these attributes, it will greatly improve search efficiency.

The Key to Implementing Dynamic Filtering:archiveFiltersTag

To implement dynamic content model filtering in the AnQiCMS template, the core lies in usingarchiveFiltersThe tag is specifically used to generate a list of filtering conditions based on content model parameters, and automatically handles the generation of links, allowing seamless connection between front-end display and back-end data filtering.

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

This tag supports the following main parameters:

  • moduleId: Specify the filtering conditions for the content model to be retrieved. For example,moduleId="1"indicates the filtering conditions for the article model with ID 1.
  • allText: Set the display text for the "All" option, such as "All", "Unlimited", etc. If you do not want to display this option, you can set it tofalse.
  • siteIdIn a multi-site environment, if you need to retrieve the filtering conditions of a specific site, you can specify its ID. It is usually not necessary to fill in.

archiveFiltersThe data structure generated by tags is roughly as follows:

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

Perform the actual operation: Build the filtering function step by step

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 backend.
  2. Navigate to 'Content Management' -> 'Content Model'.
  3. Select the model you need to add a filter function (for example, "Product Model"), click "Modify."}
  4. Add or edit fields in the "Content Model Custom Fields" area.
    • Parameter Name: User visible field name (e.g., "Product Color").
    • Field invocation: Name used for template calls (e.g.,color)
    • Field typeIt is recommended to choose 'Single selection', 'Multiple selection', or 'Dropdown selection', as these types are most suitable as filtering conditions.
    • Default valueEnter each filter option here, one per line (for example: red, blue, green).

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

Step two: Call in the template.archiveFiltersGenerate filtering conditions

Next, we will be in the content list page template (for example, the product list pageproduct/list.html), usingarchiveFilterstags to dynamically generate filter 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 usearchiveFilterstag to obtainmoduleId="2"all filter conditions of (for example, the product model) and assign them tofiltersVariable.allText="不限"Add an 'Any' option for each filter group.
  • Outer layerforLoop throughfiltersarray,itemRepresents each custom field (such as 'Color', 'Size').
  • Inner layerforLoop throughitem.Itemsarray,valRepresents each filtering option (such as "red", "blue").
  • val.LinkIt is an auto-generated URL by Anqi CMS that includes filtering parameters, click to complete the filtering.
  • val.IsCurrentUsed to determine whether the current option is selected, convenient for us to addactiveclass to highlight.

Third step: CombinearchiveListTags display filtered content

archiveListTags are used to display the core tags of the document list. Its strength lies in, being able toAutomatically identify and process the filtering parameters carried in the URLThis means that when the user clicksarchiveFiltersafter generating the filtering link,archiveListit will automatically determine the parameters in the URL (such ascolor=red&size=MQuery and display the corresponding content without additional programming logic.

`twig {# In the same template, immediately below the filter condition code, or in other areas of the same page #}

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