WooCommerce添加到购物车ajax加载

Question

我在我的网站上创建了一个捆绑产品。所以当有人购买它时，他会在购物车中看到总产品 4.另外，我在顶部迷你购物车上显示总产品。现在我想在有人单击添加到购物车按钮时通过 ajax 更新这个顶级迷你购物车数量。

这是我下面的代码：

$total_products=0;
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
$total_products=$total_products+$cart_item['quantity'];
}
?>
<div class="shopping-cart-header <?php echo $height; ?>">
    <a class="mk-shoping-cart-link-2" href="<?php echo WC()->cart->get_cart_url();?>">
        <?php Mk_SVG_Icons::get_svg_icon_by_class_name(true, 'mk-moon-cart-2'); ?>
        <span class="mk-header-cart-count"><?php echo $total_products;?></span>
    </a>
    <div class="mk-shopping-cart-box">
        <?php the_widget('WC_Widget_Cart');?>
        <div class="clearboth"></div>
    </div>
</div>

Answer 1

Woocommerce有自己的ajax事件，你可以在wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.js文件中找到。在其中您可以找到这样的触发器

// Trigger event so themes can refresh other areas.
$( document.body ).trigger( 'added_to_cart', [ response.fragments, response.cart_hash, $thisbutton ] );

您需要在主题 js 文件中覆盖这些事件。

(function( $, document, window ) {
    // Add to cart event
    // NOTE: called on document ready event
    $( function() {
        $( document ).off( 'added_to_cart' ).on( 'added_to_cart', function( event, fragments, cart_hash, $button ) {
            $button = typeof $button === 'undefined' ? false : $button;
            // update counter
            var $counter = $( '.mk-header-cart-count' );
            var currentQuantity = parseInt( $counter.data( 'eg-product-count' ), 10 );
            var addedQuantity = parseInt( $button.data( 'quantity' ), 10 );
            var newQuantity = currentQuantity + addedQuantity;
            $counter.text( newQuantity );
            // Replace fragments.
            if ( fragments ) {
                $.each( fragments, function( key, value ) {
                    $( key ).replaceWith( value );
                });
                $( document.body ).trigger( 'wc_fragments_loaded' );
            }
            $( document.body ).trigger( 'cart_page_refreshed' );
        } );
    } );
})(jQuery, document, window);

我现在不知道你如何集成捆绑实现，所以也许你需要在 addQuantity 变量中实现它。