- WooCommerce अजाक्स कार्ट और अद्यतन कुल

Question

मैं एक वेबसाइट उपयोगकर्ताओं को मुख्यपृष्ठ से कार्ट में उत्पादों को जोड़ने के लिए अनुमति देता है कि पर काम कर रहा हूँ करने के लिए जोड़ें। मैंने अपनी वेबसाइट और अन्य SO प्रश्नों से ऑनलाइन कुछ संसाधनों का पालन किया है जो मुझे अजाक्स के माध्यम से कार्ट में उत्पादों को जोड़ने की अनुमति देता है लेकिन कार्ट कुल पृष्ठ रीलोड के बिना अपडेट नहीं होगा।

WooCommerce's documentation वह जगह है जहां cpp_header_add_to_cart_fragment फ़ंक्शन आया था और यह बिल्कुल काम नहीं कर रहा है। मूल रूप से मैं add_to_cart_fragments का उपयोग कर रहा था लेकिन मुझे पता चला है कि पदावनत किया गया था और मैं woocommerce_add_to_cart_fragments का उपयोग करना चाहिए लेकिन उन बदलावों को या तो मदद नहीं करता है।

जितना अधिक मैं कोड पढ़ता हूं ... मुझे लगता है कि टुकड़े अजाक्स कॉल से वापस आते हैं इसलिए मुझे लगता है कि मुझे उस HTML को प्रतिस्थापित करने की आवश्यकता है जो वापस लौटाए गए कार्ट के साथ दिखा रहा है जावास्क्रिप्ट से?

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

मामले में किसी को इस पर होता है ... woocommerce_add_to_cart_fragments $ टुकड़े सरणी में नए एचटीएमएल स्ट्रिंग लौट रहा था और जब से मैं अपने ajax समारोह में यह बुला रहा था एक में बदल किया जा रहा था कि जेसन ऑब्जेक्ट। तो jquery फ़ंक्शन के सफलता भाग में मेरे diy_kit.js में, मुझे कार्ट कुल को अपडेट करने के लिए बस उस स्ट्रिंग का उपयोग करना पड़ा। मैं नीचे संपादन चस्पा करेंगे:

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