WooCommerce 3 中产品变化的 Ajax 添加到购物车按钮 [英] Ajax add to cart button for product variation in WooCommerce 3
问题描述
我这里有这个按钮.此按钮的用途是将产品 ID 为 237、变体 ID 为 208673 和蓝牙的 attribute_pa_option 的产品添加到购物车.有没有办法 AJAX 这个?
<span class="价格"><span class="woocommerce-Price-amount amount">6,999 <span class="woocommerce-Price-currencySymbol">kr</span></span></span><div class="数量按钮_已添加"><input type="button" value="-" class="minus"><label class="screen-reader-text" for="quantity_5b101f605f067">数量</label><input type="number" id="quantity_5b101f605f067" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="数量" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby=""><input type="button" value="+" class="plus"><a href="/?add-to-cart=237&variation_id=208673&attribute_pa_option=bluetooth" class="button product_type_simple add_to_cart_button ajax_add_to_cart">加入购物车</a>
为了让它发挥作用,我专门为产品变体使用了自定义的 ajax 添加到购物车.
1).我首先更改了您的按钮 html:
<span class="price"><span class="woocommerce-Price-amount amount">6,999 <span class="woocommerce-Price-currencySymbol">kr</span></span></span><div class="数量按钮_已添加"><输入类型=按钮"值=-"类=减"><label class="screen-reader-text";for=quantity_5b101f605f067">Quantity<输入类型=数字"id=quantity_5b101f605f067"class="input-text qty text";步骤=1"min=1"最大值="名称=数量"值=1"标题=数量"大小=4"模式=[0-9]*";输入模式=数字"aria-labelledby=""><输入类型=按钮"值=+"类=加"><a href="#";class="button product_type_variation add_to_cart_button ajaxvariation";data-product_id="237";data-variation_id=208673";数据数量=1"data-variation="pa_option=bluetooth">加入购物车</a>
正如您将看到的,我不使用按钮 href
属性,因为我通过 ajax 发布数据.
对于您的属性,如果您有多个属性,您将用逗号分隔每一对,例如:
data-variation=pa_option=bluetooth,pa_color=red-shiny"
2).PHP (Wordpress-Ajax) 和 jQuery (Ajax) 代码:
//Wordpress Ajax php:向购物车添加变化add_action('wp_ajax_nopriv_variation_to_cart', 'product_variation_add_to_cart');add_action('wp_ajax_variation_to_cart', 'product_variation_add_to_cart');函数 product_variation_add_to_cart() {if( isset($_POST['pid']) && $_POST['pid'] > 0 ){$product_id = (int) $_POST['pid'];$variation_id = (int) $_POST['vid'];$quantity = (int) $_POST['qty'];$attributes = expand(',', $_POST['var']);$variation = array();foreach($attributes as $values){$values = expand('=', $values);$variation['attributes_'.$values[0]] = $values[1];}WC()->cart->add_to_cart( $product_id, $quantity, $variation_id, $variation );回声真实;}死();//避免服务器错误 500}//Jquery ajax 脚本add_action('wp_footer', 'custom_product_variation_script');函数 custom_product_variation_script() {//这里设置页面或帖子 ID$the_id = 102;if( ! ( is_page($the_id) || is_single($the_id) ) ) 返回;$view_cart = '<a href="'.wc_get_cart_url().'";class ="added_to_cart wc-forward";title="查看购物车">查看购物车</a>';$adding = __('加入购物车...', 'woocommerce');?><script type="text/javascript">jQuery(函数($){//wc_add_to_cart_params 需要继续if ( typeof wc_add_to_cart_params === 'undefined' )返回假;var a = 'a.button.ajax.variation',b = $(a).html(),c = '<?php echo $view_cart;?>',d = '<?php echo $adding;?>';//同步数据量属性$('input.minus,input.plus').on('点击模糊', function(){$(a).attr('data-quantity',$('input.qty').val());});$('input.qty').on('输入点击模糊', function(){$(a).attr('data-quantity',$('input.qty').val());})$(a).on('click', function(e){e.preventDefault();$('a.wc-forward').remove();$(a).html(d);//Ajax 请求$.ajax({类型:'POST',网址:wc_add_to_cart_params.ajax_url,数据: {'action': 'variation_to_cart','pid' : $(a).attr('data-product_id'),'vid' : $(a).attr('data-variation_id'),'数量' : $(a).attr('数据数量'),'var' : $(a).attr('data-variation'),},成功:功能(响应){如果(响应){//更新按钮并刷新迷你车片段设置超时(功能(){$(a).addClass('已添加').html(b).after(c);$(document.body).trigger(' added_to_cart').trigger('wc_fragment_refresh');}, 500);}},错误:函数(错误){$(a).addClass('failed').html('加入购物车失败!');控制台日志(错误);}});});});<?php}
代码位于活动子主题(或活动主题)的 function.php 文件中.经测试有效.
I have this button here. The use of this button is to add to cart a product has a product id of 237, variation id of 208673, and attribute_pa_option of bluetooth. Is there a way to AJAX this?
<div class="btnss">
<span class="price">
<span class="woocommerce-Price-amount amount">6,999
<span class="woocommerce-Price-currencySymbol">kr</span>
</span>
</span>
<div class="quantity buttons_added">
<input type="button" value="-" class="minus">
<label class="screen-reader-text" for="quantity_5b101f605f067">Quantity</label>
<input type="number" id="quantity_5b101f605f067" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="">
<input type="button" value="+" class="plus">
</div>
<a href="/?add-to-cart=237&variation_id=208673&attribute_pa_option=bluetooth" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</div>
To make it work I use a custom ajax add-to-cart for product variations exclusively.
1). I have first changed a bit your button html:
<div class="btnss">
<span class="price">
<span class="woocommerce-Price-amount amount">6,999
<span class="woocommerce-Price-currencySymbol">kr</span>
</span>
</span>
<div class="quantity buttons_added">
<input type="button" value="-" class="minus">
<label class="screen-reader-text" for="quantity_5b101f605f067">Quantity</label>
<input type="number" id="quantity_5b101f605f067" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="">
<input type="button" value="+" class="plus">
</div>
<a href="#" class="button product_type_variation add_to_cart_button ajax variation" data-product_id="237" data-variation_id="208673" data-quantity="1" data-variation="pa_option=bluetooth">Add to cart</a>
</div>
As you will see I don't use the button href
attribute, as I post the data through ajax.
For your attributes, if you have more than one, you will separate each pair by a coma like:
data-variation="pa_option=bluetooth,pa_color=red-shiny"
2). The PHP (Wordpress-Ajax) and the jQuery (Ajax) code:
// Wordpress Ajax php: Adding variation to cart
add_action( 'wp_ajax_nopriv_variation_to_cart', 'product_variation_add_to_cart' );
add_action( 'wp_ajax_variation_to_cart', 'product_variation_add_to_cart' );
function product_variation_add_to_cart() {
if( isset($_POST['pid']) && $_POST['pid'] > 0 ){
$product_id = (int) $_POST['pid'];
$variation_id = (int) $_POST['vid'];
$quantity = (int) $_POST['qty'];
$attributes = explode(',', $_POST['var']);
$variation = array();
foreach($attributes as $values){
$values = explode('=', $values);
$variation['attributes_'.$values[0]] = $values[1];
}
WC()->cart->add_to_cart( $product_id, $quantity, $variation_id, $variation );
echo true;
}
die(); // To avoid server error 500
}
// The Jquery ajax script
add_action( 'wp_footer', 'custom_product_variation_script' );
function custom_product_variation_script() {
// HERE set the page or the post ID
$the_id = 102;
if( ! ( is_page($the_id) || is_single($the_id) ) ) return;
$view_cart = '<a href="'.wc_get_cart_url().'" class="added_to_cart wc-forward" title="View cart">View cart</a>';
$adding = __('Adding to cart…', 'woocommerce');
?>
<script type="text/javascript">
jQuery( function($){
// wc_add_to_cart_params is required to continue
if ( typeof wc_add_to_cart_params === 'undefined' )
return false;
var a = 'a.button.ajax.variation',
b = $(a).html(),
c = '<?php echo $view_cart; ?>',
d = '<?php echo $adding; ?>';
// Sync the data-quantity attribute
$('input.minus,input.plus').on( 'click blur', function(){
$(a).attr('data-quantity',$('input.qty').val());
});
$('input.qty').on('input click blur', function(){
$(a).attr('data-quantity',$('input.qty').val());
})
$(a).on('click', function(e){
e.preventDefault();
$('a.wc-forward').remove();
$(a).html(d);
// The Ajax request
$.ajax({
type: 'POST',
url: wc_add_to_cart_params.ajax_url,
data: {
'action': 'variation_to_cart',
'pid' : $(a).attr('data-product_id'),
'vid' : $(a).attr('data-variation_id'),
'qty' : $(a).attr('data-quantity'),
'var' : $(a).attr('data-variation'),
},
success: function (response) {
if(response){
// Update button and refresh minicart fragments
setTimeout(function(){
$(a).addClass('added').html(b).after(c);
$(document.body).trigger('added_to_cart').trigger('wc_fragment_refresh');
}, 500);
}
},
error: function (error) {
$(a).addClass('failed').html('Add to cart failed!');
console.log(error);
}
});
});
});
</script>
<?php
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
这篇关于WooCommerce 3 中产品变化的 Ajax 添加到购物车按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!