How to implement filtering conditions based on document parameters and display the filtering results?

In AnQiCMS (AnQiCMS), using document parameters to build flexible filtering conditions and display the filtering results is a key factor in improving website user experience and content management efficiency.This not only helps users find the information they need faster, but also makes the website content structure clearer.This article will introduce you to implementing this feature in Anqi CMS, from the initial parameter definition to the final filtering display, helping you easily manage content.

How to cleverly use document parameters to implement filtering function in Anqi CMS to make content smarter

With the continuous enrichment of website content, how to help visitors quickly and accurately find the information they are interested in has become a common challenge for website operators.An enterprise CMS with its flexible content model and powerful template tag features provides us with an elegant solution - by building filters through custom document parameters.Imagine, a real estate website can filter housing listings based on conditions such as 'house type', 'area', and 'region', and an e-commerce platform can filter products based on attributes such as 'color', 'size', and 'brand'. All of this relies on the clever use of document parameters.

Let's uncover the mysterious veil of implementing this function in Anqi CMS step by step.

One, preparation work: define document parameters

To implement the filter function, you first need to define the filtering parameters for your content.One of the core advantages of AnQi CMS is its flexible content model, which is the foundation for our implementation of the filtering function.

1. Enter content model management:Log in to the Anqi CMS backend, navigate to the 'Content Management' menu, and find the 'Content Model' option.Here, you can manage and edit the model used for various types of content on your website (such as articles, products, etc).
2. Edit or create a new content model:Select an existing content model that you want to add filtering functions to for editing, or create a new content model.
3. Add custom field:In the content model editing interface, you will see the "Content Model Custom Field" area.Click "Add field" to define filtering parameters for your content.Here, the key is to choose an appropriate field type, especially the types of single-choice, multiple-choice, and dropdown, which are very suitable as filtering conditions.
   • Parameter name:This is the field name displayed to the user on the front end, such as "type" or "color".
   • Call field:This is the unique identifier used to refer to the parameter in the template code, please use letters, such as 'houseType', 'color'.
   • Field type:Select "Single Choice", "Multiple Choice", or "Dropdown".
   • Default:Enter the option values to be filtered, one per line. For example, if the 'type of house' field has options such as 'one-bedroom', 'two-bedroom', etc., enter them separately in the default value area.These values will be directly used as clickable filters for users.

After defining the field, remember to save the content model. Next, when publishing or editing documents, you can fill in the values for these custom fields.These values will serve as attributes of the document, becoming the target of future filtering.

Second, build the filter interface: usearchiveFiltersTag

With defined document parameters, the next step is how to present these parameters on the front-end page so that users can select filtering conditions. Anqi CMS provides specialarchiveFiltersLabel to help us automate the construction of this complex filtering interface.

1. Determine the label placement position: archiveFiltersLabels are usually placed on the document list page or the home template of the document model, which is the page where users need to filter the content when browsing.
2. UsearchiveFiltersTags:This label can automatically read the custom fields of the content model you define in the background and generate the corresponding filter link. It mainly needs amoduleIdParameters to specify which document of the content model you want to filter.
   • moduleId: Specify the content model ID of the document you want to filter. For example,moduleId="1"may represent the article model,moduleId="2"May represent a product model. You can find the corresponding ID on the content model management page.
   • allText: Used to set the display text for default options such as 'All' or 'Unlimited', if you do not want to display this default option, you can set it tofalse.

Here is a simple code example demonstrating how to usearchiveFilterstags to create a filter:

{# 假设我们正在为一个ID为1的内容模型（如文章）创建筛选器 #}
<div class="filter-section">
    <div class="filter-title">参数筛选：</div>
    {% 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> {# 生成带有筛选参数的URL链接 #}
            </li>
            {% endfor %}
        </ul>
    {% endfor %}
    {% endarchiveFilters %}
</div>

In this example,filtersis an array containing all filterable parameters.item.NameIt will display the parameter name you set in the background (such as "house type"),item.Itemswhich is an array containing all the options of the parameter. For each option,val.LabelIt is the text displayed to the user (such as "One-bedroom"), whileval.Linkit is the complete URL automatically generated by the Anqi CMS, which includes the full filtering conditions.val.IsCurrentIt is used to determine whether the current option is selected, convenient for you to add styles.

3. Display filtering results: archiveListusefulness

After the user clicks the filter conditions, the page needs to dynamically display the corresponding document list based on these conditions. Anqi CMS'sarchiveListThe tag plays a core role here, as it can intelligently capture the filtering parameters in the URL and query the database accordingly to return documents that meet the criteria.

1. archiveListAutomatically respond to filtering conditions: archiveListThe tag does not need any additional settings to "receive" filtering parameters. WhenarchiveFiltersThe generated link, when clicked, will contain parameters similar to?houseType=one_bedroom&color=redsuch as query parameters.archiveListThe tag will retrieve data, it willAutomatically identify and applyThe parameters in these URLs are used as filtering conditions.
2. Combined with pagination function:To better manage the filtered results, we usually combine pagination tagspaginationtogether.archiveListlabel'stype="page"The parameter indicates enabling pagination functionality.

Here is a complete code example combining the filter with the document list and pagination features.

`twig {# Filter