Master AnQiCMS: Skillfully usearchiveFiltersThe art of combining document parameter filtering through tags

It is crucial to provide users with accurate and efficient content search experience in content operation.Imagine if your website has a rich variety of content, but users find it difficult to quickly find the information they need. This will undoubtedly greatly affect user experience and the conversion rate of the website.archiveFiltersTags allow us to easily implement document parameter combination filtering, making a large amount of content organized.

This feature is like being able to filter products online according to various conditions such as brand, color, size, and more. In Anqi CMS, we can define various custom parameters for document content and filter them througharchiveFiltersLabel, transform these parameters into intuitive filtering conditions on the front-end page, allowing users to freely combine filtering conditions according to their needs, like stacking blocks, to quickly locate the documents that best meet their preferences.

Understanding "Document Parameters": the basis of filtering

Before delving deeperarchiveFiltersBefore the tag, we first need to understand what is the "document parameter".In Anqi CMS, in addition to basic fields such as title, introduction, and content, the system allows you to customize various exclusive fields for different "content models" (such as articles, products, real estate information, etc.).These custom fields are the 'document parameters' we use for composite filtering.

For example, if your website is a real estate information platform, you can create a content model named "Real Estate Model" and add custom parameters such as "House Type" (residential, commercial, apartment), "Room Type" (one bedroom, two bedrooms, three bedrooms), "Area Range", "Decorating Condition", and so on.When you post a real estate document, you can fill in specific values for these fields in the "Other Parameters" section of the backend.archiveFiltersThe stage where tags excel.

archiveFiltersTags: the core of composite filtering.

archiveFiltersThe tag is used to generate a list of custom parameter-based filtering conditions for documents. It is usually applied to templates on document list pages or category pages, and witharchiveListUse the tag in conjunction to build a dynamic, filterable content display area.

The usage of this tag is simple and clear:{% archiveFilters 变量名 with moduleId="1" allText="全部" %}...{% endarchiveFilters %}. Among them,moduleIdThe parameter is crucial, it tells the system which content model under the document parameters you want to filter (for example,moduleId="1"may represent the 'article model').allTextParameters are used to define the display text for default options such as 'All' or 'Unlimited'. If you do not want to display it, you can also set it tofalse.

When you call in the templatearchiveFiltersWhen labeling, it will return an array object containing all the filterable parameters and their options (for example, in the above example, you may define it asfilters)。ThisfiltersThe structure of the variable is very clear:

  • item.Name: This is the display name of the parameter, for example, 'House Type'.
  • item.FieldName: This is the field name used in the URL query, for example, 'houseType'.When the user clicks on a filter option, this field name will be passed as a URL parameter.
  • item.Items: This is an array containing all the optional values of the current parameter. Each optional value is an object that includes:
    • val.Label: The display text of the filter options, for example, "Residential".
    • val.Link: Click this option to navigate to the URL, which already includes the corresponding filter parameters.
    • val.IsCurrent: A boolean value indicating whether the current option has been selected, often used to add a selected item.activeStyle.

Practice: Build a filter step by step.

Now, let's understand how to implement the combination filter of document parameters in AnQiCMS step by step through a practical example.

Step 1: Define custom parameters in the content model (backend operation)

First, you need to define document parameters in the AnQiCMS backend. Suppose we have a 'product model' and we want users to be able to filter by 'color' and 'material'.

  1. Log in to the AnQiCMS backend, go to 'Content Management' -> 'Content Model'.
  2. Find or create a 'Product Model', click 'Edit'.
  3. In the "Content Model Custom Field" section, click "Add Field".
    • Add the first field:
      • Parameter name:颜色
      • Call field:color
      • Field type:下拉选择(or multiple selections)
      • Default:红色(one option per line)蓝色 黑色
    • Add the second field:
      • Parameter name:材质
      • Call field:material
      • Field type:下拉选择
      • Default:金属 塑料 木质
  4. Save content model.
  5. In the "Content Management" -> "Publish Document

Step two: Apply in the templatearchiveFiltersTag (front-end template file)

Next, you need to write code in the front-end template to render these filters. This is usually in{模型table}/list.htmlor{模型table}/index.htmllist page templates. 

{# 假设我们正在产品列表页，其模型ID为2 #}
<div>
    <h3>产品筛选</h3>
    {% archiveFilters filters with moduleId="2" allText="全部" %}
        {% for item in filters %}
        <div class="filter-group">
            <span class="filter-name">{{item.Name}}: </span>
            <ul class="filter-options">
                {% for val in item.Items %}
                <li class="filter-option {% if val.IsCurrent %}active{% endif %}">
                    <a href="{{val.Link}}">{{val.Label}}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

In this code block,moduleId="2"Specified the filter parameters we want to obtain for the product model. Outer layerforLoop through each parameter group (such as "Color", "Material"),item.NameDisplay the parameter name. Inner layerforLoop to iterate through each parameter group's specific options (such as "Redval.LabelDisplay option text,val.LinkProvide the filter link.val.IsCurrentIt will determine whether the current option is selected, convenient for us to addactivestyle, providing visual feedback.

Step three: combinearchiveListDisplay the filtered results

When the user clicks the filter link, the URL will include the corresponding query parameters (for example/products/list.html?color=红色&material=金属)。At this point,archiveListthe tag will automatically recognize and apply these URL parameters to filter the content.

`twig {# In the same product list page template, following the filter code #}

{% archiveList archives with moduleId="2" type="page" limit="12" %}
    {% for item in archives %}
    <div class="product-item">
        <a href="{{item.Link}}