禁用WooCommerce结账时的AJAX

Question

我想问一下如何在结账页面（输入送货和账单信息的页面）禁用AJAX，而不是使用AJAX根据您的位置更新购物车摘要，它将通过自然刷新进行更新。

当前，每当用户通过送货地址更改其位置时，购物车摘要都会在无需重新加载页面的情况下更新。 我想移除该AJAX并只在更新信息后重新加载页面。

我不确定应该使用什么样的代码或方向，但我准备提供任何必要的细节。 请告诉我！ 谢谢！！

- chdltest

---

你为什么要尝试移除Ajax？在Woocommerce->设置->产品->添加到购物车下面有一个禁用Ajax的部分，但这可能不是你想要的。 - Robert Lee

@Robert Lee，我正在尝试移除AJAX，因为它会覆盖我的翻译。我一直在寻找方法，使得通过AJAX更新的内容每次都能被翻译，但现在我更愿意将其移除，并让页面重新加载已经翻译好的内容。不幸的是，使用你提到的方法禁用AJAX只能禁用添加产品到购物车时的AJAX。 - chdltest

Answer 1

所有 WooCommerce 字符串都使用 wp_localize_script 正确地进行了本地化，因此我认为您可以通过创建适当的 .po/.mo 文件来正确翻译它们，但我承认我在翻译方面没有太多经验。参考文献：所有可用的语言包都在 Github 上，您可能还想阅读文档。

无论如何，结帐脚本都在 checkout.js 中。与任何脚本一样，只要您知道处理程序，就可以通过wp_dequeue_script()取消对它的排队。

function so_27023433_disable_checkout_script(){
    wp_dequeue_script( 'wc-checkout' );
}
add_action( 'wp_enqueue_scripts', 'so_27023433_disable_checkout_script' );

- helgatheviking

---

当您取消队列脚本时会发生什么？ - chdltest

它在前端没有被加载。请参考Codex文章。 - helgatheviking

Answer 2

我曾经遇到过类似的问题，但是我没有删除整个脚本，而是查看了事件创建的时间，发现了以下内容。

$( document.body ).bind( 'update_checkout', this.update_checkout );

阅读一些资料后，我发现由于命名空间，我将无法解绑定事件。因此，我在on事件上挂钩，并且由于无法阻止默认行为，我停止了事件传播。这些方法解决了我的问题。

jQuery(document.body).on('update_checkout', function(e){
    //e.preventDefault();
    //e.stopPropagation();
    e.stopImmediatePropagation();
    //console.log(e);
});

- Mateus Silva

---

这是个好主意。希望你的事件在 WC 默认事件之前被触发，否则我认为 e.stopImmediatePropagation 将会停止其余挂钩函数的执行，但不包括已经执行的函数。显然，你可以检查 WC 挂钩其函数的时刻，并在此之前挂钩你的函数。所以，是的，我认为它会起作用。 - Eugen Mihailescu

Answer 3

我们遇到了类似的问题：在报价清单结帐中加载结帐脚本。这些脚本再次通过另一个插件（WooCommerce Germanized）加载。

我们的解决方案更加明确：

• 在您不想加载结帐脚本的页面上配置自定义字段。

然后：

add_action('wp_enqueue_scripts', 'myprefix_dequeue_woocommerce_checkout', 10000);

function myprefix_dequeue_woocommerce_checkout() {
  if (get_post_meta(get_the_ID(), 'disable_woocommerce_checkout_scripts')) {
    wp_dequeue_script('wc-checkout');
    wp_dequeue_script('wc-gzd-checkout');
    wp_dequeue_script('wc-gzdp-checkout');
  }
}

- Adrian

Answer 4

如果您遵循checkout.js源代码的逻辑，您会注意到与编辑账单|发货地址相关的这些AJAX操作可以通过更改结帐表单的类名来安全地禁用。

是的，我知道，就是这么简单。所以，不要使用form.checkout，而是使用form.checkout1，其中.checkout1只是一个想象的类名（它不必是真实/存在的）。

以下是一个示例代码，可能会帮助您了解所需的内容：

var default_class = 'checkout';
var mask_class = 'checkout1';

// hijack the form's AJAX by changing form's default class name
$('form.'+default_class).addClass(mask_class).removeClass(default_class);

// restore the original class name whenever you want it
$('form.'+mask_class).addClass(default_class).removeClass(mask_class);

请注意，这是一种未经记录的黑客技巧。他们随时可能更改结账表单功能，请记住这一点。我可以确认它适用于WC 2.6.14版本，以及可能适用于早期版本。

- Eugen Mihailescu

---

关于这种方法还有一件事：确保在body.checkout_error上恢复默认类，否则您可能会遇到JS错误，因为checkout.js的submit_error函数将评估$( 'form.checkout' ).offset()，这将触发ReferenceError异常。 - Eugen Mihailescu

Answer 5

不禁用checkout.js的一种方法。

首先，可能加载的是checkout.min.js而不是checkout.js。

然后注释掉这两行：

update_checkout:function(){
    //b.reset_update_checkout_timer(),
    //b.updateTimer=setTimeout(b.update_checkout_action,"5")
},

那么您的结账页面将不再有Ajax！

- akelwood

---

我不确定这是否有效，但在第三方库（如插件）中编辑代码是不良实践。它可能会产生意想不到的结果，通常会大大增加维护时间，并且在标准更新过程中将丢失。 - Andrew Dinmore