How to implement complex parameter filtering conditions for the `archiveFilters` label in the dynamic display on the front-end?

In website content operation, providing users with flexible and efficient filtering functions is an important link in improving user experience and helping users quickly locate the information they need. AnQiCMS (AnQiCMS) fully understands this, and through its powerful template tag system, especiallyarchiveFiltersTags, making it easy to dynamically display complex parameter filtering conditions.

Core Features and Implementation Principles

archiveFiltersThe core function of the label is to automatically generate frontend filter conditions and corresponding dynamic links based on the custom fields of the content model. When a user clicks on a filter condition, the page URL will automatically append the corresponding parameters, and the backend'sarchiveListThe label will dynamically adjust the display content of the document list according to these URL parameters, thereby achieving precise filtering.This process does not require manual writing of complex backend logic, greatly simplifying development and maintenance work.

Preparation: Set up the screening foundation

to usearchiveFiltersTags, you need to do some preparation work first in the security CMS background:

  1. Custom content model fields:archiveFiltersThe label depends on the predefined custom fields in the content model. Only those fields set to the type of "Single Selection", "Multiple Selection", or "Dropdown Selection" can bearchiveFiltersLabel recognition and generate filtering conditions.

    • For example, if you are building a real estate website, you can create a content model named "Real Estate Model". In this model, you can add the following custom fields:
      • “House Type” (Single choice, options include "Residential
      • “Layout” (single choice, options include "one-bedroom
      • “Degree of decoration”（Dropdown selection, options include “Raw”, “Semi-finished”, “Finished”） The "default value" filled in these fields in the background will become the "options" of the front-end filtering conditions.

  2. Label application scenario is clear:archiveFiltersLabels are mainly designed for document homepage or template pages of document categories, and are usually associated with document pagination lists (i.e.archiveListTagstype="page"Mode) combined to ensure that the screening results can be correctly paginated.

archiveFiltersIn-depth analysis of tag usage

archiveFiltersThe basic usage of the tag is as follows:

{% archiveFilters filters with moduleId="..." allText="..." %}
    {# 循环输出筛选组 #}
    {% 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 %}
{% endarchiveFilters %}

Let's break down the parameters of this tag and the returned variables in detail:

  • moduleIdParameters： ThisarchiveFiltersA very important parameter in the label. It is used to specify the filtering conditions for the content model to be retrieved. For example, if you want to filter documents of the "article model",moduleIdis usually set to1If the filter "Product Model" is selected,moduleIdmay be set to2this ID can be viewed in the "Content Model" management interface on the backend. By specifyingmoduleIdThe system can accurately retrieve the filtering fields defined under the corresponding model.

  • allTextParametersThis parameter is used to set the display text of the "All" option in the filtering conditions. For example,allText="不限"The text will display "Any". If you do not want to display the "All" option, you can set it tofalsesuch asallText=false.

  • filtersvariable:archiveFiltersThe tags will organize the generated filter conditions into a namefiltersthe array object (of course, you can customize other variable names). thisfiltersEach element in the array represents a filter condition group, for example, “House Type” is a group, “Layout” is another group. Each group object contains the following key attributes:

    • item.NameThis is the display name of the filter group, such as “House Type”, “Layout” etc., which is usually presented directly on the front-end interface.
    • item.FieldNameThis is the field name used in the URL parameters of the filter group, automatically generated by the system, used for identifying specific filtering conditions on the backend.
    • item.ItemsThis is an inner array that contains all available filter options under the current filter group.

  • valVariables (in)item.ItemsLooping):item.ItemsEach element in the array is a filter option object, it includes the following key attributes:

    • val.LabelThis is the display text of the filter option, such as 'Residential', 'One-bedroom', etc.
    • val.Link:This is the core of the dynamic filtering implementation.val.Linkis a pre-built URL, which will automatically redirect the page to the corresponding filter parameters when the user clicks on the link. For example, clicking on "Residential" may redirect to.../list?houseType=住宅.
    • val.IsCurrentThis is a boolean value indicating whether the current filter option has been selected. You can use this property to add CSS styles to the currently selected option (such asactiveEnglish"), thus highlighting in the frontend to enhance the user experience.

Collaborative work:archiveListWithpagination

archiveFiltersThe tag itself is only responsible for generating links for filtering conditions, and the actual data filtering is byarchiveListLabel is completed. When the user clicksarchiveFiltersThe URL will contain the corresponding filtering parameters after generating the link. At this point,archiveListLabels (set astype="page"Pattern) will automatically identify these URL parameters and request data that matches the filtering conditions.

At the same time,paginationThe pagination label will also intelligently generate the correct pagination links based on the current filter state, ensuring that users can navigate through the filtered results normally.

Practical Example: Build a property filter

Suppose you have already defined custom fields such as 'House Type' and 'Layout' for the 'Real Estate Model' in the background as mentioned earlier. Now, we can implement a dynamic filter in the front-end template like this:

`twig {# 假设这是房产列表页面，moduleId=“1”是房产模型的ID #}

<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="{% if val.IsCurrent %}active{% endif %}">
                <a href="{{val.Link}}">{{val.Label}}</a>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endfor %}
{% endarchiveFilters %}

{# 文档列表代码：会根据URL中的筛选参数自动加载 #}

{% archiveList archives with moduleId=“1” type=“page” limit=“10” %}

{% for item in archives %}
<div class="property-item">
    <a href="{{item.Link}}">
        <img src="{{item.Thumb}}" alt="{{item.Title}}">
        <h3>{{item.Title}}</h3>
        <p>{{item.Description}}</p>
        {# 显示自定义字段，例如“房屋类型”和“户型” #}
        {% archiveParams params with id=item.Id %}
            {% for param in params %}
                {% if param.FieldName == "houseType" %}
                    <span>类型: {{param.Value}}</span>
                {% elseif param.FieldName == "houseLayout" %}
                    <span>户型: {{param.Value}}</span>
                {% endif %}
            {% endfor %}
        {% endarchiveParams %}
        <span>阅读量: {{item.Views}}</span>
    </a>
</div>
{% empty %}
<p>没有找到符合条件的房产信息。</p>
{% endfor %}

{% endarchiveList %}

{# 分页代码：会根据筛选结果自动调整分页链接 #}

{% pagination pages with show="5" %}
    {# 首页 #}
    <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
    {# 上