<button type="button" class="single_add_to_cart_button button alt<?php echo esc_attr( wc_wp_theme_get_element_class_name( 'button' ) ? ' ' . wc_wp_theme_get_element_class_name( 'button' ) : '' ); ?> add-to-cart-variation">В корзину</button>
Здесь мы добавили класс "add-to-cart-variation", который будет использоваться для привязки события Ajax.
JavaScript-код для отправки Ajax-запроса на сервер при нажатии на кнопку "В корзину":
jQuery(document).ready(function($) {
$('body').on('click', '.add-to-cart-variation', function() {
var variation_id = $(this).closest('form.cart').find('.variation_id').val();
var quantity = $(this).closest('form.cart').find('.quantity').val();
var product_id = $(this).closest('form.cart').find('input[name="product_id"]').val();
var data = {
action: 'add_variation_to_cart',
product_id: product_id,
variation_id: variation_id,
quantity: quantity
};
$.ajax({
type: 'POST',
url: wc_add_to_cart_params.ajax_url,
data: data,
success: function(response) {
if (response) {
$(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $(this)]);
}
},
dataType: 'json'
});
return false;
});
});
Здесь мы добавили класс "add-to-cart-variation", который будет использоваться для привязки события Ajax.
JavaScript-код для отправки Ajax-запроса на сервер при нажатии на кнопку "В корзину":
jQuery(document).ready(function($) {
$('body').on('click', '.add-to-cart-variation', function() {
var variation_id = $(this).closest('form.cart').find('.variation_id').val();
var quantity = $(this).closest('form.cart').find('.quantity').val();
var product_id = $(this).closest('form.cart').find('input[name="product_id"]').val();
var data = {
action: 'add_variation_to_cart',
product_id: product_id,
variation_id: variation_id,
quantity: quantity
};
$.ajax({
type: 'POST',
url: wc_add_to_cart_params.ajax_url,
data: data,
success: function(response) {
if (response) {
$(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $(this)]);
}
},
dataType: 'json'
});
return false;
});
});
Здесь мы использовали функцию jQuery ajax() для отправки POST-запроса на сервер WooCommerce с параметрами, такими как идентификатор вариации, количество и идентификатор товара.
Добавьте PHP-обработчик для Ajax-запроса на сервере WordPress:
add_action('wp_ajax_add_variation_to_cart', 'add_variation_to_cart');
add_action('wp_ajax_nopriv_add_variation_to_cart', 'add_variation_to_cart');
function add_variation_to_cart() {
$product_id = intval($_POST['product_id']);
$variation_id = intval($_POST['variation_id']);
$quantity = intval($_POST['quantity']);
$variation = array(
'variation_id' => $variation_id,
'quantity' => $quantity
);
WC()->cart->add_to_cart($product_id, $quantity, $variation_id, $variation);
WC_AJAX::get_refreshed_fragments();
wp_die();
}
Здесь мы определяем две функции действий WordPress для обработки Ajax-запроса на сервере. Функция add_variation_to_cart() получает идентификатор товара, идентификатор вариации и количество, добавляет товар в корзину и возвращает обновленный фрагмент корзины.
После того как вы добавите все необходимые файлы и код в ваш проект, кнопка "В корзину" для вариативного товара будет работать через Ajax и добавлять товар в корзину без перезагрузки страницы.
Чтобы убедиться, что код работает корректно, убедитесь, что вы правильно добавили все файлы и код в ваш проект. Кроме того, убедитесь, что у вас установлен и активирован плагин WooCommerce и что ваша тема WordPress поддерживает WooCommerce.
