How to create a document filtering interface with the `archiveFilters` tag?

AnQi CMS as an efficient and customizable enterprise-level content management system, dedicated to providing powerful and flexible content management tools for website operators.In daily operation, we often need to provide users with a diverse content filtering function to help them quickly find the information they are interested in.This is provided by Anqi CMS at this timearchiveFiltersTags can shine, allowing us to easily build a document filtering interface with multiple conditions, greatly enhancing the user's content discovery experience.

UnderstandarchiveFiltersThe power of tags

Imagine if your website has a rich variety of content, such as a real estate information platform, where users might want to filter listings based on 'house type', 'area', 'price range', even 'renovation status'.If it is a product display website, users may need to search for products according to attributes such as "brand", "model", "color", etc.It is undoubtedly tedious and prone to errors to manually build each filtering condition and the corresponding link for these complex filtering requirements.

archiveFiltersThe label is born to solve such problems. It is not simply a list of filtering options, but can dynamically generate a series of clickable filtering conditions based on the content model parameters defined in the background.This means that when you adjust the custom fields or their optional values in the background, the front-end filtering interface can also automatically synchronize the update, without modifying the template code, which greatly improves the maintainability and operational efficiency of the website.

Preparation: Define the content model field that can be filtered

archiveFiltersThe magic of the tag comes from its deep integration with the Anqi CMS content model.To make it work, we first need to define the filterable 'parameter fields' for the document content in the background.These parameters will be used as the basis for frontend filtering.

In particular, you need to log in to the Anqi CMS backend, go to the 'Content Management' under the 'Content Model' module.Select the content model you need to filter (for example, 'article model' or 'product model'), then click edit.In the content model editing interface, you can find the 'Content Model Custom Fields' area.Here, you can add or modify fields, the type of which will determine whether they are suitable as filter criteria.

Suggest selecting the following types of fields as filtering parameters:

• Single choiceFor example, "House Type" (Residential, Shop, Apartment).
• Multiple selectionsFor example, product color (red, blue, black).
• Drop-down selectionFor example, price range (5-10 million, 10-20 million).

After you have set up these custom fields and their default values (i.e., filter options),archiveFiltersLabels can automatically identify and generate the corresponding filter interface. For example, if you add a single selection field named "Color" to the product model and preset options such as "Red", "Blue", "Green", and so on,archiveFiltersCan automatically create these color filter buttons.

archiveFiltersCore usage and parameter parsing of the label

Using the templatearchiveFiltersThe label is very intuitive, and its basic structure is:

{% archiveFilters 变量名 with 参数 %}
    {# 循环输出筛选条件 #}
{% endarchiveFilters %}

We usually define it as a variable, for examplefiltersThen, we render the filtered options through a loop

Core parameter interpretation:

1. moduleIdThis parameter is crucial, it tellsarchiveFiltersYou want to filter documents under which content model. For example,moduleId="1"may represent the article model, andmoduleId="2"may represent the product model. You can find the ID of each model in the "Content Model" list in the background.

2. allText: Used to set the display text for the 'All' or 'Unlimited' option. For example,allText="全部"Add an option named 'All' at the beginning of each filter group. If you do not want to display this option, you can set it toallText=false.

3. siteId: If you have enabled the multi-site management feature of AnQi CMS and need to call data across sites, you can usesiteIdto specify the target site. For single-site deployment, it is usually not necessary to set it.

filtersThe structure of the variable:

When you define in the tag:filtersThis variable, it is actually an array object. Each element in this array represents a filterable custom field (such as 'House Type', 'House Size').Each element also includes the following properties:

• NameThe display name of the filter parameter, such as "House Type".
• FieldNameThe corresponding backend custom field name of the filter parameter.
• ItemsThis is an embedded array that contains all available options for the filter parameter. Each option is an object that has:
  • Label: The display text of the filter options, such as 'Residential', 'Commercial'.
  • Link: The URL that is redirected to after clicking the option, which includes parameters for the applied filter condition.
  • IsCurrentA boolean value indicating whether the current option is selected. This is very useful for adding highlight styles to the currently selected filter conditions.

Practice exercise: Build a dynamic filter interface

Now, let's go through a practical code example to see how to integratearchiveFilterstags into your template to build a document list with multi-condition filtering functionality.

Assuming we have a product list page, we need to filter based on the product type (in the content model field namedproduct_type) and material (field namedmaterial).

`twig {# This is your product list page template, for example product/list.html or archive/list.html #}

<h3>筛选产品</h3>
{# 使用 archiveFilters 标签生成筛选条件，moduleId 假设为产品模型的ID #}
{% archiveFilters filters with moduleId="2" allText="不限" %}
    {% for item in filters %}
        <div class="filter-group">
            <span class="filter-label">{{ item