I am glad to discuss with you how AnQi CMS can help us achieve multi-dimensional content filtering.In the era of information explosion, users are increasingly pursuing efficiency and personalization in content acquisition.A website that allows users to quickly locate content according to their own needs will undoubtedly greatly enhance user experience and conversion rate.
AnQi CMS provides very powerful and flexible functions in this aspect. Especially through custom content models and specific template tags, we can easily build multi-dimensional filtering functions on article list or product list pages, just like the common 'filter by price' or 'filter by brand' on e-commerce websites.
Empowerment List Page: A Practical Guide to Multi-dimensional Content Screening for AnQi CMS
Imagine that when your website has a large amount of content or products, organizing them just through categories often feels inadequate.Users may need to search for the content they are really interested in based on multiple conditions such as price range, specific attributes (such as color, size), article type, author, and more.The Auto CMS is well-versed in this, providing us with an elegant solution, making everything simple and efficient.
I. Understanding the Foundation of Multi-dimensional Screening: Custom Content Model
To implement multi-dimensional filtering, you first need to have a 'dimension'. In Anqi CMS, these 'dimensions' are what we go throughFlexible Content ModelCustomized fields.System default provides "Article Model" and "Product Model", but the real power lies in the fact that you can create or modify these models according to your business needs and add any number of custom fields.
For example, if you are running an e-commerce website, the product list needs to be filtered by "price
- Price (Numeric Type)
- Color (Multiple Selection or Dropdown, preset options like Red, Green, Blue, etc.)
- Size (Single Selection, preset options like S, M, L, XL, etc.)
If you are a self-media operator, the article list may need to be filtered by 'author', 'article type (such as in-depth report, opinion, tutorial)' and so on.Similarly, you can add these custom fields in the article model.
These custom fields are not only used for filling in when content is published, but more importantly, they are the 'data source' for building the front-end filtering function.When filling out documents or products, ensure that the data of these custom fields is complete and standardized, which will lay a solid foundation for the subsequent filtering function.
English、 Core Function: UsearchiveFiltersEnglish、 Tag Builder Filter
When we have defined the content model and custom fields, and published content with these fields, the next step is to display these filter options on the front-end page. Anqi CMS provides a very practical template tag: archiveFilters.
archiveFiltersThe primary function of the label is to automatically extract the filterable custom fields based on the content model you specify, and generate the corresponding filter links.These links will intelligently include the current filter state, ensuring that the page can respond correctly when users select different filter conditions.
In your article list or product list template (usually{模型table}/list.htmlyou can use it like thisarchiveFilters:
{# 假设我们正在产品列表页，产品模型ID为2 #}
<div>
<h4>筛选条件：</h4>
{% archiveFilters filters with moduleId="2" allText="全部" %}
{% for item in filters %}
<div class="filter-group">
<span>{{ item.Name }}: </span> {# 显示筛选维度名称，如“颜色” #}
<ul>
{% 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>
This code will iterate over all custom fields marked as filterable in your product model.For each field, it lists all possible values (such as "redallText="全部"The parameter will add an 'All' option for each filtering dimension, making it convenient for users to clear a specific filtering condition.val.IsCurrentThis boolean value is very useful, it can help you addactivea class to highlight the currently selected filter condition visually, enhancing the user experience.
Three, Display the filtering results:archiveListLabel collaboration usage
archiveFiltersThe label is responsible for generating filtering options and links, so who will display the filtered content after the user clicks on these links? The answer isarchiveListLabel.
archiveListLabels are not only used to display regular article or product lists, they also have a very intelligent feature: they can automatically identify the filtering parameters contained in the current URL (i.e., archiveFilters生成链接时带上的那些query参数）。这意味着，您不需要额外编写复杂的逻辑去解析URL中的筛选条件，archiveListIt will automatically query and display matching content based on these parameters.
Following the same list template,archiveFiltersyou can use it after the label.archiveList:
{# 接着上一步的筛选器，显示筛选后的产品列表 #}
<div class="product-list">
{% archiveList products with moduleId="2" type="page" limit="12" %}
{% for item in products %}
<div class="product-item">
<a href="{{ item.Link }}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
<h5>{{ item.Title }}</h5>
{# 如果产品模型有价格字段，可以这样显示： #}
<p>价格: {% archiveDetail with name="Price" id=item.Id %} 元</p>
<p>{{ item.Description|truncatechars:100 }}</p>
</a>
</div>
{% empty %}
<p>没有找到符合条件的产品。</p>
{% endfor %}
{% endarchiveList %}
{# 如果需要分页，可以再添加分页标签 #}
{% pagination pages with show="5" %}
{# 分页链接的渲染，此处省略具体代码，可参考文档中pagination标签的用法 #}
{% endpagination %}
</div>
Here,moduleId="2"We have again ensured that we are querying the data of the product model.type="page"The parameter indicates that we want the list to support pagination.limit="12"Control the number of products displayed per page. When the user clicksarchiveFiltersGenerated filter links will cause the page to reload,archiveListit will automatically display only the products that match the filter parameters in the URL.
四、 Optimize User Experience: Beautify the Filter Interface and Pagination
A powerful filter needs a friendly and beautiful interface.archiveFiltersprovidedval.IsCurrentProperties, you can easily add CSS styles to the currently selected filter option, such as setting the background color to blue or bolding the font, making it clear to the user.
At the same time, when the filtered content is abundant, the pagination feature becomes particularly important. The security CMS ofpaginationTags can be associated witharchiveListPerfectly matched, generating pagination links that meet the filtering conditions.Thus, when users browse multiple pages of content after filtering, the filtering conditions remain unchanged, greatly enhancing the continuity of the user experience.
V. Overview of the actual operation process
To implement multi-dimensional filtering of articles or product lists, your workflow can be roughly summarized as:
- Define or modify the content modelIn the "Content Management" -> "Content Model" of the Anqi CMS backend, add custom fields to your article or product model, and select an appropriate field type (such as single selection, multiple selection, number, etc.).
- Enter content and fill in custom fieldsEnsure that these custom field values are filled in completely when publishing articles or products.
- Modify the front-end list template:
- Insert at the location where you want to display the filter
archiveFiltersTags, setmoduleIdParameters to match your content model ID. - Insert at the location where you want to display the content list
archiveList
- Insert at the location where you want to display the filter