How to display filter conditions on the document list page of Anqi CMS and dynamically update results based on parameters?

In AnQi CMS, adding filtering conditions to the document list page and dynamically updating the results based on user selection is an important factor in improving the discoverability and user experience of website content.This not only helps visitors quickly locate the content they are interested in, but also has a positive impact on SEO through a clear URL structure.Let's understand step by step how to implement this feature in Anqi CMS.

Core Function: Content Model and Custom Fields are Basic

In AnQi CMS, all content is built based on the 'Content Model'.The filtering function on the document list page is based on the various custom fields you define in the content model.Therefore, before implementing the front-end filtering, we need to ensure that the content model you have already included contains the custom fields that need to be filtered, and that the values of these fields have been filled in the content of your documents.

For example, if you want to create a real estate website, you may need to filter according to the 'property type' (such as apartment, villa, shop) or 'area range' (such as 50-70 square meters, 70-90 square meters).These 'house types' and 'area ranges' need to be added in the background 'Content Management' -> 'Content Model' for your 'real estate model'.

When defining custom fields, AnQiCMS usually provides an option for you to decide whether the field should be applied to frontend filtering.For single-choice, multiple-choice, or dropdown field types, AnQiCMS automatically identifies the option values as conditions available for front-end filtering.When these fields are set as filterable, AnQiCMS can automatically generate the conditions and logic required for front-end filtering according to these definitions.

Step 1: Display Filter Conditions in the Template

With the customizable filter fields, the next step is to display these filter conditions in the document list page template. Anqi CMS provides a very convenient template tag ——archiveFilters.

archiveFiltersThe tag can automatically extract all selectable custom fields and their corresponding option values according to the specified content model, and generate HTML code with filter links.This greatly simplifies front-end development work.

Let's take a look at its basic usage:

{# 参数筛选代码，通常放在列表页顶部或侧边栏 #}
<div>
    <h3>筛选条件：</h3>
    {% archiveFilters filters with moduleId="1" 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="filter-option {% if val.IsCurrent %}active{% endif %}">
                    <a href="{{val.Link}}">{{val.Label}}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
    {% endfor %}
    {% endarchiveFilters %}
</div>

In this example:

• filtersIs a variable name we define to receivearchiveFiltersThe data set returned by the tag.
• moduleId="1"Specify the filter parameters for the content model we want to retrieve with ID 1 (for example, an article model). You can replace it with your actual content model ID according to your needs.
• allText="不限"Defined as the display text for the "All" or "Unlimited" option. If you do not want to display it, you can set it toallText=false.
• {% for item in filters %}Loop through each filterable custom field (such as "House Type", "Area Range").
  • item.NameIt will display the Chinese name of the field (such as "House Type").
  • {% for val in item.Items %}Continue to loop through all the optional values of the current field (such as 'apartment', 'villa').
    • val.LabelIt will display the text of the option (such as 'apartment').
    • val.LinkIt is the most critical part, it generates a URL containing the current filter parameters. When the user clicks on this link, the page URL will be updated and will include the corresponding query parameters.
    • val.IsCurrentIt is a boolean value indicating whether the current option is selected. We can use it to add selected filtering conditions.activeClass name, so that it can be highlighted by CSS to enhance the user experience.

Step two: Make the document list responsive to filtering

When the user clicks onarchiveFiltersAfter generating the filter link, the page URL will dynamically add the corresponding query parameters (such as?房屋类型=公寓）。At this time, we need to ensure that the document list can recognize and update the display results according to these parameters.

Of Security CMSarchiveListThe label performs very intelligently and conveniently in this aspect. When it is used to generate pagination lists (type="page"), it willautomatically read the query parameters from the current URLAnd apply it as a filter condition to the document query.

The following is an example of code for a document list with a filter function.

`twig {# Document list code #}

{% for item in archives %}
<div class="document-item">
    <a href="{{item.Link}}">
        <h4 class="document-title">{{item.Title}}</h4>
        <p class="document-description">{{item.Description|truncatechars:100}}</p>
        <div class="document-meta">
            <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>阅读量：{{item.Views}}</span>
        </div>
    </a>
    {% if item.Thumb %}
    <a href="{{item.Link}}" class="document-thumb">
        <img alt="{{item.Title}}" src="{{item.Thumb}}">
    </a>
    {% endif %}
</div>
{% empty %}
<p>抱歉，没有找到符合条件的文档。</p>
{% endfor %}

{# 分页代码，与archiveList的type="page"配合使用 #}
<div class="pagination-wrapper">
    {% pagination pages with show="5" %}
        {# 首页 #}
        <a class="pagination-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        {# 上一页 #}
        {% if pages.PrevPage %}
        <a class="pagination-link" href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        {% endif %}
        {# 中间多页 #}
        {% for item in pages.Pages %}
        <a class="pagination-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
        {% endfor %}
        {# 下一页 #}
        {% if pages.NextPage %}
        <a class="pagination-link" href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
        {% endif %}
        {# 尾页 #}
        <a class="pagination-link {%