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

Manage content in AnQi CMS, especially when the website content becomes 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.Today, let's delve into a very practical tag in Anqi CMS—archiveFiltersIt can help us easily add advanced filtering features to the document list.

The cornerstone of a flexible content model: customizable filtering fields.

Further inarchiveFiltersBefore the label, we first need to understand the core advantage of AnQi CMS's 'Flexible Content Model'.The AnQi CMS allows us to customize content models according to business needs, which means you can add dedicated fields for different types of content such as articles, products, etc.

For example, if you run a real estate website, in addition to the basic title and content, you may also need attributes such as 'property type' (such as residential, commercial), 'area range', 'location', etc.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 filtering purposes, the most commonly used field types are single-choice, multiple-choice, or dropdown selection.After you set these fields and fill in the corresponding values for the document, they becomearchiveFiltersProvided with rich data sources. Anqi CMS will automatically identify these custom fields that can be used for filtering, so that they can be displayed and interacted with on the front end.

archiveFiltersTag: Intelligent guide for filtering function

archiveFiltersThe role of the label is to automatically generate a series of clickable filter options based on the filtering fields you define in the content model.It's like an intelligent guide that can understand the structure of your content and present a clear and practical filter interface to visitors.

This label is usually used in the template of document list pages or category pages, witharchiveListlabels used together to complete filtering and content display.

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

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

There are several key parameters:

  • filters: You can define a variable name for the output result of this tag, for example, it is herefilters. This variable will contain all available filter condition data, and you need to display them through a loop.
  • moduleIdThis parameter is very important, it tellsarchiveFiltersWhich content model (such as article model, product model, or a custom model) do you want to generate the filtering conditions for. For example,moduleId="1"typically represents an article model,moduleId="2"Represents a product model. By specifying the model ID, you can ensure that only the filter options related to the current list content are displayed.
  • allTextThis parameter is used to set the display text of the 'All' option, such as 'All', 'Unlimited', etc. If you do not want to display the 'All' option, you can set it tofalse.

In-depthfiltersthe structure of the variable

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

Let's seefiltersThe structure inside 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 array of all available filter options under the filter group.

Anditem.ItemsEach in the arrayvalAn object, it contains specific filtering options information:

  • val.Label: This is the display text of the filtering options, for example 'Residential', 'Commercial', '50-100 square meters.'
  • val.LinkThis is the URL that will be redirected after clicking the filter option. This URL will include the corresponding query parameters, such as/list.html?house_type=住宅。“This isarchiveFiltersThe core mechanism of the tag to implement the filtering function.
  • val.IsCurrentThis is a boolean value used to determine whether the current option is selected. You can use this property to addactivestyles to give users clear visual feedback.

LinkagearchiveList: Filter logic completed

archiveFiltersThe tag generates the filter link, but it is the one that actually performs the content filtering and displays the results, which isarchiveListtags. These two tags work closely together. When the user clicksarchiveFiltersWhen generating the filter link, the page URL changes, carrying new filter parameters. At this time, the page containsarchiveListThe tag will automatically read these parameters from the URL and re-query and display documents that meet the criteria.

Ensure your:archiveListthe tag is settype="page"so that it can correctly handle pagination and filtering parameters in URLs.

Below, we illustrate this through an example of a real estate website.archiveFilters/archiveListandpaginationHow these three tags work together:

`twig {# Assume this is a real estate 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>