How to customize parameter filtering for an article or product list?

In daily website operations, we often encounter the need that users can quickly filter out the content they are interested in according to different attributes of articles or products.For example, on a real estate website, users may want to filter 'two bedrooms and one living room' 'school district' houses;On a product showcase website, users may want to find "red" new T-shirts.AnQiCMS (AnQiCMS) provides a powerful and flexible custom parameter function, which can help us easily achieve this refined content filtering.

This feature implementation mainly relies on the two core features of 'Content Model' and 'Template Tag' of Anqin CMS.By these two, we can define the data structure on the backend, dynamically generate filtering conditions on the frontend, and display the results, thus realizing a complete smooth user experience.

Step 1: Define the custom content model field

To implement custom parameter filtering, you first need to add custom fields to your articles or product models in the Anqi CMS backend.These fields are the "parameters" you want users to be able to filter.

1. Enter content model management:Log in to the AnQi CMS backend, navigate to the "Content Management" menu, and then click "Content Model".Here is listed all the content models on your website, such as 'Article Model' and 'Product Model'.You can choose an existing model to modify or create a completely new model.
2. Add custom field:After entering the selected content model, you will see a "Content Model Custom Field" area.Click to add a field, you can define new properties for this model.For example, if you are making a real estate website, you can add fields such as 'type', 'area', 'renovation', etc.'
   • Parameter name:This is the Chinese display name of the field, convenient for identification and management in the background, such as 'house type'.
   • Call field:This is the field name called in the template, it is recommended to use lowercase letters in English, for examplehouseType.
   • Field type:This is a critical step, which determines how the user selects the filter conditions.
     • Single-line text, number, multi-line text:Applicable for users to freely input numbers or text for filtering (although filtering text is usually more common in search boxes).
     • Single choice, multiple choice, dropdown choice:This is the most commonly used and recommended filtering field type. You can preset multiple options, such as 'Studio, 1 bedroom apartment, 2 bedrooms apartment' for the 'Apartment type' field.These options can be entered one per line in the default value area.
   • Mandatory, default value: Set according to your business needs.

After defining the field, save the content model. In this way, when you publish or edit an article/product, these custom fields will appear in the "Other Parameters" area, waiting for you to fill in specific values for each piece of content.

Step two: fill in custom parameters for article or product content.

After defining the fields in the content model, the next step is to fill in the corresponding values for these newly added custom fields when you publish or edit specific articles or products.

1. Enter the Add/Edit Document Interface:In the background's 'Content Management', select 'Document Management', then click 'Add New Document' or edit an existing document.
2. Fill in custom parameters:Below the document editing page, you will find a collapsible area named "Other Parameters".Expand it, and you will see all the custom fields defined in the first step.Fill in the content according to the actual situation, especially for fields of 'single choice', 'multiple choice', or 'drop-down selection' types.This precise data is the basis for front-end filtering.

Make sure each relevant content has filled in the accurate custom parameter values so that they can be correctly identified and utilized by the subsequent filtering function.

Step 3: Implement the filtering function in the front-end template.

To implement filtering on the front end, we need to utilize the powerful template tag system of Anqi CMS. This mainly involves the cooperation of two tags:archiveFiltersUsed to generate the link for filtering conditions, whilearchiveListIt is responsible for displaying the content based on these filtering conditions.

1. Generate the filtering interface:archiveFiltersTag

archiveFiltersThe tag is used to dynamically generate a series of clickable filter links based on the custom fields you define in the backend content model.

• How to use:

  
  {% archiveFilters filters with moduleId="1" 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 %}
  

• Key parameters:
  • moduleId: Specify the content model you want to filter (for example, article model ID is 1, product model ID is 2).
  • allTextCreate an 'All' or 'Unlimited' option for each filter parameter.

when the user clicksarchiveFiltersWhen generating a link, the link will automatically include the corresponding filtering parameters as query parameters of the URL (for example,?houseType=两室一厅&area=朝阳)

2. Display content based on parameters:archiveListTag

archiveListThe tag is used to retrieve and display articles or product lists. Its most powerful feature is that when the page URL contains custom filter parameters,archiveListThe tag will intelligently recognize these parameters and automatically filter the content list according to these parameters.

• How to use:

  
  {% archiveList archives with type="page" moduleId="1" limit="10" %}
      {% for item in archives %}
          <div class="article-item">
              <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
              <p>{{item.Description}}</p>
              {# 还可以显示自定义参数的值，例如：item.houseType #}
              <p>户型: {{ item.houseType }}</p>
          </div>
      {% empty %}
          <p>暂无符合条件的内容。</p>
      {% endfor %}
  
      {# 分页功能：与筛选结果完美结合 #}
      {% pagination pages with show="5" %}
          <div class="pagination">
              {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
              {% for p in pages.Pages %}<a href="{{p.Link}}" class="{% if p.IsCurrent %}active{% endif %}">{{p.Name}}</a>{% endfor %}
              {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
          </div>
      {% endpagination %}
  {% endarchiveList %}
  

• Key parameters:
  • type="page": Enable pagination feature, withpaginationtag usage
  • moduleId: Specify which content model list to retrieve.
  • limit：The number of items displayed per page.
  • Custom filter parameters: archiveListWill automatically parse the query parameters in the current page URL. For example, if the URL ishttp://yourdomain.com/list?houseType=两室一厅&area=朝阳,archiveListWill automatically determinehouseTypeandareaThese parameters are used to filter the results, no additional specification is required in the tag.

3. Integration to implement dynamic filtering

toarchiveFiltersandarchiveListThe label is placed in the same list page template, which can realize a complete dynamic filtering function. The user clicksarchiveFiltersWhen generating the filter link, the page URL will be updated,archiveListIt will automatically retrieve and display the filtered content according to the new URL parameters, at the same timepaginationThe tags will also generate the correct pagination links according to the filtering results.

By following these steps, your website visitors can use the custom parameters you have carefully set,