WooCommerce - Ajax Thêm vào giỏ hàng và cập nhật Tổng số

Question

Tôi đang làm việc trên một trang web cho phép người dùng thêm sản phẩm vào giỏ hàng từ trang chủ. Tôi đã theo dõi một số tài nguyên trực tuyến từ trang web của họ và các câu hỏi SO khác cho phép tôi thêm sản phẩm vào giỏ hàng qua Ajax nhưng tổng số giỏ hàng sẽ không cập nhật mà không cần tải lại trang.

WooCommerce's documentation là nơi chức năng cpp_header_add_to_cart_fragment đến và dường như không hoạt động. Ban đầu tôi đã sử dụng add_to_cart_fragments nhưng tôi phát hiện ra rằng đã không được chấp nhận và tôi nên sử dụng woocommerce_add_to_cart_fragments nhưng thay đổi đó cũng không giúp được gì.

Tôi càng đọc mã ... Tôi nhận thấy rằng các đoạn bắt đầu được trả về từ cuộc gọi ajax vì vậy tôi bắt đầu nghĩ rằng tôi cần phải thay thế html hiển thị tổng số giỏ hàng với những gì được trả về từ javascript?

page_home.php

<!-- Cart link to be updated when products are added --> 
<a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart'); ?>"> 
    <?php echo WC()->cart->get_cart_total(); ?> 
</a> 

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(); ?> 
    <a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart'); ?>"> 
     <?php echo WC()->cart->get_cart_total(); ?> 
    </a> 

    <?php 
    $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); 
     } 
    ); 
}); 

Answer 1

Trong trường hợp ai đó sẽ xảy ra khi này ... woocommerce_add_to_cart_fragments được trả lại chuỗi html mới trong mảng $ mảnh và kể từ khi tôi được gọi đó là chức năng ajax của tôi rằng đang bị biến thành một đối tượng json. Vì vậy, trong diy_kit.js của tôi trong phần thành công của hàm jquery, tôi chỉ phải sử dụng chuỗi đó để cập nhật tổng số giỏ hàng. Tôi sẽ dán các chỉnh sửa dưới đây:

page_home.php

<div id="cart_container"> 
    <a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart'); ?>"> 
     <?php echo WC()->cart->get_cart_total(); ?> 
    </a> 
</div> 

diy_kit.js

/*inside jQuery.post() function */ 
function(response) { 
    jQuery('#cart_container').html(response['a.cart-contents']); 
}