How to use the `archiveFilters` tag to implement dynamic display of a multi-condition filter list?

How to make users quickly find the information they need in website operation is a key factor in improving user experience and conversion rate.When the types of content on a website are numerous, and each type of content has various attributes to choose from, providing a flexible multi-condition filtering function becomes particularly important.AnQiCMS (AnQiCMS) provides powerfularchiveFiltersTags can help us easily implement dynamic content list filtering, making your website content come alive.

Why do we need multi-condition filtering?

Imagine you are browsing a real estate website, you may not only want to see 'residential', but also further filter 'three bedrooms and two living rooms' or 'parking available' listings.If there is no multi-condition filtering, you may need to keep clicking, going back, even searching like a needle in a haystack, which will undoubtedly greatly reduce your patience.

The advantages of multi-condition filtering are:

• Improve user experience:Users can quickly narrow down their search scope according to their specific needs, accurately locating the target content.
• Enhance content discovery:Content hidden in the depths can be more easily found by users through the combination of different dimensions筛选
• Optimize SEO performance:Pages with dynamically generated filter results typically have more specific URLs and content combinations. If combined with pseudo-static rules, it is beneficial for search engines to crawl and understand, bringing more long-tail traffic to the website.

archiveFiltersThe charm of tags

In AnQi CMS,archiveFiltersThe tag is the tool to solve this pain point. It is designed specifically for the document list page, able to automatically generate filtering conditions based on the custom fields defined in the content model, and combine them with the document list (archiveList) Tag, to dynamically display content.

To use this tag, you need to make sure that the custom fields available for filtering have been defined in your content model.For example, if you have a "real estate" content model, you can add fields such as "house type", "house style", "special configuration", etc., and set available options for these fields (such as "residential", "apartment";“One room”、“Two rooms”；“Semi-finished”，“Furnished”and so on）。These fields arearchiveFiltersTag can recognize and generate the basis for filtering conditions.

archiveFiltersThe basic usage of tags is very intuitive:

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

here,moduleIdThe parameter specifies which document of the content model you want to generate filtering conditions for, for example.moduleId="1"may represent the article model,moduleId="2"may represent a product model.allTextParameters allow you to customize the display text for the 'All' option, if set tofalseit will not be displayed.

Deep understandingfiltersVariable structure

When you arearchiveFiltersUsed within tag blocksfiltersWhen it is a variable, it is actually an array object containing multiple filter groups. Each filter group (item) represents a custom field defined in the content model, it has the following properties:

• Name: This is the display name of the filter condition, such as "House Type", "Layout".
• FieldNameThis is the internal identifier name of the custom field corresponding to the filter condition, for examplehouse_type.
• ItemsThis is the most important part, it is an array containing specific filter options. Each option (val) also includes:
  • Label: Display name of the filter option, such as 'Residential', 'Apartment.'
  • LinkClicking this option will redirect to the URL, which will include the current filter conditions and other selected conditions to achieve dynamic updates.
  • IsCurrentA boolean value indicating whether the current option is selected, convenient for adding highlight styles in the template.

How to build a dynamic filter list in the template

Now, let's combinearchiveListandpaginationLabel, see how to fully implement a multi-condition filtering document list in the template.

Step 1: Build the filtering condition area

In your list page template (for examplearticle/list.htmlorproduct/list.html), first usearchiveFiltersTag generation filter conditions.

<div class="filter-area">
    <h3>筛选条件</h3>
    {% archiveFilters filterGroups with moduleId="1" allText="不限" %}
        {% for item in filterGroups %}
            <div class="filter-group">
                <span class="filter-name">{{ 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 the code above,filterGroupsis forarchiveFiltersVariable name defined by tag. Through two layers.forLoop, we first traversed all the filter groups (such as “House Type”, “House Type”), and then traversed all the filter options within each group (such as “Residential”, “Apartment”).val.LinkWill automatically generate a URL containing filter parameters,val.IsCurrentUsed to add a class for the currently selected filter option,activeto provide visual feedback.

Step two: Display the document list after dynamic filtering.

Next, in the same template, you need to usearchiveListtags to display the document list. The key point isarchiveListThe tag is intype="page"mode will intelligently read all the filtering parameters in the current URL, includingarchiveFiltersLabel-generated parameters), and these parameters are automatically applied to the document query.

<div class="document-list">
    {% archiveList archives with moduleId="1" type="page" limit="10" %}
        {% for doc in archives %}
            <div class="document-item">
                <a href="{{ doc.Link }}">
                    <h4>{{ doc.Title }}</h4>
                    <p>{{ doc.Description|truncatechars:100 }}</p>
                    <span class="views">阅读量：{{ doc.Views }}</span>
                </a>
            </div>
        {% empty %}
            <p>很抱歉，没有找到符合条件的文档。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

here,archivesis forarchiveListVariable names defined by the label.type="page"Indicates that this is a pagination list,limit="10"It sets the display of 10 documents per page. When the user clicks the filter condition, the page URL changes,archiveListThe document will be automatically re-queried and displayed according to the new URL parameters.

Step 3: Add pagination function

In order for users to browse all the filtered results, it is necessary to combinepaginationLabel. This label will also automatically adaptarchiveFiltersThe generated URL, ensure that the pagination links carry the correct filtering parameters

<div class="pagination-area">
    {% pagination pages with show="5" %}
        <ul>
            {% if pages.PrevPage %}
                <li><a href="{{ pages.PrevPage.Link }}">上一页</a></li>
            {% endif %}
            {% for pageItem in pages.Pages %}
                <li {% if pageItem.IsCurrent %}class="active"{% endif %}>
                    <a href="{{ pageItem.Link }}">{{ pageItem.Name }}</a>
                </li>
            {% endfor %}
            {% if pages.NextPage %}
                <li><a href="{{ pages.NextPage.Link }}">下一页</a></li>
            {% endif %}
        </ul>
    {% endpagination %}
</div>

here,pagesIspaginationThe label defines a variable name. It generates links that include "Previous page", "Next page", and the middle page numbers, which will automatically carry the current filtering conditions, ensuring that the filtering state is retained when the user switches between pages.

Actual case: Real estate list filtering

In the actual application of AnQi CMS, if your website has a real estate listing page, you may want users to be able to filter by 'house type', 'area', 'price range', and other conditions.

`twig

<h3 class="