How to implement multi-condition (such as custom parameters) filtering function on the document list page?

In AnQi CMS, implementing a multi-condition filtering function on the document list page, especially one based on custom parameters, is crucial for enhancing user experience and helping users quickly find the content they need.AnQi CMS relies on its flexible content model and powerful template tag system, making this feature highly efficient and intuitive.

The entire process can be divided into several core steps: First, define your content model and custom filter fields in the background; second, build the display interface for filter conditions in the template; finally, present the filtering results in the document list using list tags.

Step 1: Preparation: Define content model and custom fields

To implement filtering based on custom parameters, we first need to ensure that the content itself contains these parameters available for filtering.AnQi CMS provides flexible content model management functions, allowing users to customize fields according to business needs.

1. Enter content model management: Log in to the Anqi CMS backend, navigate to "Content Management" -> "Content Model".Here, you can choose to modify the existing content model (such as 'article model' or 'product model'), or create a completely new model.

2. Add custom fieldIn the content model editing page, find the "Content Model Custom Fields" area. Click add field, you need to configure the following key items:

   • Parameter NameThis is the display name of the field, for example, 'House Type', 'Location', or 'Price Range'.
   • Field invocationThis is the unique identifier used to call this field in the template, usually recommended to use letters, such ashouseType/region/priceRange. This field name will be used directly as a URL query parameter.
   • Field typeThis is crucial. For easy filtering, we usually choose types such as 'single selection', 'multiple selection', or 'drop-down selection'.These types can provide preset options to generate standardized filtering conditions.
   • Default valueIf the 'Single Choice', 'Multiple Choice' or 'Dropdown Selection' type is selected, you need to fill in the option values here.Each option takes up a line, the system will automatically parse it into an independent filter item.For example, in the "House Type" field, you can fill in "Residential", "Commercial", "Villa", and so on.
   • Mandatory?: Set according to your business requirements.

By following these steps, you have added custom parameters with filtering potential to the content model.For example, add fields such as 'house type' (single selection, options: one-bedroom, two-bedroom, three-bedroom) and 'decoration' (single selection, options: finished, raw, simple decoration) to the real estate model.

II. Core Function: Build a filter condition display interface.

After defining the custom parameters, the next step is to display these filtering conditions on the front-end page for user selection. This is mainly provided by the Anqi CMS.archiveFiltersTag it to complete.

1. Choose a suitable template file: Usually, the template file corresponding to the document list page is{模型table}/list.htmlor{模型table}/list-{文档分类ID}.html. In this file, you need to insert the template code for the filter conditions.

2. UsearchiveFiltersTag:archiveFiltersTags are specifically used to generate a list of filtering conditions based on custom model parameters.It will traverse the custom fields suitable for filtering that you define for the specified model, and generate corresponding filter links for each field option.

   It supports the following parameters:

   • moduleIdSpecify the content model ID to be filtered. For example,moduleId="1"represents the article model,moduleId="2"Represents a product model. If the current page is already a list page of a model, this parameter can be omitted, and the system will automatically identify.
   • allText: Used to set the display text for the 'All' option of each filtering condition item, such as 'No limit', 'All', etc. If you do not want to display it, you can set it tofalse.

   archiveFiltersThe label will return an array object containing all filtered fields and their options. Each field object includesName(parameter name),FieldName(the called field) as well asItems(all options of the field).ItemsEach option in the array also includesLabel(Option display text),Link(Filter link) andIsCurrent(Whether currently selected) and other information.

3. Build a filter interface exampleThe following is a typical code structure of a filter interface:

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

   This code will iterate over all filterable custom fields and generate one for each field (such as "house type", "decoration"):<ul>List, and display all options for this field. Each option will generate a link, which, when clicked, will navigate to the current list page with the corresponding query parameters, as well asIsCurrentProperties will help us add to the current selected filter conditionsactiveto highlight the class.

3. Linked display: Make the filter results take effect in the document list.

After the user clicks the filter link, the URL will include parameters like?houseType=三居室&decoration=精装修. At this point, the document list needs to recognize and respond to these parameters, only displaying documents that meet the criteria.

1. UsearchiveListTag: On the document list page, we usearchiveListtags to retrieve and display document data. The key is to settype="page"Parameters, in this wayarchiveListTags can automatically parse query parameters from the URL and apply them as filtering conditions to document queries.

   archiveListTags support various parameters, the most important of which is:

   • type="page"Tell the label that this is a paginated list and it will automatically handle the filtering parameters and page numbers in the URL.
   • moduleIdSpecify the model to which the document to be displayed belongs.
   • limit: Controls the number of documents displayed per page.
   • Other parameters such ascategoryId/order/q(Search keywords) etc. can also be used as needed.

2. Build an example of a document list:

   <div class="document-list">
       {% archiveList archives with type="page" moduleId="1" limit="10" %}
           {% for item in archives %}
           <div class="document-item">
               <a href="{{ item.Link }}">
                   <h3>{{ item.Title }}</h3>
                   <p>{{ item.Description }}</p>
                   <div class="meta">
                       <span>分类: {% categoryDetail with name="Title" id=item.CategoryId %}</span>
                       <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                       <span>浏览量: {{ item.Views }}</span>
                   </div>
               </a>
           </div>
           {% empty %}
           <p>没有找到符合条件的文档。</p>
           {% endfor %}
       {% endarchiveList %}
   </div>
   
   {# 分页导航 (需配合 type="page" 使用) #}
   <div class="pagination-area">
       {% pagination pages with show="5" %}
           {# 分页逻辑代码，此处省略，可参考文档 tag-pagination.md #}
           <!-- 示例: 首页、上一页、页码、下一页、末页链接 -->
       {% endpagination %}
   </div>
   

   By settingtype="page",archiveListWill automatically convertarchiveFiltersGenerated, and the query parameters passed after clicking on the URL are recognized as filter conditions.It will filter the documents based on these parameters and only display the documents that meet the conditions.At the same time, it will also pass the current page information topaginationTag, implement correct pagination under filtering conditions.

4. Integration and Optimization: An example of a complete filtering page.

Integrate the code for displaying the above filtering conditions and the document list display into the same template file (for exampleproduct/list.html) to form a complete multi-condition document list page.

For example, on a real estate website list page, users can select conditions such as 'house type', 'area', 'price range', and so on to filter:

”`twig {# Filtering conditions display area #} <div class=”