Здравствуйте!
Если вы хотите добавить товары в корзину с помощью AJAX, но столкнулись с проблемой перезагрузки страницы, вам нужно убедиться, что вы правильно настроили обработку AJAX-запросов и задали все необходимые параметры. В этом ответе я помогу вам сделать это, используя WP_Query для получения товаров и AJAX для добавления их в корзину.
### Шаг 1: Получение товаров с помощью WP_Query
Сначала создайте свой слайдер с новыми товарами, используя WP_Query. Вот пример кода:
```php
$args = array(
'post_type' => 'product',
'posts_per_page' => 10,
'meta_query' => array(
array(
'key' => 'featured',
'value' => 'yes'
)
)
);
$query = new WP_Query($args);
if ($query->have_posts()) {
echo '<div class="swiper-container">';
echo '<div class="swiper-wrapper">';
while ($query->have_posts()) {
$query->the_post();
global $product; // Получаем объект продукта
?>
<div class="swiper-slide">
<h2><?php the_title(); ?></h2>
<?php echo $product->get_image(); ?>
<p><?php echo $product->get_price_html(); ?></p>
<button class="add-to-cart" data-product_id="<?php echo $product->get_id(); ?>">Добавить в корзину</button>
</div>
<?php
}
echo '</div>';
echo '</div>';
}
wp_reset_postdata();
```
### Шаг 2: Настройка AJAX для добавления товара в корзину
Добавьте обработчик AJAX для добавления товаров в корзину. В вашем файле `functions.php` (или в индивидуальном плагине) добавьте следующий код:
```php
add_action('wp_enqueue_scripts', 'enqueue_ajax_scripts');
function enqueue_ajax_scripts() {
wp_enqueue_script('ajax-add-to-cart', get_template_directory_uri() . '/js/ajax-add-to-cart.js', array('jquery'), null, true );
wp_localize_script('ajax-add-to-cart', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_ajax_add_to_cart', 'ajax_add_to_cart');
add_action('wp_ajax_nopriv_add_to_cart', 'ajax_add_to_cart');
function ajax_add_to_cart() {
$product_id = intval($_POST['product_id']);
if (!empty($product_id)) {
$added = WC()->cart->add_to_cart($product_id);
if ($added) {
// Если вышло успешно, возвращаем данные
wp_send_json_success(array('message' => 'Товар добавлен в корзину'));
} else {
wp_send_json_error(array('message' => 'Ошибка при добавлении товара'));
}
}
wp_die();
}
```
### Шаг 3: JavaScript для обработки события клика
Теперь создайте файл `ajax-add-to-cart.js` в вашей папке `js` темы и добавьте следующий код:
```javascript
jQuery(document).ready(function($) {
$('.add-to-cart').on('click', function(e) {
e.preventDefault();
var product_id = $(this).data('product_id');
$.ajax({
url: ajax_object.ajax_url,
type: 'POST',
data: {
action: 'add_to_cart',
product_id: product_id
},
success: function(response) {
if (response.success) {
alert(response.data.message);
// Здесь можно обновить содержимое корзины
} else {
alert(response.data.message);
}
},
error: function() {
alert('Ошибка при добавлении товара в корзину.');
}
});
});
});
```
### Примечания
1. Убедитесь, что у вас включен jQuery на странице.
2. Убедитесь, что пропишите правильный путь к "ajax-add-to-cart.js".
3. Вы можете обновить состояние корзины на странице после добавления товара, используя WooCommerce функции или AJAX.
Теперь, когда вы нажимаете кнопку "Добавить в корзину", должены работать AJAX-запросы, и страница не будет перезагружаться. Надеюсь, это поможет! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.