javascript - Woocommerce：Ajax 添加到购物车在 WP Bakery 页面构建器中不起作用
问题描述
我有解决方案构建添加 ajax 添加到购物车功能以添加到具有可变产品类型的 woocommerce 单一产品页面中的购物车按钮。
它在单个产品页面上运行良好，当单击添加到购物车时，它确实将产品添加到购物车，但同时它确实加载了带有 2 个按钮的弹出窗口，继续购物并去结帐。
问题是，我使用的是波尔图主题，它允许替换我使用 WP Bakery 页面构建器创建的单个产品页面，该页面构建器由产品标题、描述和添加到购物车按钮组成。在尝试检查元素时它确实工作正常并且看起来也一样，所以不确定为什么脚本没有被应用到它。我已经发布了下面的所有代码，包括从 wp bakery 页面构建器内部添加到单个页面中的按钮。
<form class="variations_form cart vf_init" action="https://digitalcloud.no/en/product/product-test-1/" method="post" current-image="">
<table class="variations" cellspacing="0">
<tbody>
<tr>
<td class="label"><label for="pa_storlek">Storlek</label></td>
<td class="value">
<select id="pa_storlek" class="" name="attribute_pa_storlek" data-attribute_name="attribute_pa_storlek" data-show_option_none="yes"><option value="">Choose an option</option><option value="10kg" class="attached enabled">10kg</option><option value="11kg" class="attached enabled">11kg</option><option value="12kg" class="attached enabled">12kg</option><option value="13kg" class="attached enabled">13kg</option><option value="15kg" class="attached enabled">15kg</option><option value="16kg" class="attached enabled">16kg</option><option value="17kg" class="attached enabled">17kg</option><option value="18kg" class="attached enabled">18kg</option><option value="19kg" class="attached enabled">19kg</option><option value="20kg" class="attached enabled">20kg</option><option value="21kg" class="attached enabled">21kg</option><option value="22kg" class="attached enabled">22kg</option><option value="23kg" class="attached enabled">23kg</option><option value="24kg" class="attached enabled">24kg</option><option value="25kg" class="attached enabled">25kg</option><option value="26kg" class="attached enabled">26kg</option><option value="27kg" class="attached enabled">27kg</option><option value="28kg" class="attached enabled">28kg</option><option value="2kg" class="attached enabled">2kg</option><option value="6kg" class="attached enabled">6kg</option><option value="9kg" class="attached enabled">9kg</option></select><a class="reset_variations" href="#" style="visibility: visible;">Clear</a> </td>
</tr>
</tbody>
</table>
<div class="single_variation_wrap">
<div class="woocommerce-variation single_variation" style="">
<div class="woocommerce-variation-description"></div>
<div class="woocommerce-variation-price"><span class="price"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">£</span>93,440.00</bdi></span></span></div>
<div class="woocommerce-variation-availability"></div>
</div><div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">
<div class="quantity buttons_added"><button type="button" value="-" class="minus">-</button>
<input type="number" id="quantity_608ecccab62ec" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" placeholder="" inputmode="numeric">
<button type="button" value="+" class="plus">+</button></div>
<button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>
<input type="hidden" name="add-to-cart" value="112">
<input type="hidden" name="product_id" value="112">
<input type="hidden" name="variation_id" class="variation_id" value="126">
</div>
</div>
</form>
这是JS代码
jQuery('.single_add_to_cart_button').click(function(e) {
e.preventDefault();
jQuery(this).addClass('adding-cart');
var product_id = jQuery('input[name="product_id"]').val();
var variation_id = jQuery('input[name="variation_id"]').val();
var quantity = jQuery('input[name="quantity"]').val();
//alert(variation_id);
jQuery('.cart-dropdown-inner').empty();
if (variation_id==0) {
swal({
title: 'Select a product variation',
// buttons: "CONTINEU SHOPPING",
showCancelButton: false,
showConfirmButton: true
});
} else {
if (variation_id) {
var product_id = jQuery('input[name="product_id"]').val();
jQuery.ajax ({
url: devops_ajax_object.ajax_url,
type:'POST',
data:'action=devops_add_cart_single&product_id=' + product_id + '&variation_id=' + variation_id + '&quantity=' + quantity,
success:function(results) {
//console.log(results);
if(results) {
jQuery.ajax({
url : woocommerce_params.ajax_url,
type : 'post',
data : {
'action': 'ajax_update_mini_cart'
},
success : function( response ) {
jQuery('.widget_shopping_cart_content').html(response);
jQuery('.cart-items').html(jQuery('.m-count').text());
}
});
Swal.fire({
title: 'Product is added to cart !',
icon: 'success',
showDenyButton: true,
confirmButtonText: `Continue shopping`,
confirmButtonColor: '#000000',
denyButtonText: `Go to checkout`,
showCloseButton: true,
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isDenied) {
window.location.href = 'checkout/';
}
})
} else {
/*Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Something went wrong!',
footer: '<a href>Why do I have this issue?</a>'
})*/
}
}
});
} else {
var product_id = jQuery(this).val();
jQuery.ajax ({
url: devops_ajax_object.ajax_url,
type:'POST',
data:'action=devops_add_cart_single&product_id=' + product_id + '&quantity=' + quantity,
success:function(results) {
jQuery.ajax({
url : woocommerce_params.ajax_url,
type : 'post',
data : {
'action': 'ajax_update_mini_cart'
},
success : function( response ) {
jQuery('.widget_shopping_cart_content').html(response);
jQuery('.cart-items').html(jQuery('.m-count').text());
}
});
Swal.fire({
title: 'Product is added to cart !',
icon: 'success',
showDenyButton: true,
confirmButtonText: `Continue shopping`,
confirmButtonColor: '#000000',
denyButtonText: `Go to checkout`,
showCloseButton: true,
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isDenied) {
window.location.href = 'checkout/';
}
})
}
});
}
}
});
这是functions.php代码
function devops_scripts() {
if (is_singular('product')) {
wp_enqueue_script( 'devops-single', get_template_directory_uri() . '/js/add-to-cart-shop.js', array('jquery'), date("h:i:s"), true );
wp_localize_script( 'devops-single', 'devops_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
}
add_action( 'wp_enqueue_scripts', 'devops_scripts' );
function devops_add_cart_single_ajax() {
$product_id = $_POST['product_id'];
$variation_id = $_POST['variation_id'];
$quantity = $_POST['quantity'];
if ($variation_id) {
WC()->cart->add_to_cart( $product_id, $quantity, $variation_id );
} else {
WC()->cart->add_to_cart( $product_id, $quantity);
}
echo '1';
}
add_action('wp_ajax_devops_add_cart_single', 'devops_add_cart_single_ajax');
add_action('wp_ajax_nopriv_devops_add_cart_single', 'devops_add_cart_single_ajax');
function custom_enqueue(){
//wp_enqueue_script('customstyle', 'https://digitalcloud.no/wp-content/themes/porto/js/sweetalert/sweetalert.min.js', array(), '', 'all' );
wp_enqueue_script('customjs', 'https://digitalcloud.no/wp-content/themes/porto/js/sweetalert/sweetalert2.all.min.js', array(), '', 'all' );
}
add_action('wp_enqueue_scripts', 'custom_enqueue');
function ajax_update_mini_cart() {
echo wc_get_template( 'cart/mini-cart.php' );
die();
}
add_filter( 'wp_ajax_nopriv_ajax_update_mini_cart', 'ajax_update_mini_cart' );
add_filter( 'wp_ajax_ajax_update_mini_cart', 'ajax_update_mini_cart' );
解决方案
推荐阅读
- html - 使用 css 填充包含水平图像数组的 div 的宽度
- c# - Asp.net 核心中的 Active Directory
- python - Python图像重塑（1,28,28,1）在图像处理中不起作用
- android-studio - How can i trace eating with mouth closed using Google ML Kit
- browser - How to differentiate HTTP traffic by browser tab in Fiddler?
- ios - 在代码中的两个不同位置设置相同的回调闭包
- laravel - Laravel Websockets Apache2 ReverseProxy 设置
- python - 如何从时间增量创建天
- opentsdb - 如何获取 openTSDB 使用 bosun 的累积值？
- javascript - 如何将 HTML 组件添加到 React.js