How can you implement a multi-dimensional filtering function on the article list or product list page (such as by price, attributes)?

I am glad to discuss with you how Anqi CMS can help us achieve multi-dimensional content filtering.In the era of information explosion, users are increasingly pursuing efficiency and personalization in obtaining content.A website that allows users to quickly locate content according to their own needs will undoubtedly greatly enhance user experience and conversion rates.

The AnQi CMS provides very powerful and flexible functions in this aspect, especially through custom content models and specific template tags, we can easily build multi-dimensional filtering functions on article or product list pages, just like the common "price filtering" and "brand filtering" on e-commerce websites.

Empowerment List Page: A Practical Guide to Implementing Multi-Dimensional Content Filtering in AnQi CMS

Imagine when your website has a large amount of content or products, just organizing them through categories often seems inadequate.Users may need to search for the content they are really interested in based on various conditions such as price range, specific attributes (such as color, size), article type, author, and more.AnQi CMS is well-versed in this field, providing us with elegant solutions that make everything simple and efficient.

I. Understanding the Foundation of Multi-Dimensional Filtering: Custom Content Model

To implement multi-dimensional filtering, you first need to have a "dimension". In AnQi CMS, these "dimensions" are what we go throughFlexible content modelCustom fields of various types. The system provides default models such as 'Article Model' and 'Product Model', but the real power lies in being able to create or modify these models according to business needs and add any number of custom fields.

For example, if you are running an e-commerce website, the product list needs to be filtered by “price”, “color”, “size”, and so on. You can find the “content model” in the “content management” backend, select or create a product model, and then add the following custom fields to it:

• Price (Numeric Type)
• Color (Multiple Choice or Dropdown, preset options such as Red, Green, Blue, etc.)
• Size (Single Selection, preset options such as S, M, L, XL, etc.)

If you are a self-media operator, the article list may need to be filtered by 'author', 'article type (such as in-depth reports, opinions, tutorials)' and so on.Similarly, you can add these custom fields to the article model.

These custom fields are not only used for filling in when content is published, but more importantly, they are the 'data source' for building the front-end filtering function.When filling out documents or products, make sure that the data of these custom fields is complete and standardized, which will lay a solid foundation for subsequent filtering functions.

Second, core function: usearchiveFiltersTag builder filter

After we have defined the content model and custom fields, and published content with these fields, the next step is to display these filtering options on the front-end page. Anqi CMS provides a very practical template tag:archiveFilters.

archiveFiltersThe main function of the tag is to automatically extract the customizable fields that can be filtered according to the specified content model, and generate the corresponding filter link.These links will intelligently include the current filter state, ensuring that the page responds correctly when the user selects different filter conditions.

In your article list or product list template (usually){模型table}/list.htmlin these files, you can use it like thisarchiveFilters:

{# 假设我们正在产品列表页，产品模型ID为2 #}
<div>
    <h4>筛选条件：</h4>
    {% archiveFilters filters with moduleId="2" allText="全部" %}
        {% for item in filters %}
        <div class="filter-group">
            <span>{{ item.Name }}: </span> {# 显示筛选维度名称，如“颜色” #}
            <ul>
                {% for val in item.Items %}
                <li class="{% if val.IsCurrent %}active{% endif %}">
                    <a href="{{ val.Link }}">{{ val.Label }}</a> {# 筛选选项，如“红色” #}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

This code will iterate over all custom fields marked as filterable in your product model.For each field, it lists all possible values (such as "red", "blue"), and generates a URL link with the correct filtering parameters.allText="全部"Parameters will add an "All" option for each filtering dimension, making it convenient for users to clear a specific filtering condition.val.IsCurrentThis boolean value is very useful, it can help you add a class to the currently selected filter conditionactivethus highlighting it visually, enhancing the user experience.

3. Display filter results:archiveListThe use of tags

archiveFiltersTags are responsible for generating filter options and links, so who will display the filtered content after the user clicks on these links? The answer isarchiveList.

archiveListTags are not only used to display regular articles or product lists, but they also have a very smart feature: they can automatically identify the filtering parameters included in the current URL (i.e.,archiveFiltersthose included when generating a linkqueryparameters). This means you do not need to write complex logic to parse the filtering conditions from the URL.archiveListIt will automatically query and display matching content based on these parameters.

Following in the same list template,archiveFiltersAfter the tag, you can use it like this.archiveList:

{# 接着上一步的筛选器，显示筛选后的产品列表 #}
<div class="product-list">
    {% archiveList products with moduleId="2" type="page" limit="12" %}
        {% for item in products %}
        <div class="product-item">
            <a href="{{ item.Link }}">
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                <h5>{{ item.Title }}</h5>
                {# 如果产品模型有价格字段，可以这样显示： #}
                <p>价格: {% archiveDetail with name="Price" id=item.Id %} 元</p>
                <p>{{ item.Description|truncatechars:100 }}</p>
            </a>
        </div>
        {% empty %}
        <p>没有找到符合条件的产品。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 如果需要分页，可以再添加分页标签 #}
    {% pagination pages with show="5" %}
        {# 分页链接的渲染，此处省略具体代码，可参考文档中pagination标签的用法 #}
    {% endpagination %}
</div>

Here, moduleId="2"We have again ensured that we are querying the product model data.type="page"The parameter indicates that we want the list to support pagination.limit="12"Controls the number of products displayed per page. When the user clicksarchiveFiltersWhen generating the filter link, the page will reload,archiveListit will automatically display only the products that match the filter parameters in the URL.

IV. Optimize user experience: beautify the filter interface and pagination

A powerful filter needs a friendly and beautiful interface. UtilizearchiveFiltersprovidedval.IsCurrentAttribute, you can easily add CSS styles to the currently selected filter option, such as setting its background color to blue or bold font, making it clear to the user.

At the same time, when there is a large amount of filtered content, the pagination feature becomes particularly important. It is very important for AnQi CMS.paginationTags can be used witharchiveListPerfectly matched, generates pagination links that meet the filtering conditions. In this way, the filtering conditions remain unchanged when the user browses multiple pages after filtering, greatly enhancing the continuity of the user experience.

5. Overview of the actual operation process

To implement multi-dimensional filtering of article or product lists, your workflow can be roughly summarized as:

1. Define or modify the content modelIn the Anqi CMS backend, under 'Content Management' -> 'Content Model', add custom fields to your article or product model and select the appropriate field type (such as single choice, multiple choice, number, etc.).
2. Enter content and fill in custom fieldsWhen publishing articles or products, be sure to fill in the values of these custom fields completely.
3. Modify the front-end list template:
   • Insert at the location where you want to display the filterarchiveFiltersSet the labelmoduleIdParameters to match your content model ID.
   • Insert at the location where you want to display the content listarchiveList