如何在安企CMS中为产品列表页面添加多维度参数筛选功能，并显示筛选结果？

在现代电子商务和内容展示型网站中，为产品列表提供多维度参数筛选功能已成为提升用户体验和转化率的关键一环。访客能够根据自身需求快速定位所需产品，不仅能节省时间，还能大幅提升网站的可用性。对于安企CMS（AnQiCMS）的用户而言，实现这样的功能并非难事，系统内置的强大功能和灵活的模板标签让整个过程变得直观且高效。

本文将深入探讨如何在安企CMS中为产品列表页面添加多维度参数筛选功能，并清晰地展示筛选结果。我们将从后台配置产品属性开始，逐步讲解到前端模板的构建，确保您能够轻松上手，打造出功能完善的产品展示页面。

理解安企CMS的多维度筛选机制

安企CMS之所以能够轻松实现多维度筛选，核心在于其“灵活的内容模型”和“自定义字段”功能。您可以为不同类型的内容（如产品、文章、服务等）创建专属的内容模型，并在这些模型中添加各种自定义字段。这些自定义字段正是我们进行多维度筛选的基石。

当您在后台为产品定义了可筛选的属性（如颜色、尺寸、材质、品牌等）后，安企CMS提供了两个关键的模板标签来协同工作：

  1. archiveFilters标签：它负责根据您定义的产品模型及其自定义字段，自动生成一系列可供筛选的条件链接。这些链接会智能地将筛选参数附加到URL中。
  2. archiveList标签：这个标签用于获取产品列表。当URL中包含由archiveFilters生成的筛选参数时，archiveList会智能地读取这些参数，并返回符合条件的产品数据。

这种机制使得我们无需编写复杂的后端逻辑，只需通过简单的后台配置和前端模板标签，就能实现强大的多维度筛选功能。

后台配置：为产品定义可筛选属性

要为产品列表添加筛选功能，首先需要在安企CMS的后台为您的产品模型定义相应的可筛选属性。

  1. 进入内容模型管理：登录安企CMS后台，导航至“内容管理” -> “内容模型”。
  2. 选择或创建产品模型：通常，安企CMS会内置一个“产品模型”。如果您需要更精细的管理，也可以创建一个新的产品模型。点击进入您希望添加筛选功能的产品模型编辑页面。
  3. 添加自定义字段：在这里，您将看到模型已有的字段和“内容模型自定义字段”区域。点击“添加字段”，为您的产品添加可筛选的属性。
    • 参数名：这是字段的中文名称，例如“颜色”、“尺寸”、“材质”。
    • 调用字段：这是在模板中调用该字段时使用的英文标识符，例如color、size、material。请确保使用英文小写字母。
    • 字段类型：这一步至关重要，它决定了筛选条件的形式。
      • 单项选择/下拉选择：适用于产品属性是互斥的，例如“颜色：红色、蓝色、黑色”。用户只能选择其中一个。
      • 多项选择：适用于产品属性可以是多个的，例如“特点：防水、防晒、耐磨”。用户可以同时选择多个。
    • 默认值：对于单项选择、多项选择或下拉选择类型的字段，您需要在这里输入所有可能的选项，每行一个。例如，如果字段是“颜色”，可以在默认值中输入： 
      
红色
蓝色
白色
黑色
      这些选项将成为前端筛选条件中的具体值。
    • 是否必填：根据您的业务需求决定。
    • 保存您添加的自定义字段。

完成自定义字段的设置后，当您在后台添加或编辑产品时，就可以为每个产品填入这些新定义的属性值了。这些属性值将成为前端筛选的数据来源。

前端模板：构建筛选界面与结果展示

后台配置完成后，接下来就是修改您的产品列表页模板，通常这个模板文件可能是product/list.html或者您自定义的列表模板。

步骤1：生成筛选条件

在产品列表页模板中，找到您希望放置筛选条件的位置（通常在产品列表的上方或侧边栏）。使用archiveFilters标签来生成筛选条件：

{# 假设您的产品模型ID是2，并且您希望“全部”选项显示为“不限” #}
<div class="product-filters">
    {% archiveFilters filters with moduleId="2" 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> {# val.Link 包含了筛选参数的URL #}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

代码说明：

  • moduleId="2"：请替换为您的产品模型ID。您可以在后台“内容模型”中找到对应的ID。
  • allText="不限"：设置“全部”选项的显示文本，如果设置为false则不显示“全部”选项。
  • filters：这是archiveFilters标签返回的一个数组对象，包含了所有可筛选的维度（如颜色、尺寸）。
  • item.Name：显示筛选维度（如“颜色”）。
  • item.Items：这是当前筛选维度下的所有选项（如“红色”、“蓝色”），也是一个数组。
  • val.Label：显示具体选项的名称（如“红色”）。
  • val.Link：这是关键！安企CMS会自动生成包含相应筛选参数的URL。当用户点击这个链接时，页面会刷新，并带着新的筛选参数。
  • val.IsCurrent：判断当前选项是否被选中，可以用于添加active类名，以便通过CSS突出显示当前选中的筛选条件。

步骤2：展示筛选结果

在生成筛选条件之后，紧接着就是展示根据这些条件筛选出的产品列表。您需要使用archiveList标签，并确保其type参数设置为"page"，这样它才能响应URL中的筛选参数并进行分页。

<div class="product-list">
    {% archiveList archives with type="page" moduleId="2" limit="12" %} {# 每页显示12个产品 #}
        {% for product in archives %}
        <div class="product-item">
            <a href="{{ product.Link }}">
                {% if product.Thumb %}<img src="{{ product.Thumb }}" alt="{{ product.Title }}" />{% endif %}
                <h3>{{ product.Title }}</h3>
                <p>{{ product.Description }}</p>
                {# 假设您有自定义字段：价格 price，颜色 color #}
                {# 您也可以通过archiveParams标签循环显示所有自定义字段 #}
                {% archiveDetail productPrice with name="price" id=product.Id %}<p>价格: {{ productPrice }}</p>{% endarchiveDetail %}
                {% archiveDetail productColor with name="color" id=product.Id %}<p>颜色: {{ productColor }}</p>{% endarchiveDetail %}
            </a>
        </div>
        {% empty %}
        <p class="no-results">没有找到符合条件的产品。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

代码说明：

  • moduleId="2"：同样替换为您的产品模型ID。
  • type="page"：非常重要！这告诉archiveList去解析URL中的查询参数，并进行分页处理。
  • limit="12"：设置每页显示的产品数量。
  • product：这是archiveList循环出的每个产品对象，您可以像常规产品列表一样访问其属性（product.Title、product.Link、product.Thumb等）。
  • 自定义字段的显示：对于自定义字段，您可以使用archiveDetail标签来单独获取，或者使用archiveParams标签来循环显示所有自定义参数。例如，{% archiveDetail productPrice with name="price" id=product.Id %}会获取当前产品（id=product.Id）中名为price的自定义字段值。

步骤3：添加分页功能

当产品数量较多时，分页是必不可少的。结合archiveList的type="page"模式，您可以使用pagination标签来轻松添加分页：

<div class="pagination-area">
    {% pagination pages with show="5" %} {# 最多显示5个页码按钮 #}
    <ul class="pagination-list">
        {% if pages.FirstPage %}<li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a></li>{% endif %}
        {% if pages.PrevPage %}<li class="prev"><a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</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 class="next"><a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a></li>{% endif %}
        {% if pages.LastPage %}<li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a></li>{% endif %}
    </ul>
    {% endpagination %}
</div>

代码说明：

  • pages：这是pagination标签提供给我们的分页信息对象。
  • show="5"：控制分页区域一次性显示多少个页码按钮。
  • pages.FirstPage.Link、pages.PrevPage.Link等：这些链接都会自动携带当前的筛选参数，确保用户在点击分页时，筛选条件不会丢失。

优化与实用建议

  • 设计用户友好的筛选界面：筛选条件的视觉设计非常重要。通过CSS让当前选中的条件突出显示，提供“清除所有筛选”的按钮（通常只需