How to implement complex parameter filtering conditions for the dynamic display of the `archiveFilters` tag on the front end?

In website content operation, providing users with flexible and efficient filtering functions is an important link to improve user experience and help users quickly locate the information they need. AnQiCMS (AnQiCMS) understands this point, especially through its powerful template tag system, especiallyarchiveFiltersTags make it easy for the front-end to dynamically display complex parameter filtering conditions.

Core Functionality and Implementation Principles

archiveFiltersThe core function of the label is to automatically generate frontend filtering conditions and corresponding dynamic links based on the custom fields of the content model. When the user clicks on a filtering condition, the page URL will automatically add the corresponding parameters, the background'sarchiveListTags will dynamically adjust the display content of the document list based on 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 filtering foundation

To usearchiveFiltersLabels, first you need to do some preparation in the Anqi CMS background:

  1. Custom content model fields:archiveFiltersLabels depend on the custom fields predefined in the content model. Only those set to the types of "single-choice", "multiple-choice", or "dropdown" 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”, “Commercial”, “Office Building”)
      • “Type of apartment”
      • “Degree of decoration” (drop-down selection, options include “raw”, “simple decoration”, “finishing”) The default values filled in these fields in the background will become the “options” of the front-end filtering conditions.

  2. Specific label application scenario:archiveFiltersLabels are mainly designed for the homepage of documents or template pages for document categories, and they are usually associated with document pagination lists (i.e.archiveListlabel'stype="page"Combine the pattern ()} to ensure that the pagination of the filtering results is correct.

archiveFiltersIn-depth analysis of tag usage

archiveFiltersThe basic usage of tags 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 and variables returned by this tag in detail:

  • moduleIdParameter: This isarchiveFiltersA very important parameter in the tag. It is used to specify the filtering conditions for which content model to retrieve. For example, if you want to filter documents of the "article model",moduleIdis usually set to1If filtered by "Product Model",moduleIdmay be set to2. This 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.

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

  • filtersVariable:archiveFiltersThe tag will organize the generated filter conditions into a namedfiltersAn array object (of course, you can customize other variable names). ThisfiltersEach element of the array represents a filter condition group, for example, 'House Type' is a group, and 'House Structure' 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', 'Room Layout', etc., which is usually displayed 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 for identifying specific filtering conditions.
    • item.ItemsThis is an inner array that contains all available filter options under the current filter group.

  • valVariable (initem.Itemsin the loop):item.ItemsEach element in the array is a filter option object that contains the following key attributes:

    • val.Label: This is the display text of the filter option, such as 'Residential', 'One-bedroom', etc.
    • val.Link:This is the core of implementing dynamic filtering.val.LinkIs a pre-built URL, when the user clicks on this link, the page will automatically jump and carry the corresponding filtering parameters. For example, clicking on "Residential" may jump to.../list?houseType=住宅.
    • val.IsCurrent: This 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 asactiveClasses), thus highlighting on the front end to improve user experience.

Collaborative work:archiveListwithpagination

archiveFiltersThe tag itself is only responsible for generating links for filter conditions, and the actual data filtering is done byarchiveListComplete with tags. When the user clicksarchiveFiltersAfter generating the link, the URL will contain the corresponding filter parameters. At this point, the page onarchiveListTag (set as)type="page"The pattern will automatically recognize these URL parameters and request data from the backend that meets the filtering conditions.

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

Practical example: Build a property filter

Assuming you have already defined custom fields such as "house type" and "house style" for the "real estate model" as mentioned earlier, now we can implement a dynamic filter in the front-end template:

`twig {# Assume this is a real estate list page, moduleId="1" is the ID of the real estate model #}

<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 %}

{# Document list code: it will automatically load based on the URL filter parameters #}

{% 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 code: it will automatically adjust the pagination links based on the filtering results #}

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