How to implement a multi-condition combination filtering function on the front-end using the `archiveFilters` tag?

AnQiCMS provides flexible and powerful content management capabilities, one very practical feature being the ability to utilizearchiveFiltersThe label implements multi-condition combination filtering on the front end.This undoubtedly greatly enhances the user experience and the discoverability of content for websites that are rich in content and require users to search for information across different dimensions, such as product displays, real estate rentals, and recruitment information.

Let's delve 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

Before you can usearchiveFiltersBefore filtering the tags, first make sure that the custom fields available for filtering have been set in your content model.The SafeCMS 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 conditions:

  • House type: Residential, commercial, apartment, etc. (single selection or dropdown selection)
  • House layoutOne bedroom, two bedrooms, three bedrooms, etc. (single choice or dropdown selection)
  • Decorating situation: Finely decorated, bare, simple decoration (single choice or dropdown selection)
  • Area range：For example, 50-70 square meters, 70-90 square meters (range of numbers, which requires backend logic to handle, but the front-end 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 appropriate field types, such as 'Single choice' or 'Dropdown selection'.These fields' 'default values' will be used as specific options for the frontend filter.The CMS will automatically recognize these parameters defined as filterable.

KnowarchiveFilterstags

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

The basic usage is like this:

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

Here we define a variable namedfiltersto receive the data output from the label.

The label accepts several important parameters:

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

filtersThe variable will return an array object, eachitemrepresents a filterable field (such as “House Type”, “Layout”). Eachitemitself contains aItemsArray, this array contains all the available filter values under this field (such as 'Residential', 'Commercial').

Each filter value (val) includes the following information:

  • LabelEnglish: Filter value display text, such as 'Residential'.
  • LinkEnglish: The URL to which the filter value jumps after it is clicked, which will automatically include the filter parameters.
  • IsCurrentAn English value, indicating whether the current filter value has been selected, can be used to addactivestyles can be added.

Combine the filter conditions with the content list:archiveListandpagination

archiveFiltersThe tag itself only generates the UI and link for the filter options, it needs toarchiveListandpaginationwork together with the tag to achieve the complete filter and pagination features.

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

Let's see a complete example, assuming we have a model with ID 1 called 'Real Estate' and it has 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 'House Type', 'Floor Plan' and other filtering options, 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 property documents based on these parameters.
  3. paginationThe label ensures that the pagination is performed correctly when there are multiple pages, and the pagination links will also retain the current filter conditions.

Tips for practice

  • Aesthetic styling is the key.：The user interface (UI) of the filtering function is crucial. You need to add appropriate CSS styles to the class so that the filtering conditions are clear and the selected state is obvious..filter-group/.filter-optionand.activeclass, making the filtering conditions clear and the selected state self-evident.
  • 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 inarchiveListSet intype="page", otherwise the filtering and pagination functions will not work properly.
  • Filter parameters and URLWhen the user clicks the filter condition, you will see something similar toyourdomain.com/module/list.html?户型=三室&房屋类型=住宅such a URL in the browser address bar. Anqi CMS will automatically parse these parameters and filter them.

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

Common Questions (FAQ)

1. My custom field is not displayed, or displayed but cannot be filtered, why is that?archiveFiltersThis is why it is not displayed, or displayed but cannot be filtered.

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