ajax自动更新购物车总数量,WooCommerce - Ajax添加到购物车并更新总计

我正在开发一个网站,允许用户从主页上将产品添加到购物车.我从他们的网站和其他SO问题在线跟踪了一些资源,这些问题允许我通过Ajax将产品添加到购物车,但是如果没有页面重新加载,购物车总数将不会更新.

WooCommerce的文档是cpp_header_add_to_cart_fragment函数的来源,它似乎根本不起作用.最初我在使用,add_to_cart_fragments但我发现它已被弃用,我应该使用,woocommerce_add_to_cart_fragments但这种改变也无济于事.

我读的代码越多......我注意到片段是从ajax调用开始返回的,所以我开始认为我需要用javascript返回的内容替换显示购物车总数的html？

page_home.php

<?php echo WC()->cart->get_cart_total(); ?>

的functions.php

add_action('wp_enqueue_scripts', 'cpp_enqueue_scripts');

function cpp_enqueue_scripts() {

/* Other enqueue/registers */

wp_register_script('diy_kits', get_template_directory_uri().'/js/diy_kit.js');

wp_enqueue_script('diy_kits');

wp_localize_script(

'diy_kits',

'cpp_ajax',

array(

'ajaxurl' => admin_url('admin-ajax.php'),

'diy_product_nonce' => wp_create_nonce('diy_product_nonce')

)

);

}

add_action('wp_ajax_nopriv_cpp_ajax-submit', 'cpp_ajax_submit');

add_action('wp_ajax_cpp_ajax-submit', 'cpp_ajax_submit');

function cpp_ajax_submit() {

global $woocommerce;

$nonce = $_POST['nonce'];

if(!wp_verify_nonce($nonce, 'diy_product_nonce')) {

wp_die('Busted!');

}

// Add product to cart... this works

$product_id = $_POST['product_id'];

if( $woocommerce->cart->add_to_cart( $product_id ) ) {

$data = apply_filters('woocommerce_add_to_cart_fragments', array());

do_action('woocommerce_ajax_added_to_cart', $product_id);

} else {

$data = array( 'success' => false, 'product_id' => $product_id );

}

$response = json_encode($data);

header("Content-Type: application/json");

echo $response;

exit;

}

cpp_header_add_to_cart_fragment

// CART UPDATE AJAX this doesn't work

add_filter('woocommerce_add_to_cart_fragments', 'cpp_header_add_to_cart_fragment');

function cpp_header_add_to_cart_fragment( $fragments ) {

global $woocommerce;

ob_start(); ?>

<?php echo WC()->cart->get_cart_total(); ?>

$fragments['a.cart-contents'] = ob_get_clean();

return $fragments;

}

diy_kits.js

// setup and other stuff...

links.click(function(e) {

/* unrelated stuff */

jQuery.post(

cpp_ajax.ajaxurl,

{

action : 'cpp_ajax-submit',

nonce : cpp_ajax.diy_product_nonce,

product_id : jQuery(this).attr('data-product-id')

},

function(response) {

console.log(response);

}

);

});