WooCommerce - Ajax Dodaj do koszyka i aktualizuj Totalnie

Question

Pracuję nad stroną internetową, która pozwala użytkownikom dodawać produkty do koszyka ze strony głównej. Śledziłem kilka zasobów online z ich strony internetowej i inne pytania dotyczące SO, które pozwalają mi dodawać produkty do koszyka za pośrednictwem Ajax, ale suma koszyka nie zostanie zaktualizowana bez przeładowania strony.

WooCommerce's documentation to funkcja, z której pochodzi funkcja cpp_header_add_to_cart_fragment, która w ogóle nie działa. Pierwotnie używałem add_to_cart_fragments, ale okazało się, że jest przestarzałe i powinienem używać woocommerce_add_to_cart_fragments, ale ta zmiana również nie pomaga.

Im więcej czytam kod ... Zauważam, że fragmenty zaczynają się zwracać z wywołania ajax, więc zaczynam myśleć, że muszę zastąpić html, który pokazuje sumę koszyka z tym, co jest zwracane z 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

W przypadku gdy ktoś się dzieje na tym ... woocommerce_add_to_cart_fragments wracał nowy ciąg HTML w tablicy $ fragmenty i ponieważ byłem nazywając go w mojej funkcji ajax który został przekształcony w obiekt json. Więc w moim diy_kit.js w części sukcesu jQuery po prostu musiałem użyć tego ciągu, aby zaktualizować sumę koszyka. będę wklejać edycje poniżej:

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']); 
}