WooCommerce 迷你购物车片段 - 刷新片段时如何加载脚本

Question

我在我的网站上使用迷你 wocommerce 购物车功能。当产品添加到购物车时，迷你购物车会自动刷新。

代码：

add_filter( 'woocommerce_add_to_cart_fragments', function($fragments) {
    ob_start();
    ?>

    <div class="mini-cart">
        <?php woocommerce_mini_cart(); ?>
    </div>
    
    
    <?php $fragments['div.mini-cart']  = ob_get_clean();
    return $fragments;

} );

购物车实现了一个滚动条脚本，当购物车中的商品太多时，该脚本可以工作。

问题是，当加载页面或将产品添加到购物车后，迷你购物车会刷新，但滚动脚本会停止工作。我必须再次运行代码滚动条，但我不知道如何运行。

如何在每次刷新片段后运行 javascript 代码？

Answer 1

WooCommerce 购物车片段允许更新页面上与购物车相关的组件，而无需重新加载整个页面。这是通过在购物车事件发生时触发 AJAX 请求来完成的。您可以通过转至 来引用该代码assets/js/frontend/cart-fragments.js。

您发布的 PHP 代码与返回到 AJAX 请求的内容挂钩，以便您可以更改或添加更多 HTML。

在前端，购物车片段使用 jQuery 进行处理，并且在各个阶段会触发许多事件。要在刷新购物车片段时运行一些自定义 JavaScript，您需要侦听该wc_fragments_refreshed事件。

由于该事件是通过 jQuery 触发的，因此您需要使用 jQuery 来监听它（不能使用纯 JS）。

例子：

jQuery( function( $ ) {
    $( document.body ).on( 'wc_fragments_refreshed', function() {
        // JavaScript you want to run when cart fragments are refreshed...
    });
});