How to use `archiveFilters` tag to implement dynamic display of list with multiple conditions?

How to let users quickly find the information they need on the website is a key to improving user experience and conversion rate.When the types of website content are numerous, and each type of content has multiple attributes to choose from, providing a flexible multi-condition filtering function becomes particularly important.archiveFiltersTags, which can help us easily implement dynamic content filtering lists, 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 for '3 bedrooms and 2 living rooms' or 'parking available' listings.If there is no multi-condition filtering, you may need to keep clicking, going back, and even searching like a needle in a haystack, which will undoubtedly greatly reduce your patience.

The advantages of multi-condition filtering are:

• Enhance user experience:Users can quickly narrow down the search range according to their specific needs and accurately locate the target content.
• Enhanced content discovery:Hidden in the deep content can be more easily found by users through the combination of different dimensions.
• Optimize SEO performance:The dynamically generated filter result page usually has more specific URL 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 the Anqi CMS,archiveFiltersTags are the tools to solve this pain point. They are specifically designed for document list pages, capable of automatically generating filtering conditions based on custom fields defined in the content model, and combining with document lists (archiveList）Label, to achieve the dynamic display of content.

To use this tag, you need to make sure that the custom fields for filtering are defined in your content model.For example, if you have a "Real EstatearchiveFiltersLabel can identify and generate the basis for filtering conditions.

archiveFiltersThe basic usage of Label is very intuitive:

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

Here,moduleIdThe parameter specifies the content model document for which you want to generate a filter condition, for examplemoduleId="1"可能代表文章模型，moduleId="2"May represent a product model.allTextThe parameter allows you to customize the display text of the 'All' option, if set tofalseit will not be displayed.

Deep understandingfiltersVariable structure

When you arearchiveFiltersTags block usagefiltersA variable is actually an array object containing multiple filter groups. Each filter group (item）All of them represent 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”.
• FieldName：This is the internal identifier name of the custom field corresponding to this filter condition, for examplehouse_type.
• Items：This is the most important part, which is an array containing specific filter options. Each option (val) contains:
  • Label：Filter option display name, such as 'Residential', 'Apartment'.
  • Link：Click this option to navigate to the URL, which will include the current filtering conditions and other selected conditions to achieve dynamic updates.
  • IsCurrentAn boolean value indicating whether the current option is selected, convenient for adding highlight styles in templates.

How to build a dynamic filter list in templates

Now, let's combinearchiveListandpaginationTag, see how to fully implement a multi-condition filter for a document list in a template.

Step 1: Build the filter condition area

In your list page template (for example)article/list.htmlorproduct/list.html）in，firstly usingarchiveFiltersTag to generate 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 above code,filterGroupsis what we provide forarchiveFiltersLabel-defined variable name. Through two layersforLoop, we first traversed all the filter groups (such as 'House Type', 'House Style'), and then traversed all the filter options within each group (such as 'Residential', 'Apartment').val.LinkIt will automatically generate a URL containing the filter parameters.val.IsCurrentIt is used to add the currently selected filter options.activeClass, providing visual feedback.

Step 2: Display the list of documents after dynamic filtering.

Next, in the same template, you need to usearchiveListtags to display the document list. The key is,archiveListTags intype="page"mode, it will intelligently read all the filtering parameters in the current URL (includingarchiveFiltersLabel generated parameters), and automatically apply these parameters 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 what we provide forarchiveListVariable name defined by the label.type="page"Indicates that this is a pagination list,limit="10"Then 10 documents per page are set. When the user clicks the filter condition, the page URL will change,archiveListWill automatically requery and display the documents that match the new URL parameters.

Step 3: Add pagination feature

In order for users to browse all the filtered results, it is also necessary to combinepaginationLabel. This label will also automatically adapt.archiveFiltersGenerated URL, ensure that the pagination links carry the correct filter 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,pagesYespaginationThe variable name defined by the label.It generates links containing "Previous page

Actual case: Property list filtering

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

`twig

<h3 class="