【问题标题】:Wordpress WooCommerce: Target successful add to cart actionWordpress WooCommerce:目标成功添加到购物车操作
【发布时间】:2016-11-21 21:26:24
【问题描述】:

一旦从商店列表视图将产品添加到您的购物车,我将尝试使用 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');
});

有什么想法吗?

【问题讨论】:

  • 我不确定是否有任何方法可以检查 javascript 中的购物车内容,但是如果对象实际上在购物车中,您可以向后端发起 AJAX 调用,该调用将返回 true。它更深入一点,但至少您可以确定产品是否在购物车中。
  • 感谢您的回复。这可能是理想的方法,但我不确定如何。您有任何链接或参考吗?

标签: javascript jquery wordpress woocommerce


【解决方案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 url,则在本地化脚本时应该包含类似的内容。然后你就可以在 JavaScript 中引用ajax_object。只需确保将脚本句柄 (ajax-script) 更改为实例中的任何内容即可。

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-07-08
    • 2015-08-18
    • 2014-02-25
    • 2018-05-18
    • 2015-10-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多