三年前，一家在线汽车配件商店的老板打电话给我，说了一句从那以后我经常听到的一句话：“我们有一个包含一万五千件商品的目录，人们在没有找到合适的产品的情况下就离开了。”我访问了他的网站，在过滤器中选择了汽车品牌 - 页面重新加载。选择备件类型 - 再次重新启动。我试图指定价格范围 - 再次重新启动，并且所有以前的过滤器都被重置。点击三下——十五秒的等待，完全失去了背景。我关闭了标签。而我是一个专业经营网店的人。普通买家做什么？没错，它会流向 Wildberry，过滤功能会立即发挥作用。
这不是一家商店的故事。这是 WooCommerce 的一个系统性问题，我在几乎每个尚未安装正常 AJAX 过滤器的项目中都看到了这个问题。 WooCommerce 中的标准过滤机制非常简单：您选择一个参数，浏览器发送带有新参数的 GET 请求，服务器处理整个请求 - 从解析 URL 到呈现完整的 HTML 页面 - 并返回结果。对于过滤器的每次点击，都会有一个完整的循环：查询数据库、组装模板、将所有 HTML 发送回浏览器。而如果你有一万个产品，每个产品有十几个属性，而且服务器不是顶级的，那么每次这样的重启可能需要两三秒。乘以将选择范围缩小到您想要的产品所需的五到六次点击，您将获得十五到二十秒的纯等待时间。在此期间，买家有时间改变主意、分心或干脆离开。
我研究这个问题很长时间 - 不是作为开发人员，而是作为营销人员。因为对于营销人员来说，目录过滤不是技术细节，而是销售漏斗的关键要素。在“进入目录”和“添加到购物车”之间有一个过滤器，如果效果不佳，漏斗就流到这里。根据 Baymard Institute 的数据，42% 的大型在线零售商由于过滤不便而失去客户。不是因为价格，也不是因为品种——因为一个人无法快速找到他需要的东西。当我开始为我们的插件设计过滤模块时，我给自己设定了一项任务：确保买家甚至没有注意到过滤器正在工作。没有重新启动，没有滞后，没有“我在等待计算机思考”的感觉。
这就是它的结果 - 以及为什么在幕后它比乍一看要复杂得多。
为什么 WooCommerce 标准过滤很痛苦
要了解为什么 AJAX 过滤器不仅是一个不错的功能，而且是必需的，让我们看看买家在标准 WooCommerce 中过滤产品时会发生什么。假设您有一家工业用油商店。买家输入目录，看到八百种产品，并想要选择某个品牌的 5W-30 机油。他单击“按属性过滤”小部件，选择“机油” - 页面完全重新加载。浏览器发送像“?filter_tip-masla=motornoe”这样的 GET 请求，服务器处理它，WooCommerce 启动带有元查询的 WP_Query，MySQL 迭代 wp_postmeta（一个在包含 16000 个产品的项目中可以达到 1 GB 的表）并在几秒钟内返回结果。比如说，买家会看到三百种产品。现在他想要选择粘度。再次点击 - 再次重新启动，再过两秒。然后是品牌-第三次重启。这是最烦人的事情：在某些主题和配置上，以前的过滤器会在下次重新启动时重置。买家重新开始。
我在实际项目中已经见过这种情况几十次了。店主在广告上投入资金，为 Yandex.Direct 中的每次点击付费，将一个人带到该网站 - 并在过滤阶段失去他。并不是因为没有产品，而是因为有产品，但正常情况下找不到它。这就像一家商店，所有的商品都堆成一堆，卖家延迟三秒回答每个问题。你会离开吗？我本来会离开的。
还有一个没有被太多讨论的问题：WooCommerce 的默认过滤对于 SEO 非常不利。每个过滤器选项都会生成一个带有 GET 参数的唯一 URL，如果搜索机器人开始对所有这些组合建立索引（并且可能有十个属性的十到十次方的组合，每个属性有十个值），那么您最终会得到臃肿的索引、重复的内容和稀释的爬行预算。对于拥有数百种产品的小商店来说，这并不重要，但对于严肃的目录来说，这是一个真正的问题。
实际上，这就是为什么所有主要市场 - Ozon、Wildberry、Yandex.Market - 早已转向 AJAX 过滤的原因。当客户选择一个选项时，浏览器会向服务器发送异步请求，仅接收数据（无页眉、页脚或侧边栏），并仅更新显示产品的页面部分。没有屏幕闪烁，没有重新启动，没有滚动丢失。您点击一下，产品就会立即改变。这是一个行业标准，如果你的商店不提供，你就已经在用户体验层面上输了。
但是 - 这就是事情变得有趣的地方 - 简单地将过滤切换到 AJAX 是不够的。如果带有 wp_postmeta 连接的相同 WP_Query 仍然在后台，您只需删除重新加载，但响应速度将保持不变 - 每个请求相同的一秒半到两秒。买家不会看到页面重新加载，但会看到一个旋转图标代替产品列表。而“页面重新加载”和“产品没有出现”在客户耐心方面的差异几乎为零。因此，在设计过滤模块时，我立即采用了一种完全不同的方法来存储和检索数据。
FilterIndex：当五十毫秒不是营销，而是现实
我们的 AJAX 过滤器与市场上大多数解决方案的主要区别在于预先计算的索引。它被称为 FilterIndex，它的工作原理是搜索引擎使用的：我们不是每次用户请求时都遍历所有产品及其属性，而是提前构建一个优化的表，该表已经包含“产品 - 属性 - 价值 - 价格 - 可用性”的所有必要链接。
这在技术上是如何工作的？当管理员配置过滤器时（例如，按品牌、粘度和油类型添加过滤），系统会通过操作计划程序启动后台任务。此任务将遍历目录中的所有产品，并为每个产品在单独的 wpaic_filter_index 表中记录一组行：诸如此类的产品、“Brand”属性、“Shell”值；产品如此这般，属性“粘度”，值“5W-30”；等等。此外，每行还添加了产品价格、可用性状态、类别和过滤可能需要的其他信息。本质上，我们获取分散在数十个 WordPress 表（wp_posts、wp_postmeta、wp_terms、wp_term_relationships、wp_wc_product_meta_lookup）中的数据，并将其放入具有正确索引的平面表中。
结果？在标准 WooCommerce 过滤中，需要对千兆字节大小的 wp_postmeta 表进行四到五个 JOIN 操作并在一秒半到两秒内完成的查询现在只需三十到五十毫秒即可完成。这不是一个理论数字——这些是对具有九十九个属性的一万六千个产品目录的实际测量结果。速度相差三十到四十倍。买家确实感受到了这种差异：他点击过滤器 - 商品立即出现，无需任何等待。
但是预计算索引有一个明显的问题：如果数据发生了变化怎么办？添加了新产品、更改了价格、更新了 1C 的余额？这就是钩子系统发挥作用的地方。当您更改任何产品时 - 通过 WordPress 中的标准编辑、通过 REST API、通过从 1C 导入 - 会触发一个钩子来更新索引中的相应行。此外，它不会更新整个索引，而只会更新特定产品的行。仅根据管理员的命令或按计划启动索引的完整重建 - 例如，每天一次以保证一致性。在正常模式下，索引几乎是实时增量更新的。
我记得一位客户，一家拥有两万种产品的商店的老板，问我：“你确定索引不会不同步吗？”这是一个公平的问题——我在设计阶段就问自己这个问题。答案是：是的，在某些情况下 - 例如，当通过 WordPress 直接编辑数据库时 - 索引可能会滞后。这就是为什么在控制面板中有一个用于手动重建索引和通过 cron 设置自动重建的按钮。但在正常模式下，当通过 WooCommerce 或通过我们的 1C 连接器更改产品时，不同步会被排除。
我认为重要的另一点是：索引不仅存储属性值，还存储每个值的产品数量。这就是所谓的“多面计数器”——每个过滤器值旁边都会显示与其匹配的产品数量。在标准 WooCommerce 过滤中，这些计数器要么不显示，要么需要对数据库进行额外查询。在我们的例子中，计数器是在请求时计算的，几乎没有额外的成本，因为索引已经包含所有必要的信息。而当买家在滤清器中按品牌选择“壳牌”时，他立即看到有十二种粘度为5W-30的壳牌机油，八种粘度为10W-40的机油。这消除了“选定的参数 - 得到零结果”的情况，这种情况极大地激怒了买家。
说到零结果。标准过滤的问题之一是所谓的“死组合”。买家选择品牌，然后选择油的类型，然后选择粘度 - 并收到一个空白页，因为没有具有这种参数组合的产品。在我们的过滤器中，死组合会被自动阻止：每次选择参数后，所有其他值的计数器都会重新计算，并且具有零乘积的值要么隐藏，要么显示为非活动状态。买家实际上不可能做出空的选择——系统会引导他，只显示相关的选项。
视觉滤镜和样本：界面销售时
老实说，过滤速度是根本，但不是买家首先注意到的。首先映入眼帘的是滤镜的外观。而这里的标准 WooCommerce 一切都非常令人悲伤：带有文本值的下拉列表。 “红”、“蓝”、“绿”——用文字书写。现在想象一下您正在销售油漆、织物、家具或服装。买家需要看到颜色，而不是阅读其名称。他想点击红色圆圈，查看所有红色产品。或者单击博世徽标，即可查看博世的所有内容，而无需记住如何拼写名称 - Bosch、BOSCH 或 Bosch。
我们实现了三种类型的视觉过滤器。第一个是色样。 “颜色”属性的每个值都可以分配一个十六进制颜色代码，在过滤器中，买家看到的不是文本列表，而是一系列彩色圆圈。点击红色，收到红色商品。此外，圆圈不仅仅是静态的 - 所选颜色通过框架突出显示，当鼠标悬停在其上时，会显示带有名称的工具提示。第二种是按钮。这非常适合尺寸（S、M、L、XL、XXL）或离散尺寸（500ml、1L、5L、20L）。这里没有下拉列表，而是一系列可以单击和组合的简洁按钮。第三种是标志。对于 Brand 属性，每个值都可以加载徽标图像，买家通过视觉图像而不是文本来选择品牌。这对于拥有国际品牌的商店尤其重要，因为顾客对徽标的视觉记忆可能比名称的拼写更好。
在这里，我想特别关注不是过滤器中的样本，而是产品卡上的样本。因为这是一项相关但独立的任务。当买家通过过滤器找到产品并转到卡片时，他需要选择一个特定的选项。颜色、尺寸、体积 - 在 WooCommerce 中，这是通过可变产品和标准下拉列表实现的。这些列表是 WooCommerce 在转化方面错失的最大机会之一。
我们的样本模块直接用产品卡上的视觉元素替换下拉列表。对于颜色 - 具有真实颜色的圆圈。对于尺寸 - 按钮。对于品牌 - 徽标微缩模型。但最重要的是，当您选择一个选项时，产品图像会自动发生变化。买家点击蓝色圆圈 - 蓝色版本出现在产品的主照片上。点击红色 - 看到红色。从技术角度来看这是一件小事，但从营销角度来看这是一个巨大的杠杆。与只看到“蓝色”文字并且必须想象它的外观的买家相比，看到自己想要的颜色的产品的买家更接近购买。
我对我们实施样本的三个项目进行了非正式研究。在实施之前，从产品卡到购物车的转化率平均为 8%。引入具有自动图像变化功能的视觉样本后——百分之十一到十二。增幅百分之三十到百分之五十。显然，这不是纯粹的A/B测试，还有其他因素，但趋势很明显。人们购买他们看到的东西，而不是他们读到的东西。
另一个对我来说很重要的细微差别：样本和视觉滤镜应该是一个单一的系统。如果在目录过滤器中“红色”是一个颜色为#FF0000的圆圈，而在产品卡上“红色”是下拉列表中的文本，则买家会感到脱节。在我们的插件中，样本设置是全局的：您一次将“颜色样本”显示类型分配给“颜色”属性，并为每个值设置十六进制代码 - 然后这些样本可以在任何地方使用：在过滤器中，在产品卡上，在小部件中，在搜索结果中。一种设置——整个商店采用单一的视觉语言。
但是我们来谈谈产品列表下方发生的情况 - 分页。因为如果过滤后还剩下两百个产品，而买家需要切换页面才能看到所有产品，那么即使是理想的过滤器也无济于事。
“显示更多”代替分页：小按钮，大作用
您知道 WooCommerce 总是让我感到惊讶的是什么吗？标准分页 - “1, 2, 3, ... 15, Next” - 是在每个页面都完全加载并且用户坐在桌面上使用鼠标的时代发明的。如今，超过百分之六十的客户来自移动设备，对他们来说，切换页面是一种痛苦。您需要用手指点击的小链接，加上每次转换都意味着页面重新加载，以及滚动位置的丢失。 Ozon 和 Wildberry 很久以前就用“显示更多”按钮和无限加载取代了这一点，这并非巧合 - 它只是更方便。
在我们的插件中，我们实现了“加载更多”模块，该模块用“显示更多”按钮替换了标准的 WooCommerce 分页。买家滚动到当前部分货物的末尾，按下一个大按钮 - 下一部分就会顺利添加到已经加载的货物中。无需重新加载，不会丢失滚动，无需瞄准小分页数。这与 AJAX 过滤器结合使用效果非常好：买家选择参数，看到前 20 个产品，单击“显示更多”，然后看到另外 20 个产品。一切都在一页上，一切都没有闪烁。
从技术上讲，它的工作原理是这样的：单击按钮时，JavaScript 会发送带有当前过滤选项和下一个“页”号的 AJAX 请求。服务器返回下一批产品的 HTML 标记，脚本将其插入到最后一个产品之后的 DOM 中。地址栏中的 URL 不会更改，滚动会保留，所选过滤器也会保留在原位。对于买家来说，商品似乎只是“出现”在列表的底部。
但我想谈谈一个微妙之处，因为许多开发人员都偶然发现了它。当您在 WooCommerce 上使用无限加载时，您需要妥善处理产品用完的情况。如果买家已到达最后一部分，“显示更多”按钮应该消失，并且建议显示一条不显眼的消息“所有产品均已加载”。这听起来微不足道，但我见过一些实现，其中按钮继续显示并在单击时返回空响应，让客户感到困惑。或者，相反，该按钮消失了，但在更换过滤器时它没有出现，买家只看到了两百种产品中的前二十种。在我们的模块中，按钮是状态控制的：它知道还剩下多少产品并向买家显示 - “显示更多（剩余 45 件）”。当过滤器更换时，计数器会自动重置并重新计算。
我认为还有一件事对于移动用户来说至关重要：按钮大小和位置。标准 WooCommerce 分页链接是小数字，很难用手机上的手指触及。我们的“显示更多”按钮是一个带有大文本的全角按钮，您不能错过。它通过 CSS 变量进行风格化，以匹配商店的整体设计，管理员可以自定义其颜色、舍入和缩进 - 但默认情况下，它看起来已经很好了，最重要的是，很容易从任何设备上单击。
这提出了一个我经常被问到的问题：SEO 怎么样？如果所有产品都通过 AJAX 加载，搜索机器人将如何看到完整的目录？这是一个非常重要的问题，答案就在于建筑。我们的“加载更多”模块不会取代服务器端分页，而是对其进行补充。该页面的 HTML 代码包含指向以下页面的标准链接 - rel="next" 和 rel="prev"。不执行 JavaScript 的搜索机器人会像平常一样跟踪这些链接并索引所有目录页面。正在运行 JavaScript 的买家会看到“显示更多”按钮而不是分页链接，并通过 AJAX 加载产品。因此，我们获得了两全其美的好处：为买家提供方便的用户体验，为搜索机器人提供完整的索引。
顺便说一下filter和loading的结合。当买家更改过滤器参数时，“加载更多”模块会自动重置：显示根据新标准的第一部分产品，重置计数器，并且按钮更新剩余产品的数量。这似乎是显而易见的，但在实践中，集成两个 AJAX 模块（过滤和加载）需要仔细协调。他们必须使用共同的状态，我们花了很多时间来实现这种无缝连接。
现在我们来谈谈这一切在移动设备上是如何工作的。因为移动过滤是一个不同的故事，有其自己的问题和解决方案。
在桌面上，过滤器通常位于产品列表左侧的侧边栏中。屏幕很大，有足够的空间，过滤器面板始终可见 - 单击并选择。在移动设备上就没有这样的奢侈了。侧边栏根本不适合在 390 像素宽的屏幕上的产品旁边。这里有两种典型的解决方案，但都不成功。第一个是显示过滤器上面的产品，一个长列表。买家看到一个充满过滤器的屏幕，必须滚动浏览它们才能看到至少一种产品。第二种是将过滤器隐藏在标准折叠元素或下拉块中。买家点击 - 过滤器打开，但同时他们将产品向下移动，所有内容都会跳到屏幕上。
我们采取了第三条路线：覆盖层形式的可折叠过滤器面板。在移动设备上，买家会看到一个“过滤器”按钮 - 通常位于目录顶部，产品排序和数量旁边。当您单击此按钮时，过滤器面板会从侧面滑出 - 就像许多移动网站上的菜单一样 - 并占据大约百分之八十的屏幕。买家选择必要的参数，单击“显示”-面板关闭并且产品更新。重要的是，在这种情况下，产品会在面板打开时实时更新：买家会在“显示”按钮上看到“找到：42 个产品”计数器，并且每次更改过滤器时都会更新该计数器。这可以让买家立即得到反馈，了解他是否过多地缩小了选择范围。
我们在移动设备上使用的另一个技巧是所选过滤器的“芯片”。关闭过滤器面板后，产品列表上方会出现紧凑的“筹码” - 带有所选值的小条：“Shell”、“5W-30”、“In stock”。通过移除相应的过滤器，可以一键移除每个芯片。这比再次打开面板删除一个参数要方便得多。这节省了买家的时间 - 而且移动时间的价值加倍，因为移动会话通常比桌面会话短。
我注意到的一件有趣的事情是，在移动设备上，消费者平均一次使用的过滤器较少 - 通常是一个或两个，最多三个。但他们使用它们的频率更高、速度更快。因此，响应速度至关重要：五十毫秒的索引响应在这里比在桌面上发挥更大的作用。如果移动客户点击过滤器并等待超过一秒，他很可能会认为某些内容已损坏并开始再次点击。双击过滤器通常意味着选择并立即取消 - 买家只能继续原地踏步，只会感到恼火。
现在让我们谈谈许多店主面临的情况：从现有解决方案迁移。因为大多数 WooCommerce 商店都不是从头开始构建的 - 它们已经有某种过滤器，通常是 YITH Ajax 产品过滤器或来自其他开发人员的 WooCommerce 产品过滤器。
从 YITH 和其他过滤器迁移：如何不丢失数据和神经
我多次遇到这样的情况：一家商店多年来一直使用 YITH Ajax Product Filter，而店主想改用其他产品。有不同的原因：YITH 停止更新，开始与主题冲突，在大型目录上运行太慢，或者只是厌倦了单独为过滤器、单独为样本、单独为分页付费。业主问的第一个问题是：“过滤器设置会被保存吗？”
老实说：不同过滤插件之间的设置不存在 100% 自动迁移。架构差异太大，存储配置的方式差异太大。 YITH 将其预设存储在 WordPress 选项和 postmeta 中，其他插件使用自定义表，其他插件使用 JSON 文件。但您也不需要手动迁移 - 我们的模块有一个迁移工具，可以分析已安装的过滤插件并提供设置映射。
这在实践中是如何运作的？当您首次激活我们的过滤模块时，系统会检查是否安装了 YITH Ajax Product Filter（或 YITH WooCommerce Ajax Product Filter Premium）。如果是，设置界面中会出现“迁移”选项卡，其中包含有关找到的 YITH 预设、配置的过滤器及其类型的信息。管理员可以查看 YITH 中配置了哪些属性、使用了哪些显示类型（复选框、下拉列表、色样、价格滑块），并且可以一键启动迁移。系统在我们的模块中创建类似的过滤器，映射显示类型（YITH“颜色”→我们的“样本”，YITH“标签”→我们的“按钮”等）并构建索引。
但我想警告您：迁移后，您肯定需要手动检查结果。并不是因为迁移不可靠，而是因为这是重新考虑过滤器结构的绝佳理由。经常发生的情况是，YITH 中的过滤器是在两三年前配置的，从那时起，范围发生了变化，出现了新属性，某些值已经过时 - 并且迁移盲目地按原样复制所有内容，包括不再相关的设置。我鼓励客户以迁移为起点，然后仔细检查每个过滤器并问自己：“客户真的需要这个吗？”
顺便说一句，迁移过程中最常见的问题之一是“URL 会发生什么变化？” YITH 有自己的过滤 URL 的格式（通常使用哈希值或自定义参数），而我们的模块也有自己的格式。如果您在广告或内部链接中主动使用过滤 URL，这些 URL 在迁移过程中将不再起作用。在这种情况下，我建议通过我们的 SEO 重定向模块设置重定向，该模块支持正则表达式模式。一些规则 - 旧的过滤链接将正确重定向到新的过滤链接。
迁移经验中的另一个实用提示：在完全配置新过滤器之前，不要禁用旧过滤器。这听起来很明显，但我见过人们停用 YITH，激活我们的模块并开始配置 - 而实时商店运行时根本没有过滤。这可能需要一两个小时，在此期间您将损失一些销售额。最好并行设置一个新的过滤器（直到将其短代码放置在页面上才会发生冲突），确保一切正常，并同时切换。
我想再次强调我不断回归的想法：目录过滤不是一个技术功能，而是一个销售元素。每家从 WooCommerce 的标准过滤或旧插件迁移到我们的 AJAX 预索引过滤器的商店都看到了行为指标的改进。降低目录页面的跳出率，增加浏览深度，增加网站停留时间。最重要的是，从查看目录到添加到购物车的转化率有所提高。因为当客户快速找到他们需要的东西时，他们更有可能购买。
现在让我们谈谈如何将所有这些整合到一个系统中，以及为什么“一个插件适用于所有内容”方法在这里至关重要。
您知道我认为“一个开发人员的过滤器、另一个开发人员的样本、第三个开发人员的分页”方法的主要问题是什么吗？这些不是插件冲突，尽管它们也会发生。这就是用户体验的差距。买家在过滤器中选择一种颜色，然后看到一个美丽的圆圈。转到产品卡 - 有一个文本下拉列表。单击“显示更多” - 过滤器将被重置，因为分页插件不知道过滤插件。这些插件中的每一个都可以单独使用，但它们一起创造了弗兰肯斯坦的感觉 - 由不同的部分缝合在一起，不均匀，有突出的接缝。
当过滤器、样本、产品加载和索引属于同一模块时，它们共享一个公共状态。过滤 JavaScript 代码了解加载模块并与其正确交互。样本设置在过滤器和产品卡上的应用方式相同。过滤索引考虑通过其他插件模块更新的数据 - 1C 同步、批量编辑、导入。这不仅为开发商带来了便利，而且为买家带来了根本不同的用户体验。
我经常用汽车来比喻。你可以用不同制造商的零件组装一辆汽车：一个制造商的发动机，另一个制造商的悬架，第三个制造商的电子设备。从技术上来说这是可能的，并且每个细节都可以具有卓越的品质。但整体设计的汽车会开得更好——因为工程师优化了所有组件的交互，而不是单独优化每个组件。这与在线商店相同：买家不需要世界上最好的过滤器、最好的样本和最好的分页。他需要一个整体有效的目录——快速、美观且可预测。
在这里我想回到我开始的主题 - 速度。因为预计算索引并不是我们所做的唯一优化。还有其他一些因素会影响感知的过滤率。首先，乐观的更新：当购物者点击过滤器时，产品网格立即收到 CSS“加载”效果（轻微变暗或模糊），同时发送 AJAX 请求。当响应到达时（三十到五十毫秒后 - 我提醒你），产品将被更新，加载效果将被删除。对于买家来说，这看起来像是即时反应：他点击了 - 网格“闪烁” - 新货物就位。此外，它“眨眼”的速度如此之快，以至于买家不会将其视为期望，而是对动作的视觉确认。
其次，客户端缓存。如果买家选择“壳牌，5W-30”并收到十二个产品，然后删除“5W-30”并查看所有壳牌油，然后再次放入“5W-30” - 第二次相同的请求将不会发送到服务器，而是从浏览器缓存发送。当买家来回尝试不同的组合时，这可以节省流量并加快“返回”过滤过程中的导航速度。
第三 - 这可能是最不明显的优化 - 我们从服务器发送的不是产品卡的完整 HTML，而是所需的最低限度。目录中的标准 WooCommerce 产品卡模板可以包含数十个挂钩，每个挂钩都添加 HTML：一个插件的比较按钮、另一个插件的收藏夹图标、第三个插件的评级。在包含 20 个产品的页面上，这可能是两三百 KB 的 HTML。我们优化了服务器渲染，以便 AJAX 响应仅包含所需的最少内容，并且在将卡片插入 DOM 后在客户端上初始化其他元素（比较按钮、样本、图标）。结果是服务器的响应变得容易三到四倍，并且在移动互联网速度较慢的情况下，这是一个明显的差异。
最后，我想谈的最后一件事是过滤分析。我们在过滤模块中内置了统计数据收集：哪些过滤器最常使用、选择了哪些组合、哪些值从未被点击、有多少次买家出现零结果。这些数据可在控制面板中获取，并帮助店主优化目录。如果您发现“制造国”过滤器用于过滤的百分之零点二，则可能值得将其删除，以免使面板混乱。如果您发现客户经常按品牌进行过滤，然后立即按粘度进行过滤，那么将这两个过滤器放在第一位是有意义的。如果您发现移动客户仅使用价格滑块和品牌，您可以隐藏移动版本的其余过滤器，仅通过单独的“所有过滤器”点击来显示它们。
事情是这样的：目录过滤并不是“设置好后就忘记它”。这是一个需要定制的生活工具，以适应您的产品范围和客户。您收集的有关买家筛选方式的数据越多，您的定制就越精确。我们试图为店主提供的不仅仅是一个过滤器，而是一个了解客户如何搜索产品的工具。
当我开始设计这个模块时，我给自己设定了一个简单的目标：让 WooCommerce 在线商店中的买家能够像在 Ozon 或 Wildberry 上一样快速方便地找到产品。不是“几乎相同”，也不是“有一些限制”，而是确实相同。无需重新加载的即时过滤，视觉样本而不是文本列表，无限加载而不是编号页面，方便的移动过滤面板。因此，这一切都可以快速完成——不是几秒钟，而是几十毫秒。
有效吗？我想是的 - 但不是因为我们编写了出色的代码，而是因为我们正确地设置了优先级。我们不是从漂亮的界面开始，而是从性能开始——使用预先计算的索引。因为减慢速度的漂亮滤镜仍然是糟糕的滤镜。然后他们在快速核心之上构建了一个方便的界面：样本、芯片、移动覆盖层、下载按钮。他们将其连接到一个系统中，其中每个元素都了解所有其他元素。
如果您当前正在查看 WooCommerce 商店并看到过滤器中的标准下拉列表、目录底部的编号分页以及每次点击都会重新加载页面 - 想想您每天会失去多少客户。不是因为价格，也不是因为品种多，而是因为他们查找起来不方便。 COS WP Woo 中的 AJAX 过滤模块全面解决了这一问题：过滤、可视化展示、加载、移动适配、索引和分析 - 全部在一个插件中，无需购买和配置五种不同的解决方案。尝试一下并在一周内查看您的指标。我相信这些数字会让你感到惊讶。
现在 - 关于陷阱的诚实对话。因为我不喜欢一切都完美无缺的文章。任何技术都有其局限性，AJAX 过滤也不例外。
第一个陷阱是服务器级缓存。如果您有 LiteSpeed、Varnish、nginx FastCGI 缓存或任何其他服务器缓存，AJAX 过滤请求应该绕过它。听起来很简单，但实际上需要正确的配置。 AJAX 请求发送到相同的 wp-admin/admin-ajax.php 或自定义 REST 端点，服务器缓存可以开始缓存过滤结果。结果，买家选择“壳牌” - 但看到的是卢克石油公司的结果，因为缓存返回了另一个买家先前请求的答案。我们通过两种方式解决这个问题：首先，我们使用 POST 请求进行过滤（服务器缓存通常不缓存 POST），其次，我们在响应中添加无缓存标头。但如果您自己设置服务器缓存，请记住这一点，因为缓存的 AJAX 过滤器不仅仅是一个错误，它还是一个向买家显示其他人的结果的错误。
第二块石头是可访问性。当所有内容通过 JavaScript 更新而不重新加载页面时，屏幕阅读器和其他辅助技术可能不会注意到更改。我们将 ARIA 属性添加到产品区域 (aria-live="polite")，并在每次更新时宣布辅助技术的更改。这对于普通消费者来说并不明显，但对于使用屏幕阅读器的人来说至关重要。顺便说一句，这会影响 Lighthouse 的可访问性分数，而这正日益成为一个排名因素。
第三点是具有自定义字段的繁重目录。如果您的产品不使用标准 WooCommerce 属性，而是使用自定义字段（ACF、我们的 CF 模块或只是 wp_postmeta），则索引这些字段需要额外的配置。标准 WooCommerce 属性（pa_color、pa_size 等）会自动索引，但自定义元字段必须在过滤器设置中显式指定 - 要索引的字段以及如何显示它。我们使界面尽可能简单：从下拉列表中选择元键，指定显示类型（复选框、滑块、样本） - 系统在下次重建期间将此字段包含在索引中。但您需要提前了解这一点，以免对新的“倾点”过滤器没有显示值感到惊讶 - 因为您忘记将其包含在索引中。
最后一件事是大量同时过滤器的性能。我们的索引适用于五到十个同时活动的过滤器，但如果您有一个包含三十个属性的目录，并且买家同时打开了二十个过滤器，则响应时间可能会增加到一百到一百五十毫秒。与标准 WooCommerce 相比（此类请求需要五到十秒），这仍然非常快，但对于简单过滤来说，明显慢于 50 毫秒。在实践中，这种情况很少出现 - 买家通常一次使用三到五个过滤器 - 但如果您有一个具有很多技术特征的特定目录，那么在设计界面时就值得考虑到这一点。例如，您可以将过滤器分为“主要”（立即可见）和“附加”（通过单击打开），以减少同时使用二十个参数的可能性。