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

In a content management system, providing users with flexible multi-condition filtering functions is a key factor in 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.AnQiCMS (AnQiCMS) leverages its powerful content model and template tag system, allowing you to easily meet this requirement and intuitively display the filtered results.

1. Lay a foundation: define content model and custom fields

All filtering functions rely on data. The first step in implementing multi-condition filtering in Anqi CMS is to define the corresponding custom fields in the content model.These fields will be used as your filtering criteria.

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

Suppose you are running a real estate information website and need to filter according to 'property type' (such as residential, commercial, apartment) and 'floor area'. You can set up custom fields like this:

  • Field 1: House Type
    • Parameter Name: House Type (for backend recognition)
    • Field call (FieldName):housing_type(This name is crucial, used by front-end template and URL parameters)
    • Field type: Single selection (or drop-down selection)
    • Default valueEnter an option per line, for example: Residential, Commercial, Apartment, Villa
  • Field two: Floor Area
    • Parameter NameFloor Area
    • Field call (FieldName):area_size
    • Field typeDropdown selection
    • Default valueFor example: Under 50 square meters, 50-80 square meters, 80-120 square meters, Over 120 square meters

After defining the field, you can fill in the corresponding 'house type' and 'floor area' information when publishing articles or products.

2. Build the filter interface: usearchiveFiltersTag

Once we have this data foundation, the next step is to display the filter options on the front-end page. Anqi CMS provides a very convenientarchiveFiltersThe label 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.

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

This is an example of building a filter interface code:

{# 假设这是您的列表页模板（例如：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>

Several key points need to be paid attention to:

  • moduleId="1"Here is the1Represents the article model. If your filter is for the product model, then it 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 in the background.
  • allText="不限"This is the display text for the 'All' or 'Unlimited' option set for each filtering dimension. Clicking on it will remove the filtering condition for that dimension.
  • filtersVariable:archiveFiltersThe label will organize all generated filter conditions into a namedfilters.
  • item.Name: Display the parameter name of the custom field (for example, "House Type").
  • item.ItemsAn array that includes all the options under the filter condition.
  • val.LabelDisplays 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 a new URL with the filter parameters.
  • val.IsCurrentA boolean value that will be true if the current option is selected.trueYou can use it to add style to the selected filter condition.activeTo provide visual feedback to the user.

3. Display filtering results: CombinearchiveListTag

After the user clicks the filter condition, the page needs to display the matching results. Fortunately, the Anqi CMS'sarchiveListThe tag is very smart, it automatically reads the query parameters from the current URL and filters the content accordingly. This means you do not need toarchiveListExtra filtering logic is written in the tag, it will bearchiveFiltersseamlessly connected 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, used in conjunction with the pagination tags.
  • limit="10": Display 10 items per page.
  • archivesVariable:archiveListTags will store the filtered content toarchivesthe variable.
  • item.Link: Link to content details.
  • item.Title: Content title.
  • item.Description: Content summary.
  • item.Thumb: Thumbnail of the content. *