How to build a complex search interface for product filtering or property filtering using the `archiveFilters` tag?

In today's era of content explosion, when users visit websites, they often hope to quickly find the content they are interested in.Whether it is browsing the vast amount of products on e-commerce platforms or finding housing on websites that meet your preferences, a powerful and easy-to-use filtering and search interface is crucial for enhancing user experience.

AnQiCMS (AnQiCMS) knows this and provides strongarchiveFiltersThe tag can help you easily build complex product or real estate filtering interfaces, making your website content more discoverable and interactive without the need to write complex backend logic.

Understand the core elements of the filter interface

To build an efficient filter interface, we need several core components to work together:

1. Content model and custom fields: This is the basis of the filtering function. You need to define various filtering attributes in the content model of Anqi CMS backend.For example, for a real estate website, you can define fields such as 'property type' (residential, commercial, apartment), 'area range', 'number of bedrooms', 'renovation status', etc.For a product website, it can be 'color', 'size', 'brand', 'memory size', etc.The key is that these fields need to be set to 'single selection' or 'multiple selection' and other types suitable for filtering, and preset with the values available for selection.These preset values will be directly converted into the front-end filter options.

2. archiveFiltersThe magic of tags:This label is a filter interface generator. It automatically generates a series of filter options based on the content model and its custom fields.Even better, it will generate a link with the correct URL parameters for each option.When the user clicks on these links, the page will reload, but the URL will carry the filter conditions selected by the user.

3. archiveListThe response of tags: archiveFiltersGenerated URL parameters will be applied on the same page.archiveListTags will be automatically recognized and applied. This means you don't need to doarchiveListThe label writes complex parameters to handle the filtering logic, it automatically reads the filter conditions from the URL and retrieves the documents that meet these conditions from the database to display.

These three work closely together to form a powerful mechanism that can achieve dynamic filtering without additional development.

Practice: Build the filtering interface step by step.

Now, let's go step by step to see how to build a real estate filter interface in Anqi CMS.

First step: Preparation - define the content model and filter fields.

First, you need to define or edit your content model on the AnQi CMS backend.Assuming we have a content model named "Real Estate". Go to "Content Management" -> "Content Models", click on the "Real Estate" model to edit, and then add some custom fields, such as:

• Property Type (FieldName:houseType):
  • Field Type: Single selection
  • Default Value: Residence, Shop, Apartment, Villa (one option per line)
• Bedroom quantity (FieldName:)bedrooms):
  • Field Type: Single selection
  • Default: One bedroom, two bedrooms, three bedrooms, four or more bedrooms
• Decorating situation (FieldName:)decoration):
  • Field Type: Single selection
  • Default value: Fully decorated, raw, simple decorated

Make sure these fields have been saved and that you have published some documents containing these custom fields under the 'Real Estate' content model.

Step two: Insert into the list page templatearchiveFiltersTag

Next, open the template file you use to display the property list, usually the corresponding to your 'property' content model{模型table}/list.htmlor{模型table}/index.html.

In this template, find the position where you want to place the filter conditions. We can usearchiveFiltersTag to generate a filter. This tag will output a data structure containing all filter options, and we need to iterate through 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 "Content Management" -> "Content Model".
• allText="不限"This is the display text of the 'All' option in the filter conditions.
• filtersThis isarchiveFiltersThe main variable of the label output, which includes all filterable fields and options.
• item.Name：Display the custom field name, for example “House Type”, “Number of Bedrooms”.
• item.FieldName：It is the actual field name of the custom field in the database, for example.houseType.
• item.ItemsAre all the available filter options under the current custom field.
• val.LabelIt shows the text of the filter options, for example 'Residential', 'Commercial'.
• val.Link: The URL to which the option will jump when clicked, which includes the corresponding filter parameters.
• val.IsCurrentA boolean value used to determine if the current option is selected, making it convenient to add the 'active' style through CSS.

Step 3: Display the filtered results - combinearchiveList

In the above code example, we have already movedarchiveListtags and filters to the same page. When the user clicks on the filter conditions, the page will reload,archiveListThe label automatically reads the filter parameters from the URL and displays documents that meet the criteria from the "Real Estate" model based on these parameters.

For example, if the user clicks on 'House Type: Residential', the URL may change to/fangchan/list.html?houseType=住宅. At this point,archiveListit will automatically understand this parameter and only display properties of the type 'Residential'.