How to use the `archiveFilters` tag to implement multiple condition combination filtering on the front end?

AnQiCMS provides flexible and powerful content management capabilities, one very practical feature being the use ofarchiveFiltersLabels achieve multi-condition combination filtering on the front end. This undoubtedly greatly enhances the user experience and the discoverability of content for websites with rich content and the need for users to search for information based on different dimensions, such as product displays, real estate rentals, recruitment information, and so on.

Let's delve deeper into how to usearchiveFiltersLabel, build an intuitive and efficient filtering system for your website.

The foundation of building a filtering feature: custom content model fields

Once you can usearchiveFiltersBefore filtering tags, first make sure that the custom fields that can be used for filtering are already set in your content model.AnQi CMS allows you to flexibly define content models according to your business needs.

For example, if you are creating a real estate website, you may have the following filtering options:

  • House type: Residential, commercial, apartments, etc. (single selection or dropdown selection)
  • Room typeOne bedroom, two bedrooms, three bedrooms, etc. (single choice or drop-down selection)
  • Decorating situationFinely decorated, raw, simple decoration (single choice or drop-down selection)
  • Area rangeFor example, 50-70 square meters, 70-90 square meters (range of numbers, which needs backend logic to handle, but the frontend display can be preset options)

These filtering conditions are defined in the 'Content Management' -> 'Content Model' section of the AnQi CMS backend.When you edit or create a model, you can add custom fields to the model and select an appropriate field type, such as 'Single choice' or 'Drop-down choice'.These fields' default values will be used as specific options for frontend filtering.AnQi CMS will automatically identify these parameters defined as filterable.

Get to knowarchiveFiltersTag

archiveFiltersThe main function of the tag is to automatically generate the HTML structure of the front-end filtering conditions based on the filtering fields defined in your content model. These links will cleverly carry query parameters for the content list tagarchiveListIdentify and filter data.

Basic usage is as follows:

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

here we define a variable namedfiltersvariable to receive the data output from the label.

The label accepts several important parameters:

  • moduleId: Specify the content model ID to filter. This is essential as it tells the system which model (such as, the article model ID is 1, the product model ID is 2) to generate the filter condition for.
  • allText: Used to set the display text for default options like 'All' or 'Unlimited'. If you do not want to display the 'All' option, it can be set toallText=false.

filtersA variable will return an array object, eachitemrepresents a filterable field (such as “house type”, “layout” ). Eachitemalso includes aItemsArray, this array contains all the available filter options under the field (such as "Residential", "Commercial").

Each filter option (val) includes the following information:

  • Label: Display text for the filter value, such as 'Residential.'
  • Link: The URL will redirect after clicking the filter value, and this URL will automatically include the filter parameters.
  • IsCurrentA boolean value indicating whether the current filter value has been selected, can be used to addactiveStyle.

Combine the filter conditions with the content list:archiveListandpagination

archiveFiltersThe tag itself only generates the UI and links for the filter options, it needs to work with thearchiveListandpaginationtag together to achieve the complete filtering and pagination functions.

The key isarchiveListThe tag is intype="page"In this mode, it will automatically read the query parameters from the URL and filter the document based on these parameters.archiveFiltersThe generated link takes advantage of this.

Let's look at a complete example, assuming we have a model ID of 1 for a "real estate" model, and we have already defined custom filtering fields such as "house type" and "layout."}

<div class="filter-area">
    <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-option {% if val.IsCurrent %}active{% endif %}">
                <a href="{{ val.Link }}">{{ val.Label }}</a>
            </li>
            {% endfor %}
        </ul>
        {% endfor %}
    {% endarchiveFilters %}
</div>

<div class="content-list">
    {% archiveList archives with moduleId="1" type="page" limit="10" %}
        {% for item in archives %}
        <div class="article-card">
            <a href="{{ item.Link }}">
                <h4>{{ item.Title }}</h4>
                <p>{{ item.Description|truncatechars:100 }}</p>
                <div class="meta-info">
                    <span>发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    <span>阅读量：{{ item.Views }}</span>
                    {# 如果有自定义字段，例如“户型”，可以直接调用 #}
                    <span>户型：{% archiveDetail with name="户型" id=item.Id %}</span>
                </div>
            </a>
            {% if item.Thumb %}
            <a href="{{ item.Link }}" class="thumb">
                <img alt="{{ item.Title }}" src="{{ item.Thumb }}">
            </a>
            {% endif %}
        </div>
        {% empty %}
        <p class="no-content">很抱歉，当前筛选条件下没有找到相关内容。</p>
        {% endfor %}
    {% endarchiveList %}

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

In this example:

  1. archiveFiltersGenerated filter options such as “House Type”, “Room Layout”, etc., each option'sLinkwill automatically add the corresponding query parameters (such as?房屋类型=住宅&户型=三室)
  2. archiveListUsemoduleId="1"andtype="page"It will check the query parameters in the current URL and filter out the corresponding real estate documents according to these parameters.
  3. paginationThe label ensures that the filtering results can be correctly paginated when there are multiple pages, and the pagination links will also retain the current filtering conditions.

Tips in practice

  • Style beautification is the key.: The user interface (UI) of the filtering function is crucial. You need to add appropriate CSS styles to the class, making the filtering conditions clear and the selected state obvious..filter-group/.filter-optionand.activeAdd suitable CSS styles to the class, making the filtering conditions clear and the selected state obvious.
  • Custom filter parameter namingIn the background, when defining custom fields, it is recommended to use concise and meaningful English names as "Call Field" (FieldName), which will be reflected in the URL query parameters.Although the system supports Chinese, English parameters are more universal.
  • EnsurearchiveListSet correctly: Must be inarchiveListsettype="page", otherwise the filtering and pagination functions will not work properly.
  • Filter parameters and URLWhen the user clicks the filter criteria, you will see something like in the browser address bar.yourdomain.com/module/list.html?户型=三室&房屋类型=住宅Such a URL. Anqi CMS will automatically parse these parameters and filter them.

In this way, you can easily implement a powerful multi-condition combination filtering function in AnQiCMS, greatly enhancing the interactivity and user satisfaction of the website content.

Frequently Asked Questions (FAQ)

1. My custom field is inarchiveFiltersnot displayed, or displayed but not filterable, why is that?

This is usually because your custom field is not properly configured as a filterable type. Please make sure to edit the model you are using in the background "Content Management" -> "Content Model", and add the custom field for the model.