上周，一家工业润滑油商店的老板找到我，他在五年内将他的目录从 200 件增加到 17000 件。他的问题听起来很平常：“客户打电话问我们是否有这样那样粘度的液压油。我说——当然有，在网站上。他们回答：我们没有找到。”一万七千种产品，几十个具有技术特征的类别、子类别——而一个人却找不到合适的位置。不是因为他傻。但由于网站导航的设计方式，即使我熟记目录结构，也需要在特定产品的路径上点击四五次。
这是 WooCommerce 商店从小规模发展而来的典型故事。只要你有两百种产品，一个标准的下拉菜单就足够了。一千人已经很拥挤，但还可以忍受。五千或更多——导航成为订单流出的瓶颈。我看过数十家商店的分析，我可以说一件事：好导航和坏导航之间的区别并不是抽象的“用户体验”。这是钱。以换算形式表示的具体的、可衡量的货币，其差异为一倍半到两倍。
这就是乐趣的开始。温和地说，标准的 WordPress 导航是 2000 年代的工具。悬停上的下拉列表，线性结构，没有视觉提示。适合博客。对于拥有数千个 SKU 的在线商店来说，答案是否定的。当我开始真正理解这个问题时，我意识到电子商务中的导航不是一个元素，而是一个由三个相互关联的组件组成的系统。桌面巨型菜单，以购物中心地图的形式显示目录结构。移动底部菜单让关键操作尽在您的掌控之中 - 就像 Ozon 或 Wildberry 一样。还有一个弹出式购物篮，可以确认用户的操作，而不会破坏他浏览目录的路径。去掉这三个要素中的任何一个，你就会在客户离开的渠道上留下一个洞。他们每个人都解决自己的问题，但他们一起创造了用户体验设计师喜欢谈论的“无缝”。
事实上，这就是我们将所有三个组件构建到 COS WP Woo 插件中的原因。不是作为单独的附加组件，而是作为一个统一的导航系统，其中大型菜单、移动菜单和弹出式购物车通过一个面板进行配置，共享通用样式并作为一种协调机制工作。但首先要做的事情是——我将从标准解决方案停止工作的原因以及应对措施开始。
超级菜单：当下拉菜单变成商店地图时
我已经使用 MaxMegaMenu 很长时间了，该插件已成为 WordPress 大型菜单的事实上的标准。作为一个产品，我不能说它有什么不好的地方：它完成了它的工作，拥有一百万的安装量，还有一个活跃的社区。但当您将其集成到 WooCommerce 商店时，细微差别就开始了。首先，它是一个独立的插件，拥有自己的样式生态系统、自己的 JavaScript 和渲染逻辑。他对你的产品、类别、价格一无所知。对他来说，菜单就是菜单，是一组嵌套的链接，他并不关心这些链接是指向“关于公司”页面还是指向具有二十个子类别的液压油目录。其次，每个附加插件都是在每个页面上加载的附加 CSS 和 JavaScript。对于加载速度直接影响转化的商店来说，这可不是一件小事。
但这甚至不是主要问题。主要问题是在线商店中的大型菜单不仅仅是导航。这是一个展示。这是访问者将鼠标悬停在“目录”上时看到的第一件事。这取决于这个展示的安排得如何，他是否会深入目录或关闭选项卡。我已经多次看到，在经典的下拉菜单中，类别是如何排列在延伸到屏幕边缘的二十点列中的。一个人上下移动鼠标，试图找到他需要的内容，但不小心滑出了子菜单 - 它关闭了。他再次尝试，再次失败。第三次，他继续寻找。或者他就离开。
超级菜单以一种根本不同的方式解决了这个问题。它将目录结构水平扩展为几列，而不是垂直列表。您可以立即看到所有主要类别，就像超市中的各个部分一样。工业用油 - 第一栏。液压油是第二个。润滑油排在第三位。自化学排名第四。每列都显示子类别，您可以立即获得轴承 - 您需要压缩机油，它们就在这里，第二列中的第二项，只需单击一下即可。不是四，不是五——一。
当我为 COS WP Woo 设计大型菜单模块时，我受到了商店的真实经验的指导。三件事对我来说很重要。第一个是可以为特定目录定制的多列布局。并非所有目录都是相同的：有些目录具有三个具有深度嵌套的主要类别，而其他目录则具有二十个平面目录。我们的巨型菜单允许您单独设置每个顶级项目的列数，这不是通过 CSS hacks，而是通过管理面板中的可视化界面。第二个是直接在菜单中的图像和小部件。当访问者指向“液压油”类别时，他不仅会看到子类别列表，还会看到图像，可能是带有促销信息的横幅或带有畅销书的小部件。这将菜单从导航转变为成熟的推销工具。第三是速度。大型菜单通过自定义 Walker PHP 在服务器上呈现，而不是通过 JavaScript 在客户端生成。这意味着菜单会立即出现，不会因 AJAX 请求而延迟，不会闪烁，不会出现“骨架”。
Walker PHP 可能是 WordPress 开发中最被低估的东西。标准 Walker_Nav_Menu 将菜单呈现为嵌套的 ul/li 列表，这种格式自 HTML 诞生以来就没有改变过。大型菜单需要完全不同的渲染：列、块、图像、小部件 - 所有这些都必须在 DOM 中正确排列，以便 CSS 可以将其转换为那个“商店地图”。我们的定制 Walker 分析 WordPress 菜单结构，确定嵌套级别并为第一级元素创建大型面板容器。在这些面板中，第二级元素成为列标题，第三级元素成为其内容。听起来很简单，但问题在于细节：您需要正确处理任意数量的嵌套级别、自定义 CSS 类、链接属性、菜单项描述 - 所有这些都经过 Walker 并且必须保存。
另外，我想谈谈动画，因为这是许多大型菜单实现中遇到困难的细节。悬停延迟是一个看似小事的设置，但实际上它决定了菜单是否方便或烦人。如果延迟太小，每次光标意外移过导航时都会弹出菜单。太大 - 用户指向，等待，认为什么也没发生，移动光标 - 并且菜单在不再需要时出现。我们尝试了不同的值，得出了 150-200 毫秒——黄金分割，即忽略意外目标，并快速处理有意目标。而且，这个延迟是可调的：对于目录结构简单的商店，可以减少到100毫秒，对于复杂的商店，可以增加到250毫秒。关闭动画也有自己的延迟，它应该比打开延迟稍大，以便用户可以将光标从菜单项移动到超级菜单面板而不会丢失。这种模式被称为“亚马逊三角形”——亚马逊曾经申请了一种算法专利，该算法可以计算光标移动的矢量，并且如果光标移向面板则不会关闭子菜单。我们实现了该算法的简化版本：如果光标离开菜单项，但位于大型面板区域中，则面板不会关闭。
z 索引和内容重叠也存在细微差别。根据定义，大型菜单是位于页面主要内容之上的元素。如果页面有滑块、视频播放器、其他插件的模式窗口，则需要在所有这些之上显示大型菜单。听起来很简单 - 将 z-index 设置得更高，然后就不用管它了。但在实践中，“z-index 之战”是最常见的布局问题之一。一个插件将 z 索引设置为 9999，另一个设置为 99999，第三个设置为 999999。我们仔细处理了这一点：我们使用固定的 z 索引，它恰好高于标准 WordPress 和 WooCommerce 元素，但低于模式管理窗口。另外，我们添加了一个设置，允许您在网站包含具有激进值的插件的情况下手动更改 z-index。
你知道当我开始测量结果时最令我惊讶的是什么吗？不是平均网站停留时间或浏览深度——当然，这些指标已经有所改善。我对移动设备上的转化感到惊讶。超级菜单似乎是桌面上的东西；您仍然无法在移动设备上完整显示它。但事实是，桌面上结构合理的大型菜单设置了目录的心理模型。一个人在大屏幕上看到过这个结构，然后在手机上看到过这个结构，就已经知道该去哪里了。他记得压缩机油是工业油的一个子类别，而不是液压油。即使在移动版本中，超级菜单变成了手风琴，这个思维导图也能发挥作用。
视觉设计是一个单独的故事。我见过看起来像 Excel 电子表格的大型菜单：灰色背景，黑色文本，没有视觉分离。我见过看起来像一个单独的登陆页面的大型菜单：横幅、动画、促销块。和往常一样，真相就在中间。菜单应该具有视觉吸引力，但不能过多。类别图标 - 是的。主要宣传片的强调图像 - 是的。每个元素的外观动画 - 不，它只是减慢速度。在我们的模块中，样式是从单个面板配置的：背景颜色、文本、悬停颜色、字体大小、缩进、舍入 - 所有这些都通过熟悉的可视界面进行，无需进入 CSS。
但让我们务实地看待问题。超级菜单是一个桌面故事。在 1200 像素宽或更大的屏幕上，它会展现出它的全部魅力，显示列、图像和小部件。但在平板电脑上会发生什么呢？在电话里？根据SimilarWeb 和我们自己的分析，俄罗斯 60% 至 75% 的在线商店流量来自移动设备。故事的第二部分从这里开始。
移动底部菜单：市场课程
当我第一次安装 Ozon 应用程序时（我不记得是哪一年），我对控制的自然程度感到惊讶。目录、搜索、购物篮、个人资料 - 一切都在屏幕底部，一切都在您的掌控之中。无需伸手去拿左上角的“汉堡”，无需向上滚动即可返回目录。基本操作始终可以在任何页面上随时进行。然后我在《野莓》中看到了同样的事情。然后在 Yandex.Market。该模式已成为移动电子商务的标准，并且有充分的理由：它基于人体工程学。拇指可以轻松触及的区域是屏幕的下三分之一。这是最重要的控件应该放置的地方。
标准 WooCommerce 提供什么？标题中的汉堡菜单。小，不易察觉，需要精确的压力。购物车也位于标题中，是一个 20 x 20 像素的图标。搜索 - 仍然需要找到的放大镜图标。所有这些都位于屏幕顶部，而在配备 6.5 英寸屏幕的现代智能手机上，用一只手触碰该位置并不方便。我并没有夸大其词：有研究表明，49% 的智能手机用户用一只手握住手机。这意味着屏幕顶部对于近一半的移动受众来说是盲区。
这就是我们将移动页脚菜单作为插件一部分的原因。不是单独的附加组件，也不是高级功能 - 导航系统的基本组件。屏幕底部有五个固定图标：“主页”、“目录”、“搜索”、“购物车”、“个人资料”。图标是可定制的 - 您可以将“主页”替换为“促销”，将“个人资料”替换为“收藏夹”，为电话订单很重要的商店添加“呼叫”。每个图标不仅仅是一个链接，而且是一个带有徽章的元素。购物车显示商品数量，配置文件显示通知（如果有）。单击“目录”不仅会打开目录页面，还会打开带有类别树的可伸缩面板 - 与大型菜单相同的结构，适用于垂直移动格式。单击“搜索”可聚焦搜索栏并自动完成。
事情是这样的：移动底部菜单不仅仅是“另一个菜单”。这是用户在移动设备上与网站交互的整个模型的变化。如果没有底部菜单，用户的路径如下所示：转到主页 - 滚动到感兴趣的部分或转到汉堡 - 找到一个类别 - 选择一个产品 - 添加到购物车 - 向上滚动找到购物车图标 - 转到购物车页面 - 下订单。使用底部菜单：进入 - 单击“目录” - 在拉出面板中选择一个类别 - 找到产品 - 添加到购物车 - 单击底部菜单中的“购物车” - 签出。差异不仅在于动作数量，还在于认知负荷。人们不需要记住这个或那个控件所在的位置。他总是在楼下。总是一样的。随时可用。
如果我们换个角度看问题——不是从方便的角度，而是从竞争的角度来看，会怎么样？您的用户每天都会登录 Ozon、Wildberry、Yandex.Market。他已经习惯了底部菜单。这就是他的标准。当他来到您的 WooCommerce 商店并只看到顶部有一个汉堡时，他会下意识地认为您的网站已经过时了。不是因为你的设计不好——也许你的设计很棒。但交互模式告诉大脑：“这不是真正的商店，这是业余的东西。”底部菜单并不是为了真空中的便利，而是为了满足最大市场形成的用户期望。您不仅在品种和价格上竞争，而且还在界面质量上竞争。如果你的界面比用户习惯的落后一代，那就要花钱了。
很少谈论的另一个方面是页脚菜单的 PWA 兼容性。如果您的 WooCommerce 商店作为渐进式 Web 应用程序添加到智能手机主屏幕，则底部菜单变得至关重要。在 PWA 模式下，没有浏览器地址栏，在通常的位置没有“后退”按钮 - 应用程序以全屏模式运行，就像本机模式一样。如果没有底部菜单，用户实际上就会陷入困境：没有明显的方法可以返回主页或导航到目录。我们的底部菜单自动检测 PWA 模式（通过显示模式媒体查询）并调整填充，以免与设备的系统导航发生冲突。
我测量了底部菜单对一家销售建筑材料的商店的影响 - 大约八千个 SKU。实施之前，移动设备上的跳出率为 62%。之后 - 47%。添加到购物车的转化率从 3.8% 增加到 5.1%。这不是什么革命性的数字，但对于一家每月营业额 50 万的商店来说，3.8% 和 5.1% 之间的差异是一笔不菲的钱。所需要做的就是激活模块，选择图标和颜色。
从技术上讲，移动页脚菜单作为视口底部的固定元素实现，仅出现在小于特定宽度的屏幕上 - 默认为 768 像素，但阈值是可配置的。一个重要的细微差别：菜单不应与页面内容重叠。因此，激活时，会自动将 padding-bottom 添加到正文，等于菜单的高度。这听起来微不足道，但我见过底部菜单在结帐时覆盖“下订单”按钮的实现。我们对此进行了处理：在结帐页面上，底部菜单会自动隐藏或移动，以免干扰购买过程。
经常被忽略的另一点是底部菜单与滚动条的交互。如果菜单始终可见，则会占用宝贵的垂直空间，而这在移动设备上已经很稀缺。这就是为什么我们有“向下滚动时隐藏，向上滚动时显示”选项 - Chrome 和许多应用程序使用的模式相同。用户向下滚动目录 - 菜单平滑地移出边缘，为内容提供更多空间。开始向上滚动 - 菜单返回。这种行为是熟悉的、习惯的，不会引起任何问题。您还可以设置完全静态的显示 - 对于快速访问购物车比额外的空间像素更重要的商店。策略的选择取决于店主；我们只提供这两种选择。
值得单独提及的是中间尺寸的适应性 - 平板电脑、小型笔记本电脑。在 768 到 1024 像素宽的设备上，底部菜单默认隐藏，但您可以强制将其打开。在某些网站上，这是有道理的：例如，如果主要受众是使用平板电脑订购用品的仓库工人。对于他们来说，平板电脑的底部菜单不是“移动拐杖”，而是一个方便的快速访问工具。
购物车弹出窗口：阻止用户离开页面
现在让我们谈谈系统的第三个元素 - 也许是最被低估的。弹出式购物车。将产品添加到购物车后的默认 WooCommerce 行为是重定向到购物车页面。或者，如果您在设置中禁用重定向，则会出现一个不起眼的“商品已添加到购物车”标志，并带有“转到购物车”链接。在这两种情况下，用户旅程都被破坏了。他翻阅目录，找到合适的产品，单击“添加到购物车”，然后被扔到购物车页面。要继续选择，您需要单击“返回”，记住您离开的位置，然后继续。或者，更糟糕的是，重新开始。
就好像在超市里，您将每件商品放入购物车后，都会自动转到收银台。荒诞？是的。但这就是大多数 WooCommerce 商店的运作方式。这就是支票中平均货物数量减少的原因。
弹出式购物车的工作方式有所不同。单击“添加到购物车” - 屏幕一角出现一个迷你篮子：添加的产品列表、数量、总金额、“继续结账”和“继续购物”按钮。弹出窗口持续三到五秒，然后顺利消失。或者，如果用户将鼠标悬停在其上，则不会消失。该人会看到确认信息 - “是的，该产品已添加，它在列表中” - 然后继续浏览目录。没有重定向，没有上下文丢失，没有注意力分散。
我尝试了不同的弹出格式。右上角的 Toast 通知很简约，但不提供有关购物车内容的信息。全屏覆盖可以提供丰富的信息，但过于干扰；它破坏流程并不比重定向更糟糕。滑动侧边栏对于较大的屏幕来说是一个很好的折衷方案，但在移动设备上会占据整个屏幕。最后，我选择了混合方法。桌面右侧有一个滑动面板，宽约 380 像素。它显示购物车的内容，每件商品都有缩略图、名称、价格和数量。您可以直接在弹出窗口中更改数量、删除产品并查看总数。在移动设备上，底部（底部表单）有一个模式窗口，它占据屏幕的下三分之二，并通过向下滑动来关闭。这是用户习惯在移动应用程序中看到的模式，而且感觉很原生。
老实说，在我们实施的那些商店中，弹出式购物篮使平均支票增长最为显着。启用弹出窗口后，一家汽车配件商店发现每个订单的平均商品数量从 2.3 件增加到 3.1 件。另一家工业化学品商店的结账转化率从 4.2% 增加到 5.8%。逻辑很明确：当用户添加产品后保留在目录中时，他会继续购买。当他被扔到购物车页面时，他会评估是否“太贵”并开始思考。
还有一个与弹出式购物篮相关的微妙点。这就是交叉销售。在弹出窗口中，除了购物车的内容之外，您还可以显示“使用此产品购买”或“您可能会发现它有用”的块。 WooCommerce 已经存储了有关交叉销售和追加销售产品的数据 - 我们的弹出窗口只是使用它。我见过一些实施方案，其中弹出窗口中的交叉销售可产生高达 12% 的额外收入。但重要的是不要做得太过分：如果弹出窗口变成一个包含五个推荐块的单独页面，它就不再是“快速确认”，而是变得令人恼火。我们将弹出窗口中的交叉销售限制为两个或三个位置 - 足以建议，不足以强加。
如果您有可变的产品怎么办？可变产品的标准 WooCommerce 行为 - 在目录页面上，“添加到购物车”按钮被替换为“选择选项”，单击它会转到产品页面。这是另一个差距：一个人翻阅目录，看到他想要的产品，想要快速添加它 - 但没有，他被发送到一个单独的页面来选择包装尺寸或粘度。我们的弹出窗口可以使用快速查看变体：当您单击目录中的可变产品时，您可以在弹出窗口中显示一个迷你选择器 - 选择所需的变体，添加它，然后继续滚动。这不是一个通用的解决方案 - 当变化很少（两个或三个包装）时它效果很好，而当有两个选择轴的二十个变化时它不太方便。但对于典型的 B2B 目录来说，其中的变化是包装容量（1 升、5 升、20 升、200 升），这符合要求。
我们提供的另一个场景是购物车为空时弹出窗口的行为。添加的第一个产品是弹出窗口应该提供特别信息的时刻。除了产品本身之外，我们还显示免费送货（如果根据金额阈值配置）：“再加 3,200 卢布。免费送货。”这个元素——免费送货的进度条——是增加平均支票的最有效的激励因素之一。根据我们的数据，它使平均订单量增加了 8-15%，仅仅是因为它创造了一种“游戏”动机：“只要多一点，送货就免费。”并非所有商店都提供免费送货，但那些确实从这一元素中获得了明显效果的商店。
弹出购物车的技术实现与 WooCommerce AJAX 添加到购物车相关。当用户单击“添加到购物车”时，会触发添加产品的 AJAX 请求。我们的 JavaScript 拦截成功的添加事件（added_to_cart 事件，WooCommerce 通过 jQuery 调度）并显示一个包含购物车实际内容的弹出窗口。购物车通过 WooCommerce 购物车片段 API 进行更新，这意味着即使用户在多个选项卡中打开网站，数据也始终是最新的。这不需要向服务器发出额外的 AJAX 请求 - 每次添加后，WooCommerce 都会更新购物车片段，我们只需使用此数据来呈现弹出窗口。没有双重请求，没有超出标准的服务器负载 - 弹出窗口集成到现有的 WooCommerce 数据流中，而不是创建自己的并行数据流。对于流量较高的商店来说，这一点至关重要：添加到购物车的每个额外 AJAX 请求都会给 PHP、数据库和 Redis 会话缓存带来额外负载。
三合一：为什么单个系统比三个单独的插件更好
现在让我们从另一面来看这一切 - 从商店管理员的角度来看，他必须配置和维护这一切。假设您决定分别添加大型菜单、移动页脚菜单和弹出式购物车。三个插件，三个不同的设置界面，三套CSS样式，三个JavaScript队列。 MaxMegaMenu - 专业版每年 79 美元。 WP Mobile 底部菜单（或同等产品）- 另外 39-49 美元。购物车弹出窗口 - WooFunnels 或一些专门的弹出窗口 - 从 49 美元到 99 美元不等。仅导航每年总计 170 至 230 美元。再加上样式的不兼容：每个插件都使用自己的调色板、自己的字体和自己的缩进。您可以将大型菜单配置为蓝色色调，并将另一个插件的移动菜单配置为绿色口音，因为它具有不同的界面和不同的风格逻辑。弹出式篮子一般采用第三种样式绘制。视觉完整性见鬼去吧。
在 COS WP Woo 中，所有三个组件均通过一个面板设置样式。您设置主要颜色 - 背景、文本、强调色、悬停 - 它们会自动应用于所有三个元素。大型菜单、移动页脚和弹出式购物车看起来像是同一设计的一部分，因为它们是同一设计的一部分。一个样式表、一个 JavaScript 文件、一组设置。无需兼顾三个管理面板 - 一切都在一个地方，在我们插件的“展示”部分。
但这不仅仅是为了易于设置。统一的系统提供了使用单独的插件时无法实现的技术优势。移动底部菜单“了解”弹出式购物车。当用户单击底部菜单中的购物车图标时，会打开带有迷你购物车的相同弹出窗口，而不是转到单独的页面。大型菜单“了解”移动菜单：在桌面上，呈现一个成熟的大型面板；在移动设备上，相同的结构被转换为手风琴，可通过底部菜单访问。弹出式购物车“了解”大型菜单：如果弹出窗口打开并且用户将鼠标悬停在大型菜单上，则弹出窗口会正确隐藏，以免阻塞导航。当这三个元素是三个彼此一无所知的独立插件时，所有这些交互都无法实现。
另一个重要方面是性能。这三个独立的插件是每个页面加载的三个独立的CSS文件和三个独立的JS文件。我们的模块将所有内容组合到一个 CSS 和一个 JS 中。在连接速度较慢的移动设备上，下载六个文件和下载两个文件之间的差异可能是 200-400 毫秒——这不是一个很大的数字，但在 Core Web Vitals 和 PageSpeed Insights 的背景下，每一百毫秒都很重要。谷歌长期以来一直将加载速度作为排名因素，对于电子商务来说，这一点尤其重要：每延迟一秒，转化率就会降低 7%——这个统计数据是亚马逊给出的，我没有理由怀疑他们的数据。
我想专门讨论从 MaxMegaMenu 的迁移，因为这是每个潜在用户都会出现的问题。您已经通过 MaxMegaMenu 设置了一个大型菜单，花了几个小时配置列、图标、小部件 - 现在怎么办，重做一切？不会，我们已经实现了自动迁移。我们的模块可以读取 MaxMegaMenu 元数据 - 菜单项设置、列数、链接的小部件 - 并将它们导入到其格式中。我不会说迁移是百分百的：MaxMegaMenu 的自定义 CSS 样式不会自动迁移，因为标记不同。但结构——列、嵌套、图标——被完全转移。实际上，这意味着您不必花费几个小时的手动配置，而是花费五分钟自动导入和另外二十分钟微调样式。
老实说，迁移问题是设计模块时最痛苦的问题之一。我思考了很长一段时间是否值得为兼容性而烦恼。 MaxMegaMenu 以序列化数组的格式将其设置存储在 wp_postmeta 中 - 解析它是一种乐趣。但后来我算了一下：我们的主要客户有十二个主要类别的一万七千种产品，每个类别都在 MaxMegaMenu 中配置有单独的列、图标和描述。手动传输 - 两到三天的工作时间。自动 - 五分钟。选择是显而易见的。此外，MaxMegaMenu 是最流行的大型菜单插件之一，我们插件的很大一部分潜在用户将从它迁移。
我想再详细讨论一点，这看起来可能是技术性的，但实际上它决定了导航的质量——响应式自适应。大型菜单应该在任何屏幕尺寸上都能正常工作。 1920 像素时，有完整的图像列。 1366 有相同的柱子，但更窄一些。在1024，列或隐藏图像的数量可能减少。 768 及以下 - 转换为移动格式。这不仅仅是“隐藏在移动设备上”——当内容在保持功能的同时适应可用空间时，它是智能降级。
我们的大型菜单实现使用 CSS 网格进行列布局。这使您可以通过媒体查询优雅地重组，而无需使用 JavaScript。在大屏幕上 - 指定数量的列。在中间的部分，列被组合或重新排列成两列。在小的情况下，一切都变成了垂直的手风琴。格式之间的转换平滑，无抖动，无需重新绘制页面。对于移动底部菜单，自适应也很重要：菜单高度、图标大小、徽章大小 - 所有这些都会根据屏幕大小进行缩放。在小型 iPhone SE 上，图标更紧凑一些，在大型三星上，图标更宽敞一些。不是固定的像素，而是适应上下文的相对单位。
另外，值得一提的是主题兼容性——这个问题让所有在 WordPress 中遇到过插件冲突的人都担心。 WooCommerce 商店运行数百种不同的主题：Astra、OceanWP、Flatsome、Porto、The7、Woodmart、Storefront - 并且每个主题都以不同的方式实现导航。一些主题使用标准的 wp_nav_menu，其他主题使用自己的自定义渲染器。有些人连接自己的大型菜单，这与插件的冲突。我们的导航模块旨在在任何主题之上工作，而不会破坏其样式或与其 JavaScript 发生冲突。巨型菜单通过标准过滤器 wp_nav_menu_args 连接，该过滤器拦截特定菜单位置（通常是主菜单或主菜单）的渲染，并用我们的自定义过滤器替换标准 Walker。 CSS 是用高特异性和范围选择器编写的，因此主题样式不会泄漏到大型面板中，反之亦然。 JavaScript 使用自己的命名空间，不会与 jQuery 主题处理程序冲突。
我们测试了与十二个最流行的 WooCommerce 主题的兼容性，我可以说十二个主题中的十个都可以开箱即用。两项必需的最低设置 - 指定菜单的正确位置并调整一个 CSS 选择器。对于我们在自己的项目中使用的 Porto，兼容性是完美的 - 我们实际上从 MaxMegaMenu 迁移到了拥有 17000 个产品的商店中的模块，用户甚至没有注意到差异。更准确地说，他们注意到 - 但更好的是：菜单开始打开得更快，因为每个页面上加载的附加 JavaScript MaxMegaMenu 消失了。
我想谈的另一点是导航的 SEO 方面。谷歌长期以来一直能够绕过超级菜单并从中建立索引链接。但机器人如何看待客户端 JavaScript 菜单和服务器端 HTML 是有区别的。我们的大型菜单在服务器上呈现 - 在加载 JavaScript 之前，所有链接都存在于 HTML 中。对于搜索机器人来说，这是一个理想的情况：它们可以看到完整的导航结构、所有类别和子类别，而无需运行 JavaScript。这对于刚刚获得链接质量的年轻商店来说尤其重要：结构良好的导航有助于在所有类别中均匀分配 PageRank。超级菜单中的每个链接都是一个传递权重的内部链接。事实上，正确的巨型菜单结构是一种经过深思熟虑的内部链接架构，可以自动工作，无需在文本中手动放置链接。
你知道我认为整个导航过程中最重要的是什么吗？不是技术实施细节——它们可以通过十几种不同的方式来解决。甚至没有具体的转化增长数字——每个商店的情况都不同。最重要的是系统化的方法。浏览在线商店并不是三项独立的任务（大型菜单、移动菜单、购物车）。这是一个目标：引导用户以最小的摩擦从登录网站到下订单。巨型菜单显示了目录结构并给出了概述。移动底部菜单提供对关键功能的持续访问。弹出的购物篮会确认操作并允许您不间断地继续操作。三个组件 - 一个系统。当它们作为单一机制一起工作时，其效果大于各个部分的总和。
我经常听到店主说：“我们的产品很好，价格正常，但销量却没有增长。”当我开始研究这个问题时，有一半的时间证明问题既不是产品，也不是价格。问题是人们无法正常浏览该网站。他来了，看到标准下拉菜单中的一堵类别墙，随意浏览，没有找到他需要的东西，然后离开。或者他找到它，将其添加到购物车，然后从目录页面扔到购物车页面，他失去了上下文并忘记了他想再订购两件商品。或者，他试图在手机上查看目录，却错过了一个小汉堡，他生气了，然后将其关闭。
这些都是可以解决的问题。此外，它们可以在不重新设计网站、不改变主题、不吸引50万卢布的机构的情况下解决。在一个插件中激活三个模块，三十分钟即可设置样式和结构 - 您的商店导航将在 Ozon 级别上运行。不是因为我想向你推销灵丹妙药——世上没有灵丹妙药。但因为导航不是火箭科学。这些都是经过验证的模式，只需要正确实施即可。带有栏目和视觉效果的大型菜单、移动缩略图菜单、不间断的弹出式购物车——这三个组件共同将“商品网站”变成“方便购买的商店”。
我最近与一位电器店老板交谈，他已经运行标准 WooCommerce 导航三年了。当我问他为什么还没有安装大型菜单时，他回答说：“我一年前尝试过 MaxMegaMenu，但它与主题冲突，我不得不禁用它。”经典故事：我尝试过，但没用，我认为超级菜单不适合他。但问题不在于超级菜单的概念，而在于具体的实现，没有考虑到其主题的特殊性。我们安装了我们的模块 - 第一次一切正常，因为我们测试了与流行主题的兼容性并在架构级别解决冲突，而不是通过拐杖。
如果您的 WooCommerce 商店已超出标准导航范围，并且移动设备上的转换还有很多不足之处，请查看 COS WP Woo 中的超级菜单、页脚菜单和购物车弹出模块。在临时服务器上尝试一下，比较前后的用户行为。数字本身就能说明一切。如果您已经使用 MaxMegaMenu，自动迁移将使过渡变得轻松。一个插件代替三个，统一样式，所有组件协调运行。导航是转换的基础，并且该基础必须是无缝的。如果您对设置或迁移有任何疑问，请写信给我们，我们将调查您的情况。在与 WooCommerce 商店合作的七年中，我从未见过不方便的目录。有时这需要完全重新设计。但更常见的是正确的导航，让买家只需点击三下就能找到他想要的东西。如果您的商店现在需要五六个，那么是时候做出改变了。