How to handle user prompts when the filtering result is empty when using the `archiveFilters` tag?

Optimize AnQiCMSarchiveFiltersThe empty result prompt for labels, enhancing user experience

In the template development of AnQiCMS,archiveFiltersThe tag is undoubtedly a powerful tool for building flexible content filtering functions.It allows us to provide users with dynamic filtering options based on predefined document parameters, thus helping users quickly locate the content they are interested in.However, whether the filter options themselves are empty, or the user does not find matching content after applying the filter conditions, if these two 'empty result' states are not handled properly, they may both lead to a decline in user experience.As an experienced website operations expert, I know that clear and friendly user prompts are crucial for retaining visitors and improving website usability.

This article will delve into the use ofarchiveFiltersHow to elegantly handle various situations where the filter results are empty, and provide practical code examples to help you optimize the user experience of your website.

UnderstandingarchiveFiltersLabel and its working principle

First, let's take a look back atarchiveFiltersThe core function of the label.It is mainly used on the document list page or the model homepage, to generate a series of clickable filtering conditions based on the custom fields of the content model.archiveFiltersWhen labeling, it will return a variable containing all the filter groups (for examplefilters). Each filter group contains all the optional values under the parameter and their corresponding links.

The basic structure is usually as follows:

{% archiveFilters filters with moduleId="1" allText="全部" %}
    {% for item in filters %}
        {# ... 渲染单个筛选组（如“房屋类型”、“价格区间”）... #}
        {% for val in item.Items %}
            {# ... 渲染筛选值（如“住宅”、“公寓”）及其链接 ... #}
        {% endfor %}
    {% endfor %}
{% endarchiveFilters %}

It should be noted that,filtersA variable is an array object, which contains multiple filter groups (item) eachitemalso contains aItemsarray used to list specific filter values.

Scene one: No filtering conditions available (filtersThe variable is empty)

Imagine that the user comes to your website, full of anticipation, wanting to filter content based on various conditions, only to find that the filter area is empty, with no options to choose from.This will undoubtedly confuse them, and they may even mistakenly think that the website's features are missing.

This situation usually occurs when you have configured a content model forarchiveFiltersBut the model under does not define any custom fields that can be used for filtering, or there is no matching filter data in the current context, causingarchiveFiltersTag returnsfiltersThe variable itself is an empty array.

处理方案：

AnQiCMS的模板引擎（类似于Django模板）提供了for...empty语法，这正是处理这种“列表为空”情况的利器。您可以在forAdd a loop inside{% empty %}whenfiltersthe array is empty, the content inside the block will be rendered.

<div>
    <h3>筛选条件：</h3>
    {% archiveFilters filters with moduleId="1" allText="全部" %}
        {% for item in filters %}
            <ul class="filter-group">
                <li class="filter-name">{{ item.Name }}: </li>
                {% for val in item.Items %}
                    <li class="filter-item {% if val.IsCurrent %}active{% endif %}">
                        <a href="{{ val.Link }}">{{ val.Label }}</a>
                    </li>
                {% endfor %}
            </ul>
        {% empty %}
            <p class="no-filters-message">抱歉，当前暂无筛选条件可供选择。</p>
        {% endfor %}
    {% endarchiveFilters %}
</div>

This way, when there are no filter conditions, users will see a clear prompt message instead of a blank area, which greatly enhances the user-friendliness.

Scene two: No matching documents after filtering (archiveListis empty)

Another common situation is that the filtering conditions themselves exist, and users have actively selected certain conditions (such as selecting

In this case,archiveFiltersThe label may have rendered the filter options normally, but then used to display the document list,archiveListbut found that thearchivesvariable is empty.

处理方案：

is similar to handling an empty filter condition,archiveListLabels are supportedfor...emptySyntax. You can add it in the loop to render document lists.forto display a friendly prompt when no matching document is found.{% empty %}blocks so that a friendly prompt is displayed when no matching document is found.

<div>
    <h3>筛选结果：</h3>
    {% archiveList archives with type="page" limit="10" %}
        {% for item in archives %}
            <div class="document-item">
                <a href="{{ item.Link }}">
                    <h4>{{ item.Title }}</h4>
                    <p>{{ item.Description }}</p>
                </a>
            </div>
        {% empty %}
            <div class="no-results-message">
                <p>抱歉，没有找到符合您筛选条件的文档。</p>
                <p>请尝试调整筛选条件，或许能找到您感兴趣的内容。</p>
                {# 提供一个清除所有筛选条件的链接，帮助用户快速重置 #}
                <a href="{{ urlParams.clearLink }}" class="btn-clear-filters">清除所有筛选</a>
            </div>
        {% endfor %}
    {% endarchiveList %}
    {# 确保分页标签只在有内容时显示，避免空列表下的分页混乱 #}
    {% if archives %}
        <div class="pagination-area">
            {% pagination pages with show="5" %}
                {# ... 分页链接渲染 ... #}
            {% endpagination %}
        </div>
    {% endif %}
</div>

In this example, we not only provided the "not found