How to implement the filtering function of the article list in AnQiCMS, displaying different results according to custom parameters?

How to make it easier for users to find the content they need on a website is the key to improving user experience and conversion rates.The filtering function of the article list 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 building personalized, high-efficiency content platforms.

The foundation of building a filtering function: Custom content model

To implement article list filtering based on custom parameters, first you need 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 basic information such as article titles, content, and categories, you may also need to add parameters such as "house type" (such as apartment, villa, shop), "area range", "number of bedrooms", and so on for each real estate introduction.In the Anqi CMS backend, we can go to the "Content Management" section under the "Content Model" part, 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 different types, such as single-line text, numbers, single selection, multiple selection, or dropdown, and default values can be defined.These settings will directly affect the available options for frontend filtering.

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

Display filtering results: FlexiblearchiveListTag

In the frontend template,archiveListThe tag is the core of AnQi CMS for fetching and displaying article lists.It can list articles based on conventional parameters such as category ID, model ID, and more, and can 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 house type is "apartment" and the number of bedrooms is "3", the URL may become something likehttp://你的网站地址/properties/list?house_type=apartment&bedrooms=3in the form of.archiveListLabels will automatically identify and process these URL parameters, and then only return article data that meets the conditions.

We can use it like this in the template.archiveListPrepare a list of articles 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"then it means this is a paginated list,limit="10"setting the number of articles displayed per page.item.house_typeanditem.bedroomsIt is the custom field defined through the content model that can be displayed directly in the list item.

Build a filter interface: intelligent.archiveFiltersTag

It is not convenient to manually filter through URL parameters, we need a user-friendly filtering interface. Anqi CMS provides this for us.archiveFiltersThe tag can automatically generate a series of filter options that users can select based on the custom fields defined in our content model.

archiveFiltersTags are usually witharchiveListWhen used together, it intelligently identifies which custom fields in the current model are set to be available for filtering, and then generates 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.

Here is a rough template structure for building a filter 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 defined a namedfiltersvariable is used to store all the filter condition data.moduleIdparameter ensures that it only generates filters for specified content models.allText="不限"Each filter group provides an 'unlimited' option for users to clear a specific filter condition.

Through the outer layerfor item in filtersLoop, we can traverse all the filterable custom fields (such as "house type", "number of bedrooms"). Next, the innerfor 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, andval.IsCurrentIt will help us add styles to the currently selected filter conditions (for example, highlighting).

Enhance user experience: seamless integration of filtering and pagination.

While implementing the filtering function, pagination is also an indispensable part. Anqi CMS'sarchiveListThe tag is intype="page"mode, will bepaginationtags work perfectly together. After the user applies the filtering conditions,paginationThe page number link generated by the tag will automatically include the current filter parameters.This means that whether it is page turning or switching filter conditions, the parameters in the URL will be intelligently passed and updated to ensure that the user can always see the correct filtering results and have a smooth browsing experience.

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

Frequently Asked Questions (FAQ)

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

How to set a default value for custom filter option or display an 'All/Unlimited' option?While usingarchiveFiltersBy setting theallTextparameter to achieve this. For example,{% archiveFilters filters with moduleId="1" allText="不限" %}It will generate an option named 'Unlimited' at the first position in each filter group, whose link will usually clear the URL parameters of the filter field, thus displaying all results.

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