How to add independent titles or descriptions to each filter group of the `archiveFilters` tag?

As an expert in the operation of AnQiCMS, I am glad to answer your questions about how toarchiveFiltersThe question of adding independent titles or descriptions for each filter group in the label. This can greatly enhance the user experience and make the website's filtering function more intuitive and friendly.

In AnQiCMS, you will find its powerful content model and template tag design, which has provided perfect support for this requirement.archiveFiltersThe core function of the tag is to dynamically generate front-end filtering conditions based on the custom fields defined in the content model in the background.Therefore, add a title or description for each filter group, and the secret lies in the configuration of these custom fields.

Understand the AnQiCMS filtering mechanism

First, let's briefly reviewarchiveFiltersThe principle of the tag. When you use it on the front-end pagearchiveFiltersWhen labeling, it will traverse all the custom fields marked as filterable under the specified content model.For each such field, it will be presented to the user as an independent 'filter group'.Below each filter group is the preset filter values of the custom field (for example, 'Residential' under 'House Type', 'Commercial' under 'Shop' and so on).

archiveFiltersLabels in the template output will encapsulate the information of each filter group initema variable, which includes a property namedName. ThisNameThe attribute is what we use to display the title or description text of the filter group.

Core: The 'parameter name' of the custom field.

The mystery of all this originates from the "parameter name" you set for the custom field in the Anqi CMS backend content model. This "parameter name" is not just a backend identifier, but also the front-endarchiveFiltersThe label reads and displays the direct source of the filter group title.

Let's step by step to see how to configure:

1. Login to the AnQiCMS backend:Enter your website management interface.
2. Navigate to "Content Management" -> "Content Model":Here, you can see all the content models defined on the website, such as "Article Model", "Product Model", and so on.
3. Select or edit the related content model:Click the specific content model you need to add a filter function (for example, if you want to add a filter to the product list, select "Product Model" to edit).
4. Configure "Content Model Custom Field":In the editing page of the content model, scroll down to find the "Content Model Custom Fields" area. Here, all custom fields of the model are listed.
   • Add a new field: If you have not created a custom filter field yet, you can click the 'Add Field' button.
   • Edit existing field:If the field already exists, simply click on the field to edit.
5. Set the "Parameter Name":In the configuration details of custom fields, you will see an input box named "Parameter Name".This 'parameter name' is the title or description you want to display above the frontend filter group.For example, if you want the user to filter the 'color' of the product, you can fill in 'parameter name' with 'color'; if you want to filter the 'suitable people', then fill in 'suitable people'.

After completing and saving the above configuration, the custom field will carry the information of the parameter name you set. WhenarchiveFiltersWhen the tag is called on the front end, it will recognize and use this "parameter name" as the title of the corresponding filter group.

Present the title elegantly in the template.

Now, let's see how we can use this 'parameter name' to display the independent title of the filter group.archiveFiltersThe tag will return afiltersVariable that contains data of all filterable groups. You can iterate through these filter groups with aforloop:

{# 假设我们定义了 filters 变量来承载 archiveFilters 的数据 #}
<div>
    {# 这里是整个筛选区域的容器 #}
    {% archiveFilters filters with moduleId="1" allText="不限" %}
        {# 遍历每一个筛选组 #}
        {% for item in filters %}
        <div class="filter-group">
            {# item.Name 即是您在后台“内容模型自定义字段”中设置的“参数名” #}
            <h4 class="filter-title">{{ item.Name }}: </h4> {# 这就是筛选组的独立标题 #}
            <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>

By this code, each custom field's filter group (such as "Color{{ item.Name }}This allows the user to understand the current filter condition at a glance. At the same time,val.LabelIt will display the specific name of each filter option, such as 'Red', 'Blue', 'Male', 'Female'.

Consideration of actual operation and user experience

• Clarity of the title:When setting the "parameter name" in the background, please ensure it is concise and clear, accurately conveying the meaning of the filtering conditions. Avoid using overly technical or ambiguous words.
• allTextfunction: archiveFilterslabel'sallTextParameters (for exampleallText="不限") are to add a 'All' or 'Unlimited' option for each filter group. This option is usually the default state for the group, indicating that the condition is not filtered. It is associated withitem.Name(Filter group title) is a parallel relationship, jointly forming a complete filtering experience.
• Front-end style design: filter-group/filter-title/filter-options/filter-optionCSS class names can help you beautify the filter component, making it consistent with the overall design style of the website and enhancing the user experience.
• Multi-model reuse:If different content models have the same filtering requirements, such as articles and products both have a 'author' filtering condition, you can ensure that the 'parameter name' for the 'author' field is consistent in each content model, so that the front-end display will be more unified.

In summary, AnQi CMS cleverly achieves the customization of independent title for the filtering group by closely associating the custom fields of the background content model with the front-end template tags.You just need to pay attention to filling in the 'parameter name' when configuring in the background, and you can present a clear and easy-to-use filtering interface on the front end, greatly enhancing the navigation and user-friendliness of the website content.

Frequently Asked Questions (FAQ)

Q1: Can I also add a more detailed description for each filter option (for example, “red”, “blue”)?

A1: archiveFiltersThe label itself provides for each filtering option isval.LabelField, this is usually the option name you set as the default value for a custom field in the background. For example, if your color field options are 'Red', 'Blue', thenval.LabelIt will be 'red' or 'blue'.archiveFiltersThe label does not provide it directly.val.Descriptionorval.TitleSuch a field. If you need to add additional descriptions for each filter option, you may need to use JavaScript on the front end to according toval.LabelProvide additional information hints (such as displaying tooltip on hover), or consider adjusting your default value content to include more descriptive information.

Q2: What will be displayed in the front-end filter group title if I do not fill in the "Parameter Name" in the custom field in the background?

A2: If you leave the parameter name blank in the custom field of the content model, thenitem.NameIt will be blank when rendered on the front end. This may cause the title to be missing above the filter group, confusing the user about the function of the filter condition. Therefore, it is strongly recommended that you use for all usedarchiveFiltersThe custom field should fill in clear "parameter name" to ensure the **user experience."

Q3: Can the title of this filter group be dynamically changed through URL parameters?item.Name）Can it be changed dynamically through URL parameters?

A3: item.NameThe value is directly read from the custom field configuration of the Anqi CMS backend content model. It is a relatively fixed content definition and not dynamically changed through URL parameters. URL parameters mainly affect the specific results of the filter (such as?color=red), and the selected state of the filter options (val.IsCurrent). If you need to dynamically change the title of the filter group, this usually does not belong toarchiveFiltersThe scope of label design, which may require more complex template logic or frontend JavaScript to implement, but this will increase maintenance complexity and may deviate from the original intention of CMS.