使用 WooCommerce ajax 更新购物车
Posted
技术标签:
【中文标题】使用 WooCommerce ajax 更新购物车【英文标题】:Update cart with WooCommerce ajax 【发布时间】:2016-10-09 05:02:15 【问题描述】:在我的 woocommerce 网站中,我更改了购物车页面,删除了“更新购物车”按钮,并创建了 2 个按钮来添加和删除产品项目,如图所示:
当我点击数量按钮时,如果我按下按钮更新购物车,我想调用相同的函数。
为此,我正在使用 ajax,但它什么也没做。
首先在我的function.php
文件中,我有这个:
function update_my_cart()
// here update then cart
var_dump("execute");
add_action( 'wp_ajax_update_my_cart', 'update_my_cart' ); // If called from admin panel
add_action( 'wp_ajax_nopriv_update_my_cart', 'update_my_cart' );
add_action( 'wp_enqueue_scripts', 'rct_enqueue_scripts' );
if ( ! function_exists( 'rct_enqueue_scripts' ) ) :
function rct_enqueue_scripts()
wp_enqueue_script( 'rct-js', get_template_directory_uri() . '/js/themeCoffee.js', array(), '1.0', true );
wp_localize_script('rct-js', 'ajax_object', array('ajax_url' => admin_url( 'admin-ajax.php' )));
endif;
在我的 jquery 文件中我有这个:
updatecart = function(qty)
var currentVal, data, item_hash, request;
currentVal = void 0;
data = void 0;
item_hash = void 0;
currentVal = parseFloat(qty);
request = $.ajax(
url: 'ajax_object.ajax_url',
method: 'POST',
data:
quantity: currentVal,
action: 'update_my_cart'
,
dataType: 'html'
);
request.done(function(msg)
alert('cart update ');
);
request.fail(function(jqXHR, textStatus)
alert('Request failed: ' + textStatus);
);
;
我收到此错误:
Failed to load resource: the server responded with a status of 404 (Not Found)
因为我尝试加载my_website/cart/ajax_object.ajax_url
。
提前致谢!
【问题讨论】:
谢谢@LoicTheAztec 我已经按照你的建议修改了我的文件。并用新的更改更改问题,但我仍然收到相同的错误。任何想法! @LoicTheAztec 我有一个错误,我的 ajax 函数 url 中有这个:'ajax_object.ajax_url',正确的是没有引号。现在可以了,谢谢你的帮助 【参考方案1】:自 2016 年 6 月发布的 WooCommerce 2.6.0 以来,WooCommerce 购物车页面在单击更新购物车按钮后使用 Ajax 更新购物车总数。
不再需要创建自己的 Ajax 调用,可以使用分配给更新购物车按钮的调用。
我创建了一个免费插件Ajax Cart AutoUpdate for WooCommerce,它会在更改产品数量后更新购物车页面和迷你购物车,并为此过程提供一些自定义选项。
最重要的是设置更新延迟。如果用户在此延迟期间再次更改数量,它将重置为完整持续时间。如果它没有实现并且你通过点击增量按钮将数量从 1 更改为 10,它将触发 9 个 Ajax 调用而不是 1。
JQuery 代码如下,我建议将它放在 js 文件中并依赖 jQuery 入队,然后它可以与 jQuery deferred 一起使用:
var timeout;
jQuery('div.woocommerce').on('change keyup mouseup', 'input.qty', function() // keyup and mouseup for Firefox support
if (timeout != undefined) clearTimeout(timeout); //cancel previously scheduled event
if (jQuery(this).val() == '') return; //qty empty, instead of removing item from cart, do nothing
timeout = setTimeout(function()
jQuery('[name="update_cart"]').trigger('click');
, 1000 );
);
【讨论】:
如果您自己构建购物车,这仅适用于购物车页面,而不适用于任何其他页面【参考方案2】:你忘记了这个重要的过程:
add_action('wp_enqueue_scripts', 'add_my_ajax_scripts');
function add_my_ajax_scripts()
// Here you register your script located in a subfolder `js` of your active theme
wp_enqueue_script( 'ajax-script', get_template_directory_uri().'/js/script.js', array('jquery'), '1.0', true );
// Here you are going to make the bridge between php and js
wp_localize_script( 'ajax-script', 'cart_ajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
然后您将在“url:
”的 javascript 文件中检索“ajaxurl
”和“cart_ajax
”:
$.ajax(
url: cart_ajax.ajaxurl,
...
)
您的 javascript 函数将不起作用。 以下是一些功能示例,说明您需要做什么:
WooCommerce - auto update total price when quantity changed?
Wordpress passing ajax value to a specific page using Wordpress
Using AJAX With PHP on Your WordPress Site Without a Plugin
How to use Ajax with your WordPress Plugin or Theme?
【讨论】:
以上是关于使用 WooCommerce ajax 更新购物车的主要内容,如果未能解决你的问题,请参考以下文章
php WooCommerce - 在Ajax之后更新购物车中的商品数量和总数