WooCommerce - Ajax 添加到购物车并更新总计答案

【问题标题】：WooCommerce - Ajax Add To Cart and Update TotalWooCommerce - Ajax 添加到购物车并更新总计
【发布时间】：2015-06-16 16:26:00
【问题描述】：

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

WooCommerce's documentation 是 cpp_header_add_to_cart_fragment 函数的来源，它似乎根本不起作用。最初我使用的是add_to_cart_fragments，但我发现它已被弃用，我应该使用woocommerce_add_to_cart_fragments，但这种更改也无济于事。

我阅读代码的次数越多...我注意到片段是从 ajax 调用返回的，所以我开始认为我需要用返回的内容替换显示购物车总数的 html 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);
        }
    );
});

【问题讨论】：

我可以得到评论来解释否决票吗？那几乎是瞬间......
我反对反对票，但我认为您的问题将受益于对发生的问题和实际与预期结果的额外描述。 我正在为 [...] 苦苦挣扎，而 这不起作用 可以解释为“为我调试”。
@OhBeWise 谢谢。我将编辑问题以进一步解释。我确实觉得这可以解释为debug this for me，但唯一的原因是我已经用尽了我对该主题的了解并且看不出有任何原因导致这不起作用。
@OhBeWise 好新我觉得很愚蠢...在根据您的要求编辑答案时，我设法找到了（非常明显的）答案。感谢您的帮助。
哈，我遇到过这种情况 - 甚至为了发现我无意中更改了一些问题而倾注了好几个小时。很高兴你找到它！

标签： php ajax wordpress woocommerce

【解决方案1】：

如果有人遇到这种情况...woocommerce_add_to_cart_fragments 正在返回 $fragments 数组中的新 html 字符串，因为我在我的 ajax 函数中调用它，该函数被转换为 json 对象。所以在我的diy_kit.js jquery 函数的成功部分中，我只需要使用该字符串来更新购物车总数。我将在下面粘贴编辑：

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

【讨论】：