How do the `archiveFilters` tag and `archiveList` and `pagination` tags work together to build a complete filter page?

AnQiCMS as an efficient and customizable enterprise-level content management system provides strong template tag support when building feature-rich websites. Among them,archiveFilters/archiveListandpaginationThese tags work together to help us easily build a filter page with an excellent user experience, allowing visitors to quickly locate the content they need.

Today, let's delve deeply into how these three tags complement each other to build a complete and dynamic content filtering system.

I. Starting point of the filtering:archiveFiltersTag

A high-efficiency filtering page needs to provide clear and flexible filtering conditions first. In AnQiCMS,archiveFiltersThe label plays this role. It can dynamically generate a series of filtering options for users to choose from based on the fields you customize in the content model.

Imagine you are running a real estate information website, where users may need to filter listings based on conditions such as 'House Type (apartment, villa)', 'Area (Haidian, Chaoyang)', 'Price Range', and so on.These filter conditions are not immutable, but are closely related to the fields in the 'House Model' defined on your backend.

archiveFiltersThe power of tags lies in the fact that it does not require you to manually hardcode each filter option. It will read the one you have set for a content model throughmoduleIdThe parameters specified) configure the filterable fields and display them. For example, if you define the "Color" and "Size" fields for the product model and set them as filterable, thenarchiveFiltersThe filter area for "Color" and "Size" will be automatically generated.

It generates an object containing multiple filter groups. Each group represents a filterable field (such as "Color"), and each group contains multiple specific options (such as "Red", "Blue").When the user clicks on a filter option,archiveFiltersIt will intelligently generate the corresponding URL, attaching the filter conditions to the query parameters of the URL. In addition, it can also passIsCurrentAttribute, intelligently judge which filter condition is selected, convenient for us to add highlight styles in front-end, enhance user experience.

Core function:Dynamically generate the filter condition interface and construct the filter parameter URL based on user selection.

Part two: The core content:archiveListTag

With the filter condition in place, the next step is to display the list of contents that meet the conditions.archiveListThe tag is the core tag used to retrieve the list of documents (or other archive content, such as products) in AnQiCMS.It can flexibly retrieve and display content based on various parameters.

In order toarchiveFiltersandpaginationwork together,archiveListthere is a crucial parameter setting:type="page". Whentypeis set topagethen,archiveListIt will enter pagination mode, which means it will retrieve data based on the pagination information and filter parameters in the current URL and return a paged result set.

When the user goes througharchiveFiltersSelected a condition, such as "Color: Red", a similar parameter will appear in the URL.?color=redThe configuration is set to.type="page"ofarchiveListIt will automatically parse these URL parameters, and retrieve the matching archive content based on the condition "Color is red." This means you do not need to write additional code to handle URL parameters,archiveListEverything has been done for you.

archiveListIt will also return detailed information for each item, such as title, link, description, thumbnail, views, and publish time, and this data can be found inforRender conveniently within the loop.

Core function:Dynamically retrieve and display a list of matching content based on the filtering and pagination parameters in the URL.

3. Smooth navigation:paginationTag

When the number of filtered content remains large, the pagination feature becomes indispensable.paginationwith the tag andarchiveList(type="page"mode) closely cooperate, providing users with intuitive and convenient page navigation.

paginationTags can be based onarchiveListReturn pagination information (total number, total pages, current page, etc.), generate “Home page”, “Previous page”, “Next page”, and specific page number links. More importantly, all the pagination links it generates willInherit automaticallyAll the filtering parameters in the current URL.

This means that whether the user clicks on a filter condition or jumps to the next page in the filter results, the original filter conditions will be retained.For example, the user filtered the 'red' product and clicked 'next page' in the results, then the products on the new page are still 'red' and the pagination function works normally.This seamless experience greatly enhances the user's navigation efficiency on the filter page.

paginationTags provide rich page information such aspages.TotalItems(Total number of entries),pages.CurrentPage(Current page number) as well aspages.Pages(The middle page number array) and others. We can use this information to build a beautiful and complete pagination navigation bar, and highlight the current page throughitem.IsCurrentthe attribute.

Core function:Provide navigation links for paginated content and automatically retain all filtering conditions.

Four, collaborative work: build a complete example of a filtering page.

Now, let's go through a simplified scenario to demonstrate how these three tags work together to build a complete product filtering page.

Assuming we have a product list page, we need to filter by the product's 'brand' and 'price range', and support pagination.

1. Define the content model:In the AnQiCMS backend product content model, we have customized the 'Brand' (single selection) and 'Price Range' (single selection) fields and set them as filterable.