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

Optimize AnQiCMS inarchiveFiltersEmpty result prompt of tags, improve user experience

In AnQiCMS template development,archiveFiltersTags are 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, thereby helping them quickly locate the content they are interested in.However, whether the filter options themselves are empty, or the user applies filter conditions and does not find matching content, if these two 'empty result' states are not handled properly, they may 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 filtering 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 reviewarchiveFiltersThe core function of the tag. It is mainly used on the document list page or model home page, to generate a series of clickable filtering conditions based on the custom fields of the content model.When you call in the templatearchiveFiltersWhen a tag is used, it returns 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 shown below:

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

This is something that needs to be noted,filtersA variable is an array object that contains multiple filter groups(item)。EachitemAlso contains aItemsarray to list specific filter values.

Scenario one: No filter conditions available (filtersThe variable is empty)

Imagine, the user comes to your website with high expectations, 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 function is missing.

This situation usually occurs when you have configured a content model forarchiveFiltersBut no custom fields defined for filtering or no matching filtering data in the current context lead toarchiveFiltersthe tags returned byfiltersThe variable itself is an empty array.

Solution:

AnQiCMS template engine (similar to Django template) providesfor...emptysyntax, which is the tool for handling the 'empty list' situation. You canforAdd one inside the loop{% empty %}block, whenfiltersThe content inside this block will be rendered when the array is empty.

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

In 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.

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

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

In this case,archiveFiltersThe tag may have normally rendered the filter options, but then used to display the document list.archiveListThe tag, however, found that itsarchivesvariable is empty.

Solution:

Is similar to handling an empty filter condition,archiveListTags also supportfor...emptySyntax. You can use it to render document lists.forLoop added{% empty %}Block, 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" prompt, but also offered suggestions (such as "adjust the filtering conditions") and a real