How to help users quickly find the information they are interested in on increasingly rich websites is a crucial operational challenge.Users often need to filter content based on specific conditions rather than browsing aimlessly.AnqiCMS provides powerful document parameter filtering functionality, allowing you to easily achieve this goal on the front page, greatly enhancing user experience and content discoverability.

Understand the logic behind the filtering function

Before delving into the front-end implementation, let's briefly understand the design philosophy of the Anqi CMS filtering function. Its core lies in the 'content model' and 'custom fields'.

AnQi CMS allows you to create different content models according to your business needs, such as 'articles', 'products', 'real estate information', and so on.When creating these models, you can add various "custom fields".These custom fields are the basis for our filtering function.For example, if you have a 'real estate information' model, you can add 'house type' (such as residential, commercial), 'house type' (such as one bedroom living room, two bedrooms living room), 'area range', and other fields.

These custom fields not only make your content structure more flexible, but also allow you to fill in detailed attribute information for each document when publishing documents in the background.It is important that when you set the field type to radio, multiple choice, or dropdown, the system will record the option values you set in advance, which are exactly the conditions that users can select when filtering on the front end.

Implement filtering on the front-end page: Core tagsarchiveFilters

When the backend content model and custom fields are properly set up, and the documents are filled with these parameters, we can start working on the front-end page. Anqi CMS provides a very practical template tagarchiveFiltersIt can intelligently obtain all the filterable parameters under the current model and automatically generate filter links.

Imagine that you are running a real estate information website. You want users to be able to filter listings based on conditions such as "house type", "layout", and "area". UsingarchiveFiltersLabel, you can organize your filter area like this:

{# 假设我们正在房产信息模型的列表页，其moduleId为2 #}
<div>
    <h3>房产筛选条件</h3>
    {% archiveFilters filters with moduleId="2" allText="不限" %}
        {% for item in filters %}
        <div class="filter-group">
            <span class="filter-name">{{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>

Let's break down this code:

  • {% archiveFilters filters with moduleId="2" allText="不限" %}: This is the core label.

    • filtersWe name a variable for the filtered result set, which will be used in the loop later.
    • moduleId="2"Tell the system that we want to retrieve the document parameters under the content model with ID 2 (for example, "real estate information").This is a very critical step, ensuring that the filter only displays parameters related to the current content model.
    • allText="不限"This parameter defines the display text for the "All" or "Unlimited" option in each filter group. The user can click it to clear the current filter conditions.

  • {% for item in filters %}:filtersA variable is an array where eachitemRepresents a filterable parameter group (for example, "House Type").

    • {{item.Name}}This will display the Chinese name you set for the custom field in the background, such as "House Type" or "House Type".

  • {% for val in item.Items %}: Each parameter groupitemThere is anotherItemsArray, where eachvalrepresents a specific filter value under the parameter (such as “Residential”, “Commercial”)}]

    • {{val.Label}}: Display specific filter values, such as 'Residential.'
    • {{val.Link}}This is the intelligence of AnqiCMS!It will automatically generate a URL with the corresponding filter parameters.When the user clicks this link, the page will refresh with these parameters and display the filtered content.
    • {% if val.IsCurrent %}active{% endif %}: This is a very practical judgment, if the currentvalis the filter condition selected by the user,IsCurrentwill returntrue.You can use this to add to the selected filter conditionsactiveclass to highlight through CSS and enhance user experience

Combine document list with pagination function

archiveFiltersThe tag itself is only responsible for generating filter conditions, to make the filtering effective and display content, it needs to be配合archiveListandpaginationlabel usage

When the user clicks onarchiveFiltersAfter generating the filter link, the page URL will automatically contain similar?housetype=住宅&roomtype=两室两厅Such query parameters. At this point, yourarchiveListtags come into play. As long as yourarchiveListuptype="page"It will intelligently parse the filter parameters from the URL and query the corresponding documents from the database based on these parameters.

For example, you can use it in your list page template like this.archiveListandpagination:

{# 房产文档列表 #}
<ul class="property-list">
    {% archiveList archives with moduleId="2" type="page" limit="10" %}
        {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h4>{{item.Title}}</h4>
                <p>{{item.Description}}</p>
                {# 这里可以显示更多文档信息，比如自定义字段 #}
                <p>户型：{% archiveDetail with name="户型" id=item.Id %}</p>
            </a>
        </li>
        {% empty %}
        <li>
            抱歉，没有找到符合条件的房源。
        </li>
        {% endfor %}
    {% endarchiveList %}
</ul>

{# 分页区域 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 首页 #}
        <a class="{% if pages.FirstPage.IsCurrent %}current{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        {# 上一页 #}
        {% if pages.PrevPage %}
        <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        {% endif %}
        {# 中间页码 #}
        {% for item in pages.Pages %}
        <a class="{% if item.IsCurrent %}current{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
        {% endfor %}
        {# 下一页 #}
        {% if pages.NextPage %}
        <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
        {% endif %}
        {# 尾页 #}
        <a class="{% if pages.LastPage.IsCurrent %}current{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
    {% endpagination %}
</div>

This code seamlessly connects with the filtering conditions, when filtering parameters are passed through the URL,archiveListit will automatically filter the data, andpaginationThe pagination link will be generated correctly based on the filtered results, ensuring that users can navigate normally after filtering.

Make the filtering feature more user-friendly.

In order to make your filter function more intuitive and easy to use, there are some details to pay attention to:

  1. Highlight the currently selected item:Utilizeval.IsCurrentAttribute, for the current user's selection