How to build a dynamic filter using the `archiveFilters` tag to display documents that meet specific conditions?

How to help users quickly find the information they are interested in when managing a content-rich website, improve the user experience, is a challenge that every content operator needs to face. AnQiCMS (AnQiCMS) understands this need and provides strongarchiveFiltersTags, allowing you to easily build dynamic filters, providing flexible and diverse search methods for website content.

Dynamic filter, as the name implies, is to automatically generate filtering conditions for users to choose from based on different attributes of the content.It is not just a simple classification navigation, but also an intelligent retrieval tool that goes deep into the details of the content.Imagine, a real estate website user wants to filter housing listings that are 'residential' type and have an area of 90-120 square meters, or a product website user wants to find 'red' T-shirts with patterns. These complex requirements can be easily resolved through dynamic filters.AnQi CMS'sarchiveFiltersTags, which is the key to realizing this function.

Building such a filter is not complicated. You first need to define various custom fields in the content model of Anqi CMS.For example, for a real estate model, you can add fields such as 'house type', 'area', 'price range', etc;For the product model, it can be things like 'color', 'style', 'material', etc.When these custom fields are configured as filter parameters,archiveFiltersTags can exert their magic.

UsearchiveFiltersWhen labeling, it usually starts like this:{% archiveFilters filters with moduleId=1 allText="全部" %}.

here,moduleIdThe parameter is very important, it specifies which content model (such as article model, product model, etc.) you want to filter the documents. Different models have different custom fields, throughmoduleIdThe system can accurately retrieve the filtering parameters of the corresponding model. However,allTextThe parameter allows you to customize the text content of default options such as “Show All” or “Unlimited”, and even set them to not display. If your website has enabled multi-site management features,siteIdParameters can help you specify the data to be retrieved from a specific site.

WhenarchiveFiltersAfter the tag is executed, it will generate a variable namedfilters(You can customize this variable name). ThisfiltersA variable is an array object that contains detailed information for each selectable parameter.In the template, you can iterate over these filter parameters through a loop to dynamically display them on the page.

goes deep intofiltersThe structure of each variableitemrepresents a specific filtering dimension, such as "house type" or "area". Eachitemincludes the following key information:

• item.Name: This is the display name of the filter, which the user will see on the page, for example, 'House Type'.
• item.FieldNameThis is the actual field name defined in the background content model, which is the basis for the system to identify and filter dimensions.
• item.Items: These are all the selectable values under the current filtering dimension, and it is also an array.

Next, we need toitem.ItemsPerform a second loop to display specific options under each filtering dimension, such as "Residential", "Commercial" or "Small apartment", "Large apartment". In this loop, eachvalThe object provides:

• val.Label: This is the displayed text for the filter option, what the user clicks.
• val.LinkThis is an AnQi CMS automatically generated complete URL, clicking it will automatically apply the filter condition and refresh the content list.The system will intelligently add the filter conditions in the form of query parameters to the URL.
• val.IsCurrentThis is a boolean value used to indicate whether the current option has been selected.This is very useful when adding styles (such as highlighting) to the currently selected filter conditions, which can significantly enhance the user interface friendliness.

Combine all this, and we can build a complete and interactive filtering interface in the template. For example, in a property document list, you can first usearchiveFiltersTag generation filter conditions, then combinearchiveListTag (configurationtype="page"Support pagination and URL parameter filtering)paginationLabels to display the filtered document list and pagination navigation. When the user clicks on a filter option,val.Linkit will redirect the page to a URL with the corresponding query parameters,archiveListThe tag will automatically recognize these parameters and only display documents that meet the conditions.

In this way, the Anqi CMS'sarchiveFiltersTags greatly simplify the development of dynamic filtering functions. They not only improve the organization and discoverability of website content, but also allow users to obtain the information they need more efficiently and accurately, thereby significantly enhancing the overall user experience.Use this tag flexibly, and it will make your website content operation twice as effective.

Frequently Asked Questions (FAQ)

1. Ask: I have added custom fields to the content model in the background, but whyarchiveFiltersWhy are these fields not displayed as filter conditions under the tags?

   • Answer:Please check whether you have set the custom field created in the content model to 'filterable'. Only fields that are explicitly marked as filterable,archiveFiltersTags can identify and use them as dynamic filtering conditions. In addition, make sure youarchiveFiltersThe label is correctly specifiedmoduleIdto associate it with the correct custom content model.

2. Question:archiveFiltersgenerated filtering link (val.LinkDoes it look like a normal URL with parameters, will it affect my website SEO?

   • Answer: archiveFiltersThe generated links usually contain query parameters such as?field=value), this is something that search engines can understand and capture in many cases. Although Anqi CMS supports static rule configuration for SEO-friendly URLs.archiveFiltersThe URL generated is parameterized, but you can combine it with the background pseudo-static rule management feature for optimization. If there are too many filtering conditions causing the URL to be too long or repetitive, consider usingrel="canonical"Tag to specify the standard URL of the content, avoiding SEO weight dispersion.

3. Question: Can I use multiplearchiveFiltersTags to independently filter different content lists?

   • Answer:Technically possible, but you need to be aware of variable name conflicts. If you use multiplearchiveFilterstags, you need to assign different variable names to each tag (for examplefilters1/filters2), to avoid overlapping. At the same time, eacharchiveListtag also needs to specify its screening parameter source, or ensure that itsmoduleId/categoryIdThe correctness of the parameters, so that they can respond to their respective filters. In practice, a filter usually serves a main content list.