English CMS as an efficient and customizable enterprise-level content management system, is committed to providing website operators with powerful and flexible content management tools.In daily operations, we often need to provide users with a diverse range of content filtering functions to help them quickly find the information they are interested in.archiveFilters标签便能大显身手,它允许我们轻松构建一个多条件的文档筛选界面,极大提升用户的内容发现体验。
UnderstandarchiveFiltersThe power of tags
archiveFiltersLabels are born to solve such problems.It is not simply a list of filtered options, but can dynamically generate a series of clickable filter conditions according to the content model parameters you define in the background.This means that when you adjust the custom fields or optional values of the content model in the background, the front-end filter interface can also automatically synchronize the update without modifying the template code, greatly improving the maintainability and operation efficiency of the website.
Preparation: Define the filterable content model fields
archiveFiltersThe magic of the label comes from its deep integration with the AnQi CMS content model.To make it work, we first need to define the "filterable fields" for the document content in the background.These parameters will serve as the basis for front-end filtering.
Specifically, you need to log in to the Anqi CMS backend and enter the 'Content Model' module under 'Content Management'.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 filtering conditions.
Suggest selecting the following types of fields as filter parameters:
- Single selectionFor example, "House Type" (Residential, Shop, Apartment).
- Multiple selection:例如‘Product Color’(Red, Blue, Black)。
- Drop-down selection:例如‘Price Range’(50-1 million, 100-2 million)。
After you set these custom fields and their default values (i.e., filter options),archiveFiltersTags 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", etc.archiveFiltersCould automatically create these color filter buttons.
archiveFiltersThe core usage and parameter explanation of the tag
Used in the templatearchiveFiltersThe tag is very intuitive, its basic structure is:
{% archiveFilters 变量名 with 参数 %}
{# 循环输出筛选条件 #}
{% endarchiveFilters %}
通常,我们会将它定义为一个变量,例如 Englishfilters,然后通过循环来渲染出筛选选项。 English
核心参数解读: English
moduleId:这个参数至关重要,它告诉 EnglisharchiveFiltersYou want to filter documents under which content model. For example,moduleId="1"may represent the article model, whilemoduleId="2"It may represent a product model. You can find the ID of each model in the "Content Model" list on the backend.allTextUsed to set the display text for the 'All' or 'Unlimited' option. For example,allText="全部"An option named “All” will be added at the beginning of each filter group. If you do not want this option to be displayed, you can set it toallText=false.siteId:If you have enabled the multi-site management feature of Safe 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.
filtersThe structure of variables:
When you define in the tag:filtersThis variable, it is actually an array object.This array represents each element as a selectable custom field (such as “House Type”, “House Size”).
Name: The display name of the filter parameter, such as 'House Type'.FieldName: The backend custom field name corresponding to the filter parameter.ItemsThis is an embedded array that contains all available options for the filter parameter. Each option is an object with:Label:Filter options display text, such as 'Residential', 'Commercial'.Link:The URL to which the option jumps after clicking, which includes parameters for applying this filter condition.IsCurrentAn English boolean value indicating whether the current option is selected. This is very useful for adding highlight styles to the currently selected filter conditions.
Practical Exercise: Build a dynamic filtering interface
Now, let's look at how to integrate tags into your template with a practical code example, to build a document list with multi-condition filtering functionality.archiveFiltersLabel integration into your template to build a document list with multi-condition filtering functionality.
Suppose we have a product list page, where we need to filter products based on their 'type' (in the content model field namedproduct_type) and 'material' (field namedmaterial).
<h3>筛选产品</h3>
{# 使用 archiveFilters 标签生成筛选条件,moduleId 假设为产品模型的ID #}
{% archiveFilters filters with moduleId="2" allText="不限" %}
{% for item in filters %}
<div class="filter-group">
<span class="filter-label">{{ item