Бывает задача сделать всплывающее сообщение, чтобы подтвердить, хотите ли вы удалить что-то из корзины магазина. Это требуется для явного согласия, попробуем это добавить. На самом деле довольно просто, все, что вам нужно, это немного jQuery, как показано ниже:
Содержание
|
1 2 3 4 5 6 7 8 9 10 |
<script> jQuery( function($) { $('.remove').click( function( event ) { if( ! confirm( 'Точно удалить этот товар из корзины?' ) ) { event.preventDefault(); event.stopPropagation(); } }); }); </script> |
И сразу же решим частую задачу, как автоматически обновлять корзину при изменении количества. Опять же, здесь довольно простая задача. С точки зрения UX, некоторые пользователи считают кнопку обновления корзины ненужной или запутанной; хорошо, если мы можем облегчить пользователям задачу, чтобы корзина автоматически обновлялась при изменении, то почему бы не сделать это?
Простая функция PHP, за которой следуют две строки JQuery и строка CSS, и вы можете быстро реализовать это!
1. Фрагмент CSS: скройте кнопку WooCommerce «Обновить корзину»
|
1 2 3 4 5 6 |
input[name='update_cart'] { display: none !important; } button[name='update_cart'] { display: none !important; } |
2. PHP: автоматическое обновление корзины WooCommerce при изменении количества
Теперь, когда кнопка обновления корзины скрыта, все, что нам нужно сделать, это «щелкнуть» кнопку с помощью jQuery и позволить WooCommerce выполнить ту же работу (обновление итогов корзины, налогов и т. д.).
В частности, когда мы «нажимаем» на любой из входов количества, мы переходим и инициируем «щелчок» по скрытой кнопке «Обновить корзину».
Легко, верно?
Примечание: добавьте следующее в ваш functions.php (в дочернюю тему, если вы ее используете)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
add_action( 'wp_footer', 'okweb_cart_refresh_update_qty' ); function okweb_cart_refresh_update_qty() { if (is_cart()) { ?> <script type="text/javascript"> jQuery('div.woocommerce').on('click', 'input.qty', function(){ jQuery("[name='update_cart']").click(); }); </script> <?php } } |
Если это помогло, оставьте комментарий и поделитесь своими мыслями! Если вам нужна помощь, мы будем рады помочь; просто напишите
Каким образом WooCommerce обеспечивает сообщение о подтверждении перед удалением товара из корзины и автоматическое обновление корзины?
Насколько сложно реализовать автоматическое обновление корзины при изменении количества товаров в магазине? В чем заключается простая функция PHP, которая позволяет это сделать? Какие строки jQuery и CSS нужно добавить для этого?
стве товаров
phpfunction update_cart_quantity($cart_item_key, $quantity) {
WC()->cart->set_quantity($cart_item_key, $quantity);
WC()->cart->calculate_totals();
}
add_action('wp_ajax_update_cart_quantity', 'update_cart_quantity');
add_action('wp_ajax_nopriv_update_cart_quantity', 'update_cart_quantity');
3. JavaScript: отправка ajax-запроса при изменении количества товаров
javascript
jQuery(function($) {
$('.quantity input[type="number"]').on('input', function() {
var cart_item_key = $(this).closest('.cart_item').data('cart_item_key');
var new_quantity = $(this).val();
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'update_cart_quantity',
cart_item_key: cart_item_key,
quantity: new_quantity
},
success: function(response) {
if (response.success) {
location.reload();
} else {
console.log('Error updating cart quantity');
}
}
});
});
});
Теперь корзина будет автоматически обновляться при изменении количества товаров, без необходимости нажимать кнопку «Обновить корзину».
С помощью данной функции можно добавить всплывающее сообщение для подтверждения удаления товара из корзины. Также можно автоматически обновлять корзину при изменении количества товаров.
Для добавления всплывающего сообщения, нужно просто добавить данный код в файл скрипта:
javascript
Для автоматического обновления корзины при изменении количества товаров, необходимо добавить следующий код PHP:
php
Также добавьте следующий фрагмент CSS для скрытия кнопки «Обновить корзину»:
css
input[name='update_cart'] {
display: none !important;
}
button[name='update_cart'] {
display: none !important;
}
С помощью этих изменений вы сможете добавить всплывающее сообщение для подтверждения удаления товара из корзины, а также автоматическое обновление корзины при изменении количества товаров.