[英]Update cart with WooCommerce ajax
在我的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
。
提前致谢!
你忘记了这个重要的过程:
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函数不起作用。 以下是您需要做的一些功能示例 :
自从2016年6月发布的WooCommerce 2.6.0以来,WooCommerce购物车页面在点击“更新购物车”按钮后使用Ajax更新购物车总数。
不再需要创建自己的Ajax调用,可以使用分配给Update cart按钮的调用。
我为WooCommerce创建了一个免费插件Ajax Cart AutoUpdate,它在更改产品数量后更新购物车页面和迷你购物车,并为此流程提供了一些自定义选项。
最重要的是设置更新延迟。 如果用户在此延迟期间再次更改数量,则会将其重置为完整持续时间。 如果它没有实现,你通过点击增量按钮将数量从1改为10,它将触发9个Ajax调用而不是1个。
下面是JQuery代码,我建议把它放在js文件中并依赖jQuery排队,然后它适用于jQuery延迟:
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 );
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.