How to implement multi-condition filtering on product or article list pages and display the filtered results?

In a content management system, providing users with flexible multi-condition filtering functions is a key aspect for improving website usability and user experience.Whether it is an e-commerce website product list or an article classification page of a content portal, users hope to quickly locate the content they are interested in.The AnQiCMS (AnQiCMS) boasts a powerful content model and template tag system, allowing you to easily meet this requirement and intuitively display the filtered results.

1. Establishing the foundation: Define content models and custom fields

All filtering functions cannot do without data.In the Auto CMS, the first step to implement multi-condition filtering is to define the corresponding custom fields in the content model.These fields will serve as the basis for your filtering conditions.

You can go to the "Content Management" in the background to find the "Content Model" option.The "Article Model" and "Product Model" are provided by the "AnQi CMS" by default, and you can also create new content models according to your business needs.Enter the corresponding model editing page, and in the "Content Model Custom Fields" area, you can add new fields.

Assuming you are running a real estate information website, you need to filter by 'Property Type' (such as residential, commercial, apartment) and 'Building Area'. You can set up custom fields like this:

  • 字段一：House Type
    • Parameter name：House Type (for backend identification)
    • Call Field (FieldName):housing_type(This name is crucial, it will be used for both the front-end template and URL parameters)
    • field type: Single choice (or dropdown selection)
    • Default valueEnglish: Enter an option per line, for example: Residence, Shop, Apartment, Villa
  • Field two: Floor Area
    • Parameter nameEnglish: Floor Area
    • Call Field (FieldName):area_size
    • field typeEnglish: Dropdown selection
    • Default valueFor example: Below 50 square meters, 50-80 square meters, 80-120 square meters, Above 120 square meters

After completing the field definition, you can fill in the corresponding 'House Type' and 'Floor Area' information when publishing articles or products.

2. Build the filtering interface: usearchiveFilterstags

Once we have this basic data, the next step is to display the filtering options on the front-end page. The Anqi CMS provides a very convenientarchiveFiltersLabels can help you dynamically generate these filtering conditions. This label is usually used in the sidebar or top area of product list pages or article list pages.

archiveFiltersThe tag will automatically read the custom fields defined in your content model and generate filter links based on these fields. You need to place it in your list template file (such as{模型table}/list.html）in it.

This is an example of building a filter interface.

{# 假设这是您的列表页模板（例如：archive/list.html） #}
<div>
    <h3 style="font-size: 20px; margin-bottom: 15px;">房产筛选</h3>
    {% archiveFilters filters with moduleId="1" allText="不限" %}
        {% for item in filters %}
        <div style="margin-bottom: 20px;">
            <strong style="display: block; margin-bottom: 8px;">{{ item.Name }}:</strong>
            <ul style="list-style: none; padding: 0;">
                {% for val in item.Items %}
                <li style="display: inline-block; margin-right: 10px; padding: 5px 10px; border: 1px solid #eee; border-radius: 4px; {% if val.IsCurrent %}background-color: #007bff; color: white; border-color: #007bff;{% endif %}">
                    <a href="{{ val.Link }}" style="text-decoration: none; color: inherit;">{{ val.Label }}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

There are several key points to note:

  • moduleId="1"Here:1Represents the article model. If your filter is for the product model, then this might bemoduleId="2"Or it is the ID of the custom model you have created. You can view each model's ID on the 'Content Model' page.
  • allText="不限"This is the display text for the 'All' or 'No Limit' option set for each filtering dimension. When the user clicks, it will remove the filtering condition for that dimension.
  • filtersVariable:archiveFiltersThe tag will organize all generated filter conditions into a namedfilters.
  • item.Name: Display the 'parameter name' of the custom field (e.g., 'House Type').
  • item.Items：An array that includes all the options under the selected filter condition.
  • val.Label：Displays the text of each filter option (e.g., “Residential”).
  • val.LinkThis is the most important part. It will automatically generate a URL with the corresponding filter parameters. When the user clicks, the page will jump to the new URL with the filter parameters.
  • val.IsCurrentAn English translation of auto is English. It would be: A boolean value, if the current option is selected, it will betrue. You can use it to add a style to the current selected filteractiveto provide visual feedback to the user.

3. Show filtered results: CombinearchiveListtags

After the user clicks the filter conditions, the page needs to display the matching results. Fortunately, the Aanqi CMSarchiveList标签非常智能，它会自动读取当前URL中的查询参数，并根据这些参数来过滤内容。这意味着，您无需在EnglisharchiveListThe additional filtering logic written in the tag willarchiveFilters seamlessly connect with the generated URL.

In the same list template, directly below the filter area, you can place the display code for the content list:

{# 列表内容展示 #}
<div style="margin-top: 30px;">
    <h3 style="font-size: 20px; margin-bottom: 15px;">筛选结果</h3>
    {% archiveList archives with moduleId="1" type="page" limit="10" %}
        {% for item in archives %}
        <div style="border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 5px;">
            <a href="{{ item.Link }}" style="text-decoration: none; color: #333; display: flex; align-items: center;">
                {% if item.Thumb %}
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}" style="width: 100px; height: 75px; object-fit: cover; margin-right: 15px; border-radius: 3px;">
                {% endif %}
                <div>
                    <h4 style="margin: 0 0 8px 0; color: #007bff;">{{ item.Title }}</h4>
                    <p style="margin: 0 0 5px 0; color: #666;">{{ item.Description|truncatechars:100 }}</p>
                    <div style="font-size: 13px; color: #999;">
                        <span>分类: {% categoryDetail with name="Title" id=item.CategoryId %}</span>
                        <span style="margin-left: 10px;">发布时间: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                        <span style="margin-left: 10px;">浏览量: {{ item.Views }}</span>
                    </div>
                    {# 这里可以展示自定义字段，例如“房屋类型”和“建筑面积” #}
                    {% archiveParams params with id=item.Id %}
                        {% for param in params %}
                            {% if param.FieldName == 'housing_type' %}
                                <span style="margin-left: 10px; font-size: 13px; color: #999;">房屋类型: {{ param.Value }}</span>
                            {% elif param.FieldName == 'area_size' %}
                                <span style="margin-left: 10px; font-size: 13px; color: #999;">建筑面积: {{ param.Value }}</span>
                            {% endif %}
                        {% endfor %}
                    {% endarchiveParams %}
                </div>
            </a>
        </div>
        {% empty %}
        <p style="text-align: center; color: #888;">没有找到符合条件的房产信息。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

Description of key parameters:

  • moduleId="1"：Similarly, specify the document list of the content model to be retrieved.
  • type="page"：This parameter tells the system that we want to display a paginated list, which is used in conjunction with the pagination tags.
  • limit="10"：Each page displays 10 items.
  • archivesVariable:archiveListTags will store the filtered content toarchivesthe variable.
  • item.Link：Link to content details.
  • item.Title：Content title.
  • item.Description：Content abstract.
  • item.ThumbThe thumbnail of the content. *