How to implement multi-condition filtering display of article lists (such as by price, region) in Anqi CMS?
In modern website operation, users' demand for content filtering is growing increasingly.Whether it is to find products at a specific price or to inquire about activities in a certain area, an article list that supports multi-condition filtering can greatly improve user experience and content reach efficiency.AnQiCMS (AnQiCMS) provides a convenient solution for website operators to implement complex filtering functions with its flexible content model and powerful template tags.
The foundation for building multi-dimensional content: custom fields of the content model
In Anqi CMS, the core of implementing multi-condition filtering of article lists lies in the flexible use of the "Content Model" feature.The content model allows us to define unique fields for different types of content (such as articles, products, events, real estate, etc.) based on the business needs of the website.
We need to implement filtering by "price" and "region" for real estate information websites. First, you need to configure the content model in the Anqi CMS backend. You can create a content model named "Housing" (if it has not been created yet) and then add custom fields:
- Price (Price)This field can be set to a 'number' type for storing specific house prices conveniently.If you need to implement price range filtering, you can achieve it by cooperating with a customized input box in the template.
- Region (Region)This field can be set to 'Single Selection' or 'Dropdown Selection' type.In the default value, you can list all supported region options, such as "ShanghaiThis way, when posting housing information, editors only need to select from the preset list.
In addition to price and location, you can also add more fields as needed, such as 'house type', 'area', 'rental method', etc., which can be met through different field types (such as multiple selection, single-line text) to lay a foundation for subsequent filtering.
Flexibly present filter options:archiveFiltersThe application of tags
With custom fields as data support, the next step is to present these filter conditions on the website front end for user selection. Anqi CMS providesarchiveFiltersTemplate label.
archiveFiltersTags can automatically read the custom fields you define in the content model, which can be used for filtering, and generate corresponding filter options and URL links. For example, if you define the "region" field for the "property" model,archiveFiltersYou can generate a list containing regional options such as "Shanghai
Using the templatearchiveFiltersyou can go throughmoduleIdThe parameter specifies the model to be filtered, ensuring it acts on the correct content type. At the same time,allTextThe parameter can customize the display text for options such as “All” or “Unlimited” to enhance user experience.archiveFiltersThe label outputs an array object that includes the names of each filtering condition, field name, and the specific options under it (including the text of the options, the link clicked, and whether the current selected state), which is convenient for building the filtering UI on the front end.
Sample code snippet (used to generate filter UI):
{# 假设我们有一个房源模型，moduleId为3 #}
<div>
<p>筛选条件：</p>
{% archiveFilters filters with moduleId="3" 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>
This code will iterate over all selectable custom fields and generate a list for each field and its options. When the user clicks on an option, the page URL will carry the corresponding filter parameters.
Accurately obtain filtered results:archiveListPowerful combination of tags
After the user clicks the filter condition, the page URL will contain something like?region=上海&price_min=1000&price_max=2000parameters. At this point, the Anqi CMS'sarchiveListTemplate tags have taken effect.
archiveListTags are used to retrieve the list of articles (or any document type). When itstypethe parameter to"page"(Indicates that this is a pagination list) It will automatically parse all query parameters from the current URL, including keyword search (qparameters) and the filtering parameters you define (such asregion/price_minAnd), and retrieve the matching content from the database according to these parameters.
This means you do not need to write complex backend code to handle the filtering logic.archiveListThe tag will automatically complete this process. It will dynamically adjust the query based on the URL parameters and return a list of articles that meet all the conditions.
Sample code snippet (combining filter UI with list display):
``twig {# This is a listing page for housing resources, moduleId is 3 #}
{# Filter condition UI part, as shown above #}
<p>筛选条件：</p>
{% archiveFilters filters with moduleId="3" 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 %}
{# Article list display part #}
{% archiveList archives with moduleId="3" type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<p>{{item.Description}}</p>
{# 假设您有价格和地域的自定义字段，可以直接通过item.Price和item.Region调用 #}
<p>价格: {{item.Price}} | 地域: {{item.Region}}</p>
<span>发布时间: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
</div>
{% empty %}
<p>抱歉，没有找到符合条件的房源信息。</