How does AnQiCMS implement the filtering function of article lists, displaying different results based on custom parameters?

How to make users find the content they need more conveniently in website operation is the key to improving user experience and conversion rate.The article list filter function is an important means to achieve this goal.AnQiCMS provides a flexible and powerful mechanism that allows us to easily filter and display different article list results based on custom parameters, which is very helpful for creating personalized and efficient content platforms.

Building the foundation of filtering functions: Custom content model

To implement the article list filtering based on custom parameters, it is first necessary to understand how these 'custom parameters' are defined.The powerful 'Content Model' function of Anqi CMS is the foundation for achieving this goal.It allows us to add dedicated fields for content types such as articles, products, and so on based on actual business needs.

For example, if you are running a real estate website, in addition to article titles, content, and categories, you may also need to add parameters such as 'property type' (such as apartment, villa, shop), 'area range', and 'number of bedrooms' for each real estate introduction.In the Anqi CMS backend, we can enter the 'Content Management' section under 'Content Model', select or create a content model (such as the 'Real Estate Information' model), and then add these custom fields.Each field can be set to a different type, such as single-line text, number, single choice, multiple choice, or drop-down selection, and default values can be defined.These settings will directly affect the available options for front-end filtering.

When these custom fields are defined in the content model, we can see and fill in these new field contents in 'Other Parameters' when publishing or editing real estate articles.This data is the basis for our subsequent filtering.

Displaying filtering results: FlexiblearchiveListtags

In the frontend template,archiveListThe label is the core used by AnQi CMS to obtain and display the article list.It can not only list articles based on conventional parameters such as category ID, model ID, etc., but also dynamically receive custom parameters through URL query parameters (Query Parameter) to display filtered results.

For example, if we want to display a list of properties where the 'property type' is 'apartment' and the 'number of bedrooms' is '3', when the user clicks the filter button, the URL may change to something similarhttp://你的网站地址/properties/list?house_type=apartment&bedrooms=3format.archiveListLabels will automatically recognize and process these URL parameters and then only return the article data that matches the conditions.

We can use it like this in the template.archiveListPrepare an article list that supports pagination and filtering:

{% archiveList archives with moduleId="你的房产模型ID" type="page" limit="10" %}
    {% for item in archives %}
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <p>房屋类型：{{item.house_type}}</p>
            <p>卧室数量：{{item.bedrooms}}</p>
        </a>
    {% empty %}
        <p>抱歉，没有找到符合条件的房源。</p>
    {% endfor %}
{% endarchiveList %}

Here,moduleIdSpecified the content model we want to query,type="page"indicating that this is a paged list,limit="10"and set the number of articles displayed per page.item.house_typeanditem.bedroomsIt is the custom field defined through the content model, which can be displayed directly in the list items.

Build the filtering interface: smartarchiveFilterstags

It is not convenient enough to manually filter through URL parameters, we need a user-friendly interface. Anqi CMS providesarchiveFiltersLabels, it can automatically generate a series of filter conditions available for user selection based on the custom fields defined in our content model.

archiveFiltersTags are usually witharchiveListTag usage, it will intelligently recognize which custom fields in the current model are set as available for filtering, and then generate a corresponding list of filter options for these fields, including the display name of each option, the corresponding filter link, and the current selection status.

The following is a general template structure for building a filtering interface:

<div>
    <h3>筛选房源</h3>
    {% archiveFilters filters with moduleId="你的房产模型ID" allText="不限" %}
        {% for item in filters %}
            <div class="filter-group">
                <span>{{item.Name}}：</span>
                <ul class="filter-options">
                    {% for val in item.Items %}
                        <li class="{% if val.IsCurrent %}active{% endif %}">
                            <a href="{{val.Link}}">{{val.Label}}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

In this example,archiveFiltersA tag defines a variable namedfiltersto store all the filtering condition data.moduleIdThe parameter ensures that it only generates filters for specified content models.allText="不限"It provides an 'Unlimited' option for each filter group, making it convenient for users to clear a specific filter condition.

Through the outer layerfor item in filtersLoop, we can iterate through all the selectable custom fields (such as "House Typefor val in item.ItemsThe loop will list all the optional values under this field (such as “apartment”, “villa”, etc.).val.LinkIt will automatically generate a URL with the correct query parameters,val.IsCurrentIt will help us add styles to the currently selected filter conditions (e.g., highlighting).

Enhance user experience: Seamless integration of filtering and pagination

In order to implement the filtering function, pagination is also an indispensable part. The Anqi CMS'sarchiveListTags intype="page"mode will cooperate withpaginationtags perfectly. When the user applies the filtering conditions,paginationThe label-generated page link will automatically include the current filter parameters.This means that whether it's flipping pages or switching filters, the parameters in the URL will be intelligently passed and updated to ensure that users can always see the correct filter results and have a smooth browsing experience.

The flexible definition of the content model by AnQi CMS,archiveListthe intelligent parsing of URL parameters, as well as,archiveFiltersThe automated generation of the filter interface provides us with a highly efficient and easy-to-use article list filtering solution.This allows us to create a rich, responsive, and personalized content browsing experience for users without delving into complex coding.

---

Common Questions and Answers (FAQ)

1. The parameters I define in the content model can be used directly inarchiveListThe list is displayed?Of course, as long as you define custom fields (such as)house_type), inarchiveListloop, you can directly access{{item.house_type}}This form of calling and displaying the value of the field. Anqi CMS will pass these custom fields as part of the article data to the template.

2. How to set default values for custom parameter filter options, or display an 'All/No Limit' option?When usingarchiveFiltersWhen labeling, you can setallTextparameters to achieve this. For example,{% archiveFilters filters with moduleId="1" allText="不限" %}An option named 'Any' will be generated at the first position of each filter group, its link will usually clear the URL parameters of the filter field, thus displaying all results.

3. How does AnQi CMS handle URLs when I need to filter based on multiple custom parameters?The autoCMS will automatically combine multiple filter parameters into the query string of the URL. For example, when the user selects 'Apartment' as the 'House Type' and '3' as the 'Number of Bedrooms',archiveFiltersThe generated link will be?house_type=apartment&bedrooms=3.archiveListTags can intelligently parse and handle all valid query parameters in the URL to ensure the accuracy of the filtered results.