In the era of content explosion, when users visit websites, they often hope to quickly find the content they are interested in.Whether browsing the vast amount of products on e-commerce platforms or searching for housing that meets one's preferences on real estate websites, a powerful and user-friendly filter and search interface is the key to enhancing user experience.
AnQiCMS (AnQiCMS) knows this well and provides a powerfularchiveFiltersThis tag can help you easily build complex product or real estate filtering interfaces, making your website content more discoverable and interactive, without writing complex backend logic.
Understand the core elements of the filtering interface
To build an efficient filtering interface, we need several core components to work together:
Content model and custom fields:This is the basis of the filtering function.You need to define various filter properties in the content model of the Anqi CMS backend.For a real estate website, you can define fields such as 'Property Type' (residential, commercial, apartment), 'Area Range', 'Number of Bedrooms', 'Decorating Condition', etc.For the product website, it can be 'color', 'size', 'brand', 'memory size', etc.The key is that these fields need to be set to 'Single Choice' or 'Multiple Choice' and other suitable filter types, and the available options should be preset within them.These preset values will be directly converted to the frontend filter options.
archiveFiltersThe magic of tags:This tag is the filter interface generator.It generates a series of filterable options automatically based on the content model and its custom fields you specify.It's even better that it generates a link with the correct URL parameters for each option.When the user clicks these links, the page will reload, but the URL will carry the filter conditions selected by the user.archiveListThe responsiveness of tags:archiveFiltersGenerated URL parameters, will be applied on the same page.archiveListTags are automatically recognized and applied. This means, you do not need to forarchiveListThe label writes complex parameters to handle the filtering logic, it automatically reads the filtering conditions from the URL and retrieves documents that meet these conditions from the database for display.
These three work together to form a powerful mechanism that allows for dynamic filtering without any additional development.
Practice: Build the filtering interface step by step.
Now, let's go step by step to see how to build a property filtering interface in Anqi CMS.
Step 1: Preparation - Define the content model and filtering fields
Firstly, you need to define or edit your content model in the Anqi CMS backend.Assume we have a content model named "Real Estate
- Field Type (FieldName:)
houseType):- Field Type: Single Choice
- Default Value: Residence, Shop, Apartment, Villa (one option per line)
- Number of bedrooms (FieldName:)
bedrooms):- Field Type: Single Choice
- Default value: 1 bedroom, 2 bedrooms, 3 bedrooms, 4 bedrooms or more
- Decorating situation (FieldName:)
decoration):- Field Type: Single Choice
- Default: Fully decorated, bare, semi-decorated
Please ensure that these fields have been saved and that you have published some documents containing these custom fields under the "Real Estate" content model.
Second step: Insert into the list page templatearchiveFilterstags
Next, open the template file you use to display property listings, usually the 'Property' content model corresponding to your{模型table}/list.htmlor{模型table}/index.html.
In this template, find the location where you want to place the filter conditions. We can usearchiveFiltersThis tag generates a filter. This tag will output a data structure containing all the filter options, and we need to traverse it to build the actual HTML interface.
{# 假设您的房产模型ID是2，请根据实际情况修改 #}
<div>
<div class="filter-group">
<h3>房产筛选</h3>
{% archiveFilters filters with moduleId="2" allText="不限" %}
{% for item in filters %}
<ul class="filter-category">
<li class="filter-label">{{item.Name}}: </li>
{% for val in item.Items %}
<li class="filter-option {% if val.IsCurrent %}active{% endif %}">
<a href="{{val.Link}}">{{val.Label}}</a>
</li>
{% endfor %}
</ul>
{% endfor %}
{% endarchiveFilters %}
</div>
{# 房产列表将在此处显示 #}
<div class="property-list">
{% archiveList archives with moduleId="2" type="page" limit="10" %}
{% for item in archives %}
<div class="property-card">
<a href="{{item.Link}}">
{% if item.Thumb %}
<img src="{{item.Thumb}}" alt="{{item.Title}}" class="property-thumbnail">
{% endif %}
<h4>{{item.Title}}</h4>
<p>
{% archiveDetail houseType with name="houseType" id=item.Id %}
<span>类型: {{ houseType }}</span>
{% archiveDetail bedrooms with name="bedrooms" id=item.Id %}
<span> | 卧室: {{ bedrooms }}</span>
{% archiveDetail decoration with name="decoration" id=item.Id %}
<span> | 装修: {{ decoration }}</span>
</p>
<p class="description">{{item.Description}}</p>
<span class="views">{{item.Views}} 浏览</span>
</a>
</div>
{% empty %}
<p>暂无符合条件的房产信息。</p>
{% endfor %}
{% endarchiveList %}
{# 分页导航 #}
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul>
<li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">首页</a></li>
{% if pages.PrevPage %}
<li><a href="{{pages.PrevPage.Link}}">上一页</a></li>
{% endif %}
{% for item in pages.Pages %}
<li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
{% endfor %}
{% if pages.NextPage %}
<li><a href="{{pages.NextPage.Link}}">下一页</a></li>
{% endif %}
<li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">尾页</a></li>
</ul>
{% endpagination %}
</div>
</div>
</div>
In this example:
moduleId="2"Replace it with the actual ID of your content model. You can view the model ID in the background under 'Content Management' -> 'Content Model'.allText="不限"This is the display text for the 'All' option in the filter conditions.filters：This isarchiveFiltersThe main variable of the label output, which includes all fields and options that can be filtered.item.Name：Displays the name of a custom field, such as "House Typeitem.FieldName：Is the actual field name of the custom field in the database, such ashouseType.item.Items[en]：Are all available filter options under the current custom field.val.Label[en]：Displays the text of the filter options, such as 'Residential', 'Commercial'.val.LinkThis URL will be redirected to when this option is clicked, and it includes the corresponding filtering parameters.val.IsCurrentAn boolean value used to determine whether the current option is selected, which is convenient for you to add the 'active' style via CSS.
Step 3: Display the filtered results - combinedarchiveList
In the above code example, we have placed thearchiveListtags and filters on the same page. When the user clicks the filter conditions, the page will reload,archiveListThe label will automatically read the filtering parameters from the URL and query the documents that match these parameters from the "Real Estate" model for display.
For example, if the user clicks on "House Type: Residential", the URL may change to/fangchan/list.html?houseType=住宅【en】At this point,archiveListit will automatically understand this parameter and only display properties of the type "Residential".