How to use the `archiveFilters` tag to add advanced filtering functionality to the document list of the AnQi CMS?

Manage content in AnQi CMS, especially when the website content becomes increasingly rich, how to help visitors quickly find the information they need has become the key to improving user experience.If your website offers a diverse range of products or services, or contains a large number of articles with different attributes, then an efficient filtering function will be essential.archiveFiltersIt can help us easily add advanced filtering features to the document list.

The cornerstone of flexible content models: custom filtering fields

Going deeperarchiveFiltersBefore the label, we first need to understand the core advantage of the "Flexible Content Model" of Anqi CMS.The AnQi CMS allows us to customize content models based on business needs, which means you can add dedicated fields for different types of content such as articles, products, etc.

For example, if you operate a real estate website, in addition to basic title and content, you may also need properties such as "Type of Property" (such as residential, commercial), "Area Range", "Location", and so on.These custom fields are the foundation for our advanced filtering.

When creating or editing content models in the background, you can add these custom fields as needed.For the filtering function, the most commonly used field type is radio, checkbox, or dropdown selection.archiveFiltersProvided with rich data sources. The Safe CMS will automatically identify these custom fields that can be used for filtering, so that they can be displayed and interacted with on the frontend.

archiveFiltersTag: intelligent guide for filtering function

archiveFiltersThe function of the tag is to automatically generate a series of clickable filtering options based on the filtering fields you define in the content model.It is like an intelligent guide, capable of understanding the structure of your content and presenting visitors with a clear and practical filtering interface.

This tag is usually used in document list page or category page templates, witharchiveListthe tag used together to complete filtering and content display.

UsearchiveFiltersThe tag is very intuitive, and its basic structure is as follows:

{% archiveFilters filters with moduleId="1" allText="全部" %}
    {# 在这里循环输出筛选条件 #}
{% endarchiveFilters %}

Here are some key parameters:

  • filtersYou can define a variable name for the output of this tag, for example here isfiltersThis variable will contain all available filter condition data, and you need to display them through a loop.
  • moduleIdThis parameter is very important, it tellsarchiveFiltersYou want to generate filter conditions for which content model (such as article model, product model, or a custom model you have created). For example,moduleId="1"usually represents an article model,moduleId="2"Represents a product model. By specifying the model ID, you can ensure that only filtering options related to the current list content are displayed.
  • allTextThis parameter is used to set the display text of the "Allfalse.

DeepenfiltersThe structure of the variable

When you go through{% archiveFilters filters ... %}After obtaining the data,filtersThe variable actually is an array that contains multiple filter groups.Each filter group represents a selectable field in your content model, for example, 'House Type' is a filter group.

Let's seefiltersThe internal structure of the variable:

{% for item in filters %}
    <ul>
        <li>{{item.Name}}: </li> {# 筛选组的名称，例如“房屋类型” #}
        {% for val in item.Items %}
        <li class="{% if val.IsCurrent %}active{% endif %}">
            <a href="{{val.Link}}">{{val.Label}}</a>
        </li>
        {% endfor %}
    </ul>
{% endfor %}

In the above code snippet:

  • item.Name: This is the display name of the filter group, such as “House Type”, “Area Range”.
  • item.FieldNameThis is the field name corresponding to the filter group in the content model, for example, you may set it in the background.house_typeorarea_range.
  • item.ItemsThis is the list of all available filter options under the filter group, which is also an array.

whileitem.ItemsEach item in thevalThe object contains specific filtering options information:

  • val.LabelThe display text of the filtering options, for example “Residential”, “Commercial”, “50-100 square meters”.
  • val.LinkThis is the URL that jumps after clicking the filter option. This URL will include the corresponding query parameters, such as/list.html?house_type=住宅.archiveFiltersThe core mechanism of the tag implementation of the filter function.
  • val.IsCurrentThis is a boolean value used to determine whether the current option is selected. You can use this property to add style to selected options for clear visual feedback.activeStyle, providing clear visual feedback to the user.

LinkagearchiveList：English completion of filtering logic

archiveFiltersThe tag generates a filter link, but the actual content filtering and result display arearchiveListtags. These two tags are closely coordinated. When the user clicksarchiveFiltersGenerated when creating a filter link, the page URL will change, carrying the new filter parameters. At this time, thearchiveListThe label will automatically read these parameters from the URL and query and display documents that match them.

Ensure your:archiveListThe label has been set.type="page"So that it can correctly handle pagination and filtering parameters in URLs.

Next, we will demonstrate using an example of a real estate website.archiveFilters/archiveListandpaginationHow these three tags work together:

English translation: `twig {# This is the property list page template #}

<h2>房产筛选</h2>
{# 参数筛选代码 #}
{% archiveFilters filters with moduleId="1" 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="filter-item {% if val.IsCurrent %}active{% endif %}">
                <a href="{{val.Link}}">{{val.Label}}</a>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endfor %}
{% endarchiveFilters %}


<h2>房产列表</h2>
{# 文档列表代码：注意 type="page"，它会自动处理URL中的筛选参数 #}
{% archiveList archives with moduleId="1" type="page" limit="10" %}
    {% for item in archives %}
    <div class="archive-item">
        <a href="{{item.Link}}">
            <h3>{{item.Title}}</h3>
            <p>{{item.Description}}</p>
            <div class="meta-info">
                <span>所在分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>浏览量：{{item.Views}} 阅读</span>
            </div>
        </a>
        {% if item.Thumb %}
        <a href="{{item.Link}}">
            <img alt="{{item.Title}}" src="{{item.Thumb}}">
        </a>
        {% endif %}
    </div>
    {% empty %}
    <p>抱歉，没有找到符合条件的房产信息。</p>
    {% endfor %}
{% endarchiveList %}

{# 分页代码，同样会自动根据筛选条件生成正确的页码链接 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        <a class="pagination-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
        {% if pages.PrevPage %}
        <a class="pagination-link" href="{{pages.PrevPage.Link}}">上一页</a>
        {% endif %}
        {% for item in pages.Pages %}
        <a class="pagination-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
        {% endfor %}
        {% if pages.NextPage %}
        <a class="pagination-link" href="{{pages.NextPage.Link}}">下一页</a>