How to implement document parameter filtering in AnQiCMS templates, for example, filtering by house type?

As an experienced CMS website operation personnel, I know how important it is for users to efficiently find the content they need when visiting a website with a large amount of information.The content filtering function can not only greatly improve user experience, but is also a key factor in optimizing website structure and SEO performance.Today, I will elaborate on how to implement document parameter filtering in AnQiCMS templates, taking the 'filter by house type' as an example, to help your website better serve users.

Build flexible content filtering capabilities: from model definition to template implementation

To implement document parameter filtering in AnQiCMS, the core lies in utilizing its powerful content model customization features and template tag system.This allows us to add filterable properties to documents based on business needs, such as 'house type' and 'number of bedrooms' on real estate websites, and present them as user-friendly filter options in front-end templates.

Firstly, we need to define the content model and custom fields in the AnQiCMS backend.For example, you can create a content model named "House".

  • House type (HouseType)The field type can be selected as 'Single choice' or 'Dropdown', and options such as 'Apartment', 'Villa', 'Townhouse', 'Shop' can be set.
  • Number of bedroomsYou can choose 'numeric' or 'single choice', options can be '1 bedroom', '2 bedrooms', '3 bedrooms', etc.
  • Area (Area): Field type is "numeric".
  • Price Range (PriceRange): It can be set to 'Single Choice' or 'Drop-down Selection', options can be 'Below 500,000', '50-1,000,000', etc.

These custom fields' "call fieldsEnsure that the naming of these fields is clear and conforms to business logic.v2.0.0-alpha6A new feature of the version has been added, which provides the foundation for flexible field definition, including article and product custom parameters.

Present filter options in the template:archiveFiltersThe application of tags

After completing the content model and custom field settings in the background, the next step is to build the filter interface in the front-end template. AnQiCMS providesarchiveFiltersThe tag is used specifically to generate these filtering conditions based on document parameters. This tag is usually used on document list pages, category pages, or search result pages.

Suppose we are building a page to display a list of houses and want the user to be able to filter by "house type". We can use it in the template like thisarchiveFiltersTags:

<div class="filter-section">
    <div class="filter-title">房屋筛选条件</div>
    {% archiveFilters filters with moduleId="[您的房屋模型ID]" allText="不限" %}
        {% for item in filters %}
        <div class="filter-group">
            <span class="filter-label">{{ 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:

  • moduleId="[您的房屋模型ID]"This is an essential parameter, it tellsarchiveFiltersLabel which content model's custom field to load as a filtering condition. You can view the ID of the 'House' model in the background under 'Content Management' -> 'Content Model'.
  • allText="不限"This parameter defines the display text of the 'All' or 'Unlimited' option in the filter options. Clicking on it will clear the filtering conditions of the parameter.
  • filtersThis isarchiveFiltersThe label returns an array object that includes all available filter parameter groups (such as "House type", "Number of bedrooms").
  • item.NameIt indicates the Chinese name of the parameter group, such as 'House Type'.
  • item.ItemsIt is all the optional values under the current parameter group, such as 'Apartment', 'Villa'.
  • val.LinkThis is an AnQiCMS automatically generated filter link, clicking it will update the page content with the corresponding filter parameters.
  • val.IsCurrentA boolean value, if the current option is selected, it will betrueIt can be used to add CSS styles to highlight the current filter status.

Through such a structure,archiveFiltersThe label will traverse each searchable field defined for the "House" model in the background and generate the correct HTML structure with filtering links for each field and its corresponding options.

Dynamic display of filter results:archiveListTag联动

After generating the filter conditions, when the user clicks the filter link, the page needs to dynamically display the matching document list. At this time,archiveListThe tag has taken effect. It is AnQiCMS'sarchiveListThe label is set astype="page"It will automatically parse the query parameters in the URL and filter the document list according to these parameters.

Continue our example of the house list page, combined with the above filter conditionsarchiveListTags may be as follows:

<div class="house-listings">
    {% archiveList archives with type="page" moduleId="[您的房屋模型ID]" limit="10" %}
        {% for item in archives %}
        <div class="house-item">
            <a href="{{ item.Link }}">
                <h3>{{ item.Title }}</h3>
                <p>类型: {% archiveDetail with id=item.Id name="HouseType" %}</p>
                <p>卧室: {% archiveDetail with id=item.Id name="Bedrooms" %}</p>
                <p>面积: {% archiveDetail with id=item.Id name="Area" %}平米</p>
                <p>价格: {% archiveDetail with id=item.Id name="PriceRange" %}</p>
                {% if item.Thumb %}
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                {% endif %}
                <p>{{ item.Description }}</p>
            </a>
        </div>
        {% empty %}
        <p class="no-results">抱歉，没有找到符合条件的房屋。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 结合分页标签，提供翻页功能 #}
    <div class="pagination-section">
        {% pagination pages with show="5" %}
            {# ... 分页代码，参考tag-pagination.md文档 ... #}
        {% endpagination %}
    </div>
</div>

Here:

  • type="page"is the key parameter for dynamic filtering and pagination, it enablesarchiveListCan sense the filtering parameters in the URL.
  • moduleId="[您的房屋模型ID]": witharchiveFiltersMaintain consistency to ensure that the documents of the "House" model are obtained.
  • limit="10": Defines the number of documents displayed per page.

When the user goes througharchiveFiltersThe link is used for filtering (for example, the URL contains?HouseType=公寓)archiveListIt will automatically identify and only display documents where the house type is 'Apartment'. At the same time,archiveDetailTags such as{% archiveDetail with id=item.Id name="HouseType" %}It can be used to display the specific custom field values of each document in list items.To maintain the conciseness of the list, you can also choose not to display all the filtering parameters on the list page, but only to show the core information that users are most concerned about.

optimize and **practice

Implement document parameter filtering function, not just code stacking, but also pay attention to user experience and website performance.

  • URL static and SEO：AnQiCMS supports custom pseudo-static rules. Make sure your filter link (byarchiveFiltersGenerate) can maintain a friendly URL structure, which is beneficial for search engine crawling and ranking. For example,/houses/type-apartment/Than/houses?HouseType=公寓more readable and SEO valuable. You can refer tohelp-plugin-rewrite.mdto configure.
  • Performance consideration: Too many filtering conditions or complex filtering logic on large websites may affect page load speed.Rational planning of custom fields and ensuring the optimization of database indexes is an important means to improve performance.
  • user feedback and iterationAfter launch, collect user feedback and analyze the usage of the filtering function, which can help you continuously optimize the filtering conditions and interface layout to better suit user habits.
  • Multi-site compatibilityIf you use the multi-site management feature of AnQiCMS,archiveFiltersandarchiveListtags are supportedsiteIdparameters, so that specific content or filtering logic can be called between different sites.

By using the above method, you will be able to implement a powerful and flexible document parameter filtering function in AnQiCMS, providing your users with a more efficient and personalized content discovery experience.

Frequently Asked Questions (FAQ)

1. Why did I configurearchiveFilterstags, but no filter conditions are displayed on the page?

This usually has several reasons:

  • You may not have specified in the background "Content Management" -> "Content Model" for you.moduleId(For example, a "House" model) add any custom fields, or add field types that are not suitable for filtering criteria (for example, "Multi-line text" is usually not used for filtering).
  • Custom fields may not be set as filterable when created or edited. Please check the field settings.
  • moduleIdThe parameter may be filled in incorrectly. Please make sure it matches the content model ID you actually want to filter.
  • The current page may not be the document list page or category page context that AnQiCMS considers, resulting in the inability to obtain filterable document model information.

2. The document list did not change after filtering, or an error was displayed?

If the document list does not update correctly after clicking the filter condition, please check the following points:

  • archiveListDid the label get used?type="page"Parameters. This is the key to implementing automatic filtering and pagination based on URL parameters.
  • EnsurearchiveListlabel'smoduleIdwitharchiveFiltersofmoduleIdConsistent, they must point to the same content model.
  • Check if the 'FieldName' field you have customized matches the parameter name generated in the URL. AnQiCMS will use the one you defined in your backend.FieldNameMatch the URL parameters.
  • Confirm that the static rules are correctly configured to ensure that AnQiCMS can correctly parse URLs with filter parameters.

How to display the currently selected filter conditions in the filter results and provide a 'Clear Filters' option?

InarchiveFiltersEach filter option will have a tag output.val.IsCurrentProperty. You can use this property to add a specific CSS class to the currently selected option (for exampleactive), thus highlighting it visually.

Regarding the "Clear Filter" option,archiveFilterslabel'sallTextThe parameter is designed for this purpose.When you click on 'No limit' or 'All', it will generate a link without the filter parameter, thus clearing the filtering conditions of that dimension.If you want to clear all filter conditions, you usually add an additional link at the top of the filter area, pointing to the base list page URL without any query parameters.