Wordpress WooCommerce:目标成功添加到购物车行动

时间:2016-11-21 21:26:25

标签: javascript jquery wordpress woocommerce

从商店列表视图中将产品添加到购物车后,我尝试使用javascript做一些事情。目前,查看购物车'按钮获取一个类('添加'),并给它一个复选标记,但我想将文本更改为'添加到购物车'以及显示另一个按钮。

我在网上找到的最接近的答案是:

$('body').on('added_to_cart',function(){
    // action here
});

但这只会让你使用body元素。

以下是我想要的,但没有检查该项目是否实际成功添加到您的购物车:

$('.add_to_cart_button').click(function(){
        $(this).text('Added to Cart');
        $(this).siblings('.view-cart').removeClass('hidden');
});

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

试试这个并告诉我它是否有效。

这是发送AJAX请求的jQuery代码。如果ajax_object未定义,则必须确保它已使用脚本进行本地化。我最后加了一些笔记。该操作将确保WordPress挂钩到正确的函数。您可能需要更改product_id的分配,我不确定您的前端如何列出该产品。您还应该添加处理AJAX错误的功能。

var product_id = $(this).attr('data-product_id');

$.ajax({
    type: "POST",
    url: ajax_object.ajax_url,
    data: {'action':'is_in_cart', 'product_id': product_id},
    success: function(result) {
        if (result == true)
            console.log('In the cart!');
        else
            console.log('Not in the cart...');
    }
});

这是PHP代码。您必须将is_in_cart函数挂钩到WordPress AJAX操作上。然后,您可以循环浏览购物车的内容,看看您传递的产品ID是否在那里。对add_action的第二次调用允许未登录的用户也挂钩此功能。

function is_in_cart() {
    $searchFor = $_POST['product_id'];

    foreach( WC()->cart->get_cart() as $cart_item_key => $values ) {
        $_product = $values['data'];

        if( $searchFor == $_product->id ) {  
            echo true;
        }
    }
    echo false;
}

add_action( 'wp_ajax_is_in_cart', 'is_in_cart' );
add_action( 'wp_ajax_nopriv_is_in_cart', 'is_in_cart' );

如果您还没有JavaScript中的AJAX网址,那么在本地化脚本时应该包含类似的内容。然后,您将能够在JavaScript中引用ajax_object。只需确保将脚本句柄(ajax-script)更改为您实例中的任何内容。

wp_localize_script(
    'ajax-script',
    'ajax_object',
    array(
        'ajax_url' => admin_url( 'admin-ajax.php' )
    )
);