我正在开发一个网站,允许用户从主页上将产品添加到购物车.我从他们的网站和其他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);
}
);
});