Как убрать перезагрузку страницы при добавлении товара в корзину в WooCommerce
Узнайте, как убрать перезагрузку страницы при добавлении товара в корзину в WooCommerce с помощью плагина WPC Fly Cart 5.9.4. Полное руководство с пошаговыми инструкциями.
Как убрать перезагрузку страницы при добавлении товара в корзину в WooCommerce с использованием плагина WPC Fly Cart 5.9.4?
Есть карточка товара, при нажатии на кнопку “Добавить в корзину” товар добавляется в корзину в нужном количестве, но страница перезагружается. Не получается убрать перезагрузку страницы, при этом сохранить добавление нужного количества товара в корзину.
Верстка карточки товара:
<?php
defined('ABSPATH') || exit;
global $product;
?>
<section class="single-product-custom">
<div class="container">
<div class="single-product-custom__inner">
<div class="single-product-custom__image">
<?php
/**
* Product image
*/
do_action('woocommerce_before_single_product_summary');
?>
</div>
<div class="single-product-custom__content">
<p class="single-product-custom__sku">Артикул: <?php echo $product->get_sku(); ?></p>
<div class="single-product-custom__meta">
<div class="single-product-custom__title"><?php the_title(); ?></div>
<button class="single-product-custom__product-favorite">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M15.9998 28.4667L14.0665 26.7067C7.19984 20.48 2.6665 16.36 2.6665 11.3333C2.6665 7.21333 5.89317 4 9.99984 4C12.3198 4 14.5465 5.08 15.9998 6.77333C17.4532 5.08 19.6798 4 21.9998 4C26.1065 4 29.3332 7.21333 29.3332 11.3333C29.3332 16.36 24.7998 20.48 17.9332 26.7067L15.9998 28.4667Z" fill="#CFCFCF"/>
</svg>
</button>
</div>
<p class="single-product-custom__price">
<?php
echo wc_price($product->get_regular_price());
?>
</p>
<div class="single-product-custom__attributes">
<div class="single-product-custom__controls">
<?php
// Для variable: выведет селекты атрибутов + qty + кнопку.
// Для simple: выведет только qty + кнопку (без селектов).
woocommerce_template_single_add_to_cart();
?>
</div>
<p class="single-product-custom__description">
<?php the_content(); ?>
</p>
<div class="single-product-custom__specs">
<table>
<?php
$attributes = $product->get_attributes();
if ( ! empty( $attributes ) ) :
foreach ( $attributes as $attribute ) :
// название атрибута
$name = wc_attribute_label( $attribute->get_name() );
// значения атрибута
if ( $attribute->is_taxonomy() ) {
$terms = wc_get_product_terms( $product->get_id(), $attribute->get_name(), ['fields' => 'names'] );
$value = ! empty( $terms ) ? implode( ', ', $terms ) : '—';
} else {
$value = $attribute->get_options() ? implode( ', ', $attribute->get_options() ) : '—';
}
?>
<tr>
<td><strong><?php echo esc_html( $name ); ?></strong></td>
<td><?php echo esc_html( $value ); ?></td>
</tr>
<?php
endforeach;
else :
?>
<tr>
<td colspan="2"><?php esc_html_e( 'Атрибутів немає', 'your-theme' ); ?></td>
</tr>
<?php endif; ?>
</table>
</div>
</div>
</div>
</div>
</section>
Функции в functions.php:
<?php
add_filter('woocommerce_product_loop_start', 'modify_product_loop_start');
function modify_product_loop_start($html)
{
$html = '<ul class="products products--grid">';
return $html;
}
// Remove "Ви увійшли як" from comments in product page
add_filter('comment_form_logged_in', '__return_empty_string');
// Remove default filters from comments
remove_filter('comment_form_defaults', 'woocommerce_comment_form_defaults');
remove_filter('comment_form_fields', 'woocommerce_comment_form_fields');
// AJAX comments in product page
function enqueue_custom_reviews_script() {
wp_enqueue_script(
'custom-reviews',
get_stylesheet_directory_uri() . '/assets/js/core.min.js',
array(),
null,
true
);
wp_localize_script('custom-reviews', 'customReviews', [
'ajaxurl' => admin_url('admin-ajax.php'),
]);
}
add_action('wp_enqueue_scripts', __NAMESPACE__ . '\\enqueue_custom_reviews_script');
// AJAX comments loading
function load_more_reviews() {
if (!isset($_POST['product_id']) || !isset($_POST['offset'])) {
wp_send_json_error(['message' => 'Missing parameters']);
}
$product_id = intval($_POST['product_id']);
$offset = intval($_POST['offset']);
$number = isset($_POST['number']) ? intval($_POST['number']) : 5;
$comments = get_comments([
'post_id' => $product_id,
'status' => 'approve',
'number' => $number,
'offset' => $offset,
]);
if (!$comments) {
wp_send_json_success(['html' => '']);
}
ob_start();
foreach ($comments as $comment) : ?>
<div class="custom-review" data-comment-id="<?php echo esc_attr($comment->comment_ID); ?>">
<div class="custom-review__header">
<span class="custom-review__author"><?php echo esc_html($comment->comment_author); ?></span>
<span class="custom-review__date"><?php echo esc_html(get_comment_date('d.m.Y', $comment)); ?></span>
</div>
<p class="custom-review__content"><?php echo esc_html($comment->comment_content); ?></p>
</div>
<?php endforeach;
$html = ob_get_clean();
wp_send_json_success(['html' => $html]);
}
add_action('wp_ajax_load_more_reviews', __NAMESPACE__ . '\\load_more_reviews');
add_action('wp_ajax_nopriv_load_more_reviews', __NAMESPACE__ . '\\load_more_reviews');
// Get menu__item and menu__kink to add custom styles
// functions.php
add_filter('nav_menu_css_class', function ($classes, $item, $args) {
if (!empty($args->theme_location) && $args->theme_location === 'header') {
$classes[] = 'menu__item';
}
return $classes;
}, 10, 3);
add_filter('nav_menu_link_attributes', function ($atts, $item, $args) {
if (!empty($args->theme_location) && $args->theme_location === 'header') {
$atts['class'] = isset($atts['class']) ? $atts['class'].' menu__link' : 'menu__link';
}
return $atts;
}, 10, 3);
?>
Чтобы убрать перезагрузку страницы при добавлении товара в корзину с использованием плагина WPC Fly Cart 5.9.4, необходимо установить дополнительный плагин WPC AJAX Add to Cart и правильно настроить его работу с вашей кастомной версткой.
Содержание
- Основное решение
- Пошаговая установка и настройка
- Настройка кастомной верстки
- Альтернативные методы
- Устранение неполадок
- Заключение
Основное решение
Проблема с перезагрузкой страницы при добавлении товара в корзину возникает потому, что WPC Fly Cart 5.9.4 не может работать в режиме AJAX без дополнительной поддержки. Согласно официальной документации WPClever, для отображения всплывающей корзины Fly Cart на страницах товаров без перезагрузки страницы необходимо установить плагин WPC AJAX Add to Cart.
Этот плагин позволяет добавлять товары в корзину мгновенно без перезагрузки всего сайта и обеспечивает бесперебойную работу Fly Cart.
Пошаговая установка и настройка
Шаг 1: Установка WPC AJAX Add to Cart плагина
- Перейдите в раздел Плагины → Добавить новый в админ-панели WordPress
- В поиске введите “WPC AJAX Add to Cart”
- Найдите плагин и нажмите Установить сейчас
- После установки активируйте плагин
Примечание: По словам WPClever, плагин “супер прост в использовании - просто нажмите Установить, затем Активируйте и наслаждайтесь”.
Шаг 2: Проверка совместимости
После установки плагина WPC AJAX Add to Cart ваш кастомный шаблон должен начать работать в AJAX режиме автоматически. Проверьте:
- При нажатии на кнопку “Добавить в корзину” страница не должна перезагружаться
- Должен появиться всплывающий Fly Cart с добавленным товаром
- Количество товара должно правильно обновляться
Настройка кастомной верстки
Если после установки плагина проблема остается, возможно, потребуется дополнительная настройка вашего кастомного шаблона.
Проверка вызова woocommerce_template_single_add_to_cart()
В вашей верстке вы используете стандартную функцию WooCommerce:
<?php
woocommerce_template_single_add_to_cart();
?>
Эта функция должна корректно работать с WPC AJAX Add to Cart, но иногда требуется дополнительная настройка.
Добавление поддержки AJAX
Если стандартная функция не работает, можно добавить прямую поддержку AJAX:
<?php
defined('ABSPATH') || exit;
global $product;
?>
<section class="single-product-custom">
<!-- Ваш существующий код -->
<div class="single-product-custom__controls">
<?php
// Проверяем, поддерживается ли AJAX
if (function_exists('wpc_woocommerce_ajax_add_to_cart')) {
// Используем функцию WPC AJAX Add to Cart
wpc_woocommerce_ajax_add_to_cart();
} else {
// Резервный вариант - стандартная функция
woocommerce_template_single_add_to_cart();
}
?>
</div>
<!-- Ваш существующий код -->
</section>
Настройка JavaScript
Убедитесь, что в вашем JavaScript файле нет кода, который принудительно перезагружает страницу при клике на кнопку:
// Пример правильного обработчика для AJAX добавления в корзину
jQuery(document).ready(function($) {
$(document).on('click', '.single_add_to_cart_button', function(e) {
// Позволяем WooCommerce обрабатывать AJAX запрос
// Никакого preventDefault() здесь, если это стандартная кнопка WooCommerce
});
});
Альтернативные методы
Метод 1: Ручная настройка AJAX
Если плагин WPC AJAX Add to Cart не помогает, можно настроить AJAX вручную:
// В functions.php
add_action('wp_enqueue_scripts', 'add_custom_ajax_script');
function add_custom_ajax_script() {
wp_enqueue_script('custom-ajax-add-to-cart', get_stylesheet_directory_uri() . '/assets/js/custom-ajax-cart.js', array('jquery'), null, true);
wp_localize_script('custom-ajax-add-to-cart', 'ajax_cart', array(
'ajaxurl' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('ajax-cart-nonce')
));
}
add_action('wp_ajax_custom_add_to_cart', 'custom_add_to_cart_function');
add_action('wp_ajax_nopriv_custom_add_to_cart', 'custom_add_to_cart_function');
function custom_add_to_cart_function() {
check_ajax_referer('ajax-cart-nonce', 'nonce');
$product_id = isset($_POST['product_id']) ? intval($_POST['product_id']) : 0;
$quantity = isset($_POST['quantity']) ? intval($_POST['quantity']) : 1;
if ($product_id && WC()->cart->add_to_cart($product_id, $quantity)) {
wp_send_json_success(array(
'message' => 'Товар добавлен в корзину',
'cart_contents_count' => WC()->cart->get_cart_contents_count()
));
} else {
wp_send_json_error(array('message' => 'Ошибка добавления товара'));
}
}
Метод 2: Использование WooCommerce hooks
Вы можете использовать хуки WooCommerce для переопределения поведения:
// Отключаем стандартное поведение AJAX cart fragments
add_filter('woocommerce_add_to_cart_fragments', '__return_empty_array');
// Добавляем кастомный обработчик
add_filter('woocommerce_add_to_cart_redirect', '__return_false');
Устранение неполадок
Проблема 1: Fly Cart не появляется
Причина: Конфликт с другими плагинами или темой
Решение:
- Временно отключите другие плагины по одному
- Проверьте совместимость с вашей темой
- Убедитесь, что в CSS нет правил, скрывающих Fly Cart
Проблема 2: Товар добавляется, но Fly Cart не обновляется
Причина: Проблема с инициализацией JavaScript
Решение:
// Добавьте этот код в ваш JavaScript файл
jQuery(document).ready(function($) {
// Принудительное обновление Fly Cart после добавления в корзину
$(document).ajaxComplete(function(event, xhr, settings) {
if (settings.url.indexOf('add-to-cart') !== -1) {
// Обновляем Fly Cart
if (typeof wpcFlyCart !== 'undefined') {
wpcFlyCart.updateCart();
}
}
});
});
Проблема 3: Количество товара не учитывается
Причина: Проблема с полем количества
Решение:
Убедитесь, что в вашей форме есть поле количества:
<?php
woocommerce_quantity_input(array(
'min_value' => apply_filters('woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product),
'max_value' => apply_filters('woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product),
'input_value' => isset($_POST['quantity']) ? wc_stock_amount($_POST['quantity']) : $product->get_min_purchase_quantity(),
));
?>
Заключение
-
Основное решение - установка плагина WPC AJAX Add to Cart, который официально рекомендуется разработчиками WPClever для работы с Fly Cart без перезагрузки страницы
-
Дополнительные настройки могут потребоваться для кастомных тем или конфликтов с другими плагинами
-
Проверка совместимости - убедитесь, что все необходимые скрипты загружаются и конфликтов нет
-
Резервные методы - если основной подход не работает, можно вручную настроить AJAX функционал или использовать WooCommerce hooks
-
Тестирование - после всех изменений обязательно протестируйте добавление товаров в корзину на разных устройствах и в разных браузерах
Для достижения оптимального результата рекомендуется сначала попробовать установку WPC AJAX Add to Cart, как указано в официальной документации WPClever, и только затем переходить к более сложным кастомным решениям.
Источники
- WPC Fly Cart for WooCommerce - WPClever
- WPC AJAX Add to Cart for WooCommerce – WordPress.org
- WPC Fly Cart for WooCommerce Plugin — WordPress.com
- WPC Fly Cart for WooCommerce – WordPress.org
- Add ajax to add to cart buttons and prevent the page reload - Stack Overflow
- WooCommerce: Why & How to Disable Ajax Cart Fragments - Business Bloomer