用户的网站突然出现莫名其妙的故障。

主要问题

Woocommerce 结账页面一直加载不动,无法继续结账了。

外贸建站Woocommerce 结账页面一直加载不动

通常结账页面的’review order’ 通过 ajax 加载付款方式/总计 – 这会简要显示加载器。如果有问题,这里就会无法加载成功,也就如上的图片那样一直卡着。

排查过程

首先,检查WooCommerce > 系统状态,是否有错误——通常会突出显示错误。

如果没问题,我们继续检查

WordPress 设置导致的 AJAX 错误

设置 > 常规,中的 URL需要匹配——这是因为 AJAX 请求不能跨不同的域工作。

外贸建站Woocommerce 结账页面一直加载不动

其他 JavaScript 错误和冲突

这里一般是主题和插件,任意切换一个系统主题,查看是否正常

排查插件是否冲突,逐个禁用插件来排除。

如果还是不正常,那么继续

 AJAX 调用的无效响应

打开浏览器(谷歌浏览器)的开发者控制台上网络- Fetch/XHR 选项卡并查看?wc-ajax=update_order_review 响应。正常的响应将是 JSON。如果响应是 HTML,这通常是由 WordPress 安装根目录中的 index.html 文件引起的

这可以通过删除 index.html 文件或通过调整服务器配置上的索引将 index.php 优先于 index.html 来解决。

如下,响应为HTML是不正常的

外贸建站Woocommerce 结账页面一直加载不动

正常应该响应如下为JSON

外贸建站Woocommerce 结账页面一直加载不动

一些缓存插件也会在 JSON 响应之前添加 HTML。

最后排查到客户有在使用cloudflare, 通过禁用CDN后,正常了,所以我们要检查CDN的加速规则。

经过调整后,一切恢复正常了。

外贸建站Woocommerce 结账页面一直加载不动