How to build a complex document parameter filtering interface using the `archiveFilters` tag, such as real estate, product filtering?

In website operation, providing users with an efficient and accurate content filtering function is the key to improving user experience and content discoverability.Whether it is complex real estate information, massive product SKUs, or professional industry documents, a well-designed filtering interface can help users quickly locate the information they need.In AnQi CMS,archiveFiltersThe label is a powerful tool for building such complex filtering interfaces.

Understanding the core of the filtering interface: content model and custom parameters.

To build a flexible filtering function, you first need to understand the concept of 'content model' in Anqi CMS.The AnQi CMS allows us to customize content models according to business requirements, such as creating a model for "Real Estate" and another for "Products".In these models, we can add various custom fields to describe different properties of the content.

For example, for a real estate website, we might define the following custom fields in the real estate model:

  • House type(Single selection: residential, apartment, villa, shop)
  • Room type(Single choice: one bedroom one living room, two bedrooms one living room, three bedrooms two living rooms)
  • Area(Range of numbers)
  • Degree of decoration(Single choice: rough, simple decoration, exquisite decoration, luxury decoration)
  • Area(Drop-down selection: Beijing, Shanghai, Guangzhou, Shenzhen)

These fields defined in the content model, of the type single-choice, multiple-choice, or drop-down selection, are exactlyarchiveFiltersTags can recognize and be used to build filtering conditions. They provide users with structured options, making it convenient for us to dynamically generate filtering links.

archiveFilters: A powerful tool for dynamically building filtering conditions

archiveFiltersTags are specifically used to generate a list of filtering conditions based on custom parameters of the content model.It will output an array that can be traversed in the template, where each element represents a filterable parameter (such as "house type", "house style").Each parameter includes all its optional values and the corresponding filter links.

Basic usage is as follows:

{% archiveFilters filters with moduleId="1" allText="全部" %}
    {# 循环遍历筛选参数 #}
{% endarchiveFilters %}

here,filtersIt is a custom variable name used to receivearchiveFiltersData output by tags.

  • moduleId: Specify which content model's documents to filter. For example,moduleId="1"may represent the article model,moduleId="2"May represent a product model. This ID needs to correspond to the ID you assigned when creating the content model in the backend.
  • allText: Provide a 'All' or 'Unlimited' option text for each filter parameter. If set tofalse, this option will not be displayed.

filtersThe variable itself is an array containing multiple filtering parameter objects. In the template, we will iterate throughforto display these parameters one by one:

{% for item in filters %}
    {# item 代表一个筛选参数，例如“房屋类型” #}
    <div class="filter-group">
        <span class="filter-name">{{ item.Name }}:</span> {# 显示参数名称，如“房屋类型” #}
        <ul class="filter-options">
            {% for val in item.Items %}
                {# val 代表参数的一个可选值，例如“住宅” #}
                <li class="{% if val.IsCurrent %}active{% endif %}">
                    <a href="{{ val.Link }}">{{ val.Label }}</a> {# 显示选项名称和对应的筛选链接 #}
                </li>
            {% endfor %}
        </ul>
    </div>
{% endfor %}

In this code block:

  • item.NameIt will display the parameter names defined on our backend, such as “House Type”, “Layout”.
  • item.ItemsIt is a small array containing all the optional values.
  • val.LabelIt will display the text of each option, such as "Residential", "Apartment".
  • val.LinkIt is the most critical part, it contains the filter URL that is redirected after clicking the option.The Anqi CMS automatically generates a new URL with the corresponding query parameters based on the current page URL and the user's selected filtering conditions.
  • val.IsCurrentIs a boolean value indicating whether the current option is selected, which is useful for addingactiveClasses, implementing highlighting is very useful.

Display and linkage of filtered results

archiveFiltersThe filter link generated by the tag will automatically carry parameters (such as?房屋类型=住宅&户型=两室一厅) to the current list page. And for Anqi CMS'sarchiveListThe tag is intype="page"When the pattern is called, it will automatically parse the query parameters in these URLs and display the corresponding documents based on these parameters. This means that you do not need to manually write complex query logic, just inarchiveListConfigure inmoduleIdand it can bearchiveFiltersseamlessly connected.

At the same time, combiningpaginationTags, the document list after filtering can also be displayed with pagination, providing users with a complete browsing experience.

Here is a comprehensive example showing how to build a property filtering interface in the Anqi CMS template:

{# 假设当前模板是房产列表页，并已定义好房产内容模型，moduleId="2" #}

<div class="filter-area">
    <h3>房产筛选</h3>
    {% archiveFilters filters with moduleId="2" allText="不限" %}
        {% for item in filters %}
        <div class="filter-group">
            <span class="filter-label">{{ item.Name }}:</span>
            <ul class="filter-options">
                {% for val in item.Items %}
                <li class="filter-item {% if val.IsCurrent %}active{% endif %}">
                    <a href="{{ val.Link }}">{{ val.Label }}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

<div class="house-list-area">
    <h3>房源列表</h3>
    {% archiveList archives with moduleId="2" type="page" limit="10" %}
        {% for item in archives %}
        <div class="house-card">
            <a href="{{ item.Link }}">
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="house-thumb">
                <h4>{{ item.Title }}</h4>
                <p><strong>房屋类型:</strong> {% archiveDetail with name="房屋类型" id=item.Id %}</p>
                <p><strong>户型:</strong> {% archiveDetail with name="户型" id=item.Id %}</p>
                <p><strong>面积:</strong> {% archiveDetail with name="面积" id=item.Id %}平米</p>
                {# 更多房产参数 #}
            </a>
        </div>
        {% empty %}
        <p>抱歉，没有找到符合条件的房源。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 分页导航 #}
    <div class="pagination-area">
        {% pagination pages with show="5" %}
            <ul>
                <li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">首页</a></li>
                {% if pages.PrevPage %}
                <li><a href="{{pages.PrevPage.Link}}">上一页</a></li>
                {% endif %}
                {% for item in pages.Pages %}
                <li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
                {% endfor %}
                {% if pages.NextPage %}
                <li><a href="{{pages.NextPage.Link}}">下一页</a></li>
                {% endif %}
                <li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">尾页</a></li>
            </ul>
        {% endpagination %}
    </div>
</div>

From the above examples, we can seearchiveFiltersHow do tags coordinate with the content model,archiveListandpaginationBuild a complete and highly dynamic filtering interface together.It greatly simplifies the development process, entrusting complex logic to the CMS internally, allowing content operators and template developers to focus on content and user experience.

Frequently Asked Questions (FAQ)

  1. Question:archiveFiltersCan tags only filter custom fields in the content model?Answer: Yes,archiveFiltersThe tag is mainly used to filter the custom parameter fields defined in the content model.These fields are usually set to 'single selection', 'multiple selection', or 'drop-down selection' types when you create content models in the background, in order to provide fixed options for user filtering.The default fields (such as titles, descriptions, etc.) will not be automatically generated as filtering criteria through this tag, but they can be accessed byarchiveListlabel'sqSearch by keyword parameter.

  2. Question: How can you add a numerical filter like price range or area range in the filter interface?Answer:archiveFiltersThe label itself is mainly used to handle the classification filtering of preset options.For numeric filters such as price range or area range, it is usually necessary to combine custom form elements (such as input boxes, sliders) and front-end JavaScript to implement.When the user selects or enters a range, the URL query parameters are dynamically constructed through JavaScript (for example?min_price=1000&max_price=5000Then,archiveListThe label can pass through