README

提供使用分类的条目分面导航，允许站点用户通过应用多个分面来缩小他们看到的条目列表（类似于亚马逊或eBay的左侧边栏）。

在得到原作者Iain Urquhart（http://iain.co.nz）的许可后改编

要求

此插件需要Craft CMS 3.0.0-beta.23或更高版本，Craft CMS 4.0.0-alpha.1或更高版本，或Craft CMS 5.x或更高版本。

安装

要安装此插件，请按照以下说明操作。

Craft插件商店

在插件商店中找到分面导航并点击安装

手动安装

打开您的终端并转到您的Craft项目
```
 cd /path/to/project
```

然后告诉Composer加载插件

 composer require helloswish/craft-faceted-navigation

在控制面板中，转到设置→插件，并单击“分面导航”的“安装”按钮。

设置

版本1.1.1在控制面板中引入了一个设置，允许您选择用户是否可以每个过滤器组选择多个过滤器。默认情况下，用户不能在每个过滤器组中选择多个过滤器。

分面导航概述

此插件提供在Craft CMS 3或4构建的站点上实现分面导航所需的功能。要了解更多关于分面导航的信息，请查看这篇2010 A List Apart文章。

您可以在以下网站上查看此插件的实际效果，并尝试使用它

此插件提供以下功能

可以使用单个分类组，也可以使用多个分类组进行过滤
可以添加尽可能多的分类来过滤条目列表
为每个分类提供添加和删除链接，以将分类添加或从提供给条目查询以过滤的列表中删除
显示当前添加的分类列表，带删除链接，可以独立于完整的分类列表显示
可以提供AND或OR过滤，具有多个分面（所有分面应用中只有一个是AND或OR，而不是AND和OR的组合）

注意：此插件仅适用于使用1级分类的分类组。

屏幕截图

实现分面导航

我将使用上面的莲花收藏实现来演示如何设置此插件。

1. 添加路由

将此路由添加到您的config/routes.php文件中

'inventory/<path:.*?>' => ['template' => 'inventory/index']

(此示例假设分面导航将位于https://domain.com/inventory，并且显示该URL的模板位于您的Craft模板文件夹中的inventory/index)

此路由将确保所有以inventory开头并包含URL中任何数量的分面的请求都将被导向正确的模板。所有其他实现都在模板代码中完成。

2. 设置通道、类别、字段和条目

注意：此插件仅适用于使用1级分类的分类组。

在Craft控制面板中为您的条目创建一个通道。在这个例子中，我们将它称为库存。

在Craft控制面板中创建一个或多个类别组。对于莲花系列，我创建了3个组。句柄分别是productType、productOrigin和textileType。

将您的类别添加到每个组中。

为每个类别组创建类别字段，并将它们分配给您的库存通道。

添加您的条目，并将所有适当的类别分配给它们。

模板代码

调用craft.facetedNavigation.buildFacets可以使您渲染导航集和输出当前过滤器，同时在输出条目时为主craft.entries调用构建一个参数。

基本标签集

在库存/index模板的顶部或附近粘贴基本标签集，以及您的类别组句柄数组。我们还将设置relationParam变量，它可以是AND或OR，具体取决于您希望如何让筛选器过滤条目查询。最后，我们将设置一个params数组，稍后将其馈入我们的条目查询。

{% set navItems = craft.facetedNavigation.buildFacets(['productType', 'productOrigin', 'textileType']) %}
{% set relationParam = ['and'] %}
{% set params = {
	section: 'inventory'
	}
%}

您应该在此处将其他craft.entries参数添加到params数组中，因为我们将在稍后将其附加到它。

输出类别筛选器

为了将类别作为条目查询的筛选器应用，您需要首先在模板中显示这些类别。这些类别必须是链接的，以便当点击时，它们分别添加到用于过滤条目查询的类别组中。当类别已添加时，可以显示一个移除链接。

{% for categoryGroup in navItems.categoryGroups %}
	<h3>{{ categoryGroup.name }}</h5>
	<ul>
		{% for category in attribute(
			navItems.categories, categoryGroup.handle
			) %}
			<li{% if category.active %} class="active"{% endif %}>
				<a href="{{ url('inventory'~category.url.add) }}" class="add">{{ category.title}}</a>
				{% if category.active %} <a href="{{ url('inventory'~category.url.remove) }}" class="remove" title="Remove this filter">Remove</a> {% endif %}
			</li>
		{% endfor %}
	</ul>
{% endfor %}

关于上述代码的一些说明

这将遍历您提供给基本标签集（上面）的所有类别组。然后在每个组内，它将遍历并显示类别。
category.active是一个布尔值，如果类别当前应用，则为true。
category.url.add创建添加类别的链接。使用{{ url('inventory'~category.url.add) }}创建链接。
category.url.remove创建移除类别的链接。使用{{ url('inventory'~category.url.remove) }}创建链接。

输出已添加的类别

您可能想显示已应用筛选器的列表。这也是构建我们的relatedTo变量的好地方，该变量将成为craft.entries查询的参数。

{% if navItems.activeCategories|length %}
	<nav>
		<h4>Viewing items in these categories:</h4>
		<ul>
		{% for category in navItems.activeCategories %}
			{% set relationParam = relationParam|merge([{ targetElement:category }]) %}
			<li>{{ category.title }} <a href="{{ url('inventory'~category.url.remove) }}">Remove</a></li>
		{% endfor %}
		</ul>
	</nav>
{% endif %}

关于上述代码的一些说明

{% if navItems.activeCategories|length %}检查是否有已添加的类别。如果没有，则跳过此代码块。
{% set relationParam = relationParam|merge([{ targetElement:category }]) %}向我们在基本标签集中设置的relationParam数组添加另一个参数。对于每个添加的类别，向该数组添加另一个参数。
我们再次使用{{ url('inventory'~category.url.remove) }}来创建移除链接。

运行条目查询

我们现在收集了所有需要输入到craft.entries中的参数。

{% if relationParam|length > 1 %}
    {% set params = params|merge({relatedTo: relationParam}) %}
{% endif %}
{% set inventory = craft.entries(params) %}

{% for product in inventory.all() %}
    ...
{% endfor %}

关于上述代码的说明

我们仅在添加了类别时将relationParam数组合并到params数组中（在基本标签集的顶部设置）。否则，craft.entries查询只获取该数组上最初设置的参数，在这个例子中是部分句柄inventory。

完整代码示例

以下是我在莲花系列网站上使用的完整代码。它包括周围的HTML和其他Craft功能：https://gist.github.com/chadcrowell/890e78f7af38e02d5ba1bcd497d1441c

由Swish Digital提供

swishdigital / faceted-navigation

维护者

详情