WooCommerce AJAX добавить в корзину – пошаговое руководство

Опубликовано: 2019-11-20

Несколько недель назад мы говорили о том, как программно добавить функцию корзины, чтобы увеличить ваши продажи. Сегодня мы рассмотрим, как реализовать AJAX в кнопке « Добавить в корзину » в продуктах WooCommerce . Это улучшит взаимодействие с пользователем и общий процесс продаж, что также поможет вам оптимизировать ваш магазин и увеличить доход.

В настоящее время, если вы хотите запустить успешный магазин, важно, чтобы ваш сайт динамически обновлял корзину. В противном случае каждый раз, когда пользователь добавляет товар в корзину, страница будет перезагружаться, что сделает процесс покупки очень медленным и повысит вероятность того, что клиенты уйдут. Вот почему модернизация вашего магазина с помощью функции добавления в корзину WooCommerce AJAX является обязательной, чтобы уменьшить отказ от корзины и увеличить ваши продажи.

В этом руководстве мы покажем вам, как это сделать шаг за шагом.

Преимущества AJAX в WooCommerce

Подводя итог, можно сказать, что преимущества использования AJAX в вашем магазине:

  • Уменьшите нагрузку на сервер и пропускную способность
  • Ускорьте процесс покупки
  • Улучшить качество обслуживания клиентов
  • Уменьшить отказ от корзины
  • Повысить коэффициент конверсии

Учебник: WooCommerce AJAX добавить в корзину

Чтобы применить функцию добавления AJAX в корзину в WooCommerce , есть два варианта:

  1. С плагином
  2. Кодируй сам

Давайте рассмотрим каждый метод.

1) AJAX добавить в корзину с плагином

Если у вас нет опыта программирования или вы предпочитаете простое решение, использование плагина — отличный выбор. Просто загрузите наш плагин AJAX для добавления в корзину WooCommerce, установите его, а программа сделает все остальное.

Ajax добавить в корзину для WooCommerce

AJAX добавить в корзину для WooCommerce — один из лучших плагинов для добавления AJAX к кнопке добавления в корзину WooCommerce. Этот инструмент позволяет покупателям включать в свои корзины один или несколько товаров без необходимости каждый раз перезагружать сайт. Что еще лучше, так это то, что он работает без сбоев в 99% тем WordPress и не требует первоначальной настройки. Как только вы установите его, он будет готов к работе.

2) Закодируй сам

У вас есть навыки программирования и вы предпочитаете настраивать кнопку добавления в корзину WooCommerce AJAX? В этом руководстве мы покажем вам, как это сделать шаг за шагом.

А) Установить дочернюю тему

Первое, что вам нужно сделать, это создать дочернюю тему . Если у вас его нет, вы можете использовать плагин. Их несколько, поэтому просто выберите тот, который вам больше нравится, и установите его в своем магазине. Почему вы должны установить дочернюю тему? Потому что, если вы напрямую настроите файлы темы, при следующем обновлении темы новые файлы заменят ваши изменения, и все ваши настройки будут потеряны. Однако, если вы настроите дочернюю тему, изменения не будут переопределены.

B) Включить файл JavaScript (JS)

В файл functions.php дочерней темы включите файл JavaScript, используя хук wp_enqueue_script . Это один из самых популярных хуков, которые WordPress предлагает для настройки веб-сайтов. Давайте посмотрим на скрипт, который включает файл ajax_add_to_cart.js ниже:

 функция ql_woocommerce_ajax_add_to_cart_js() {
    если (function_exists('is_product') && is_product()) {  
       wp_enqueue_script('custom_script', get_bloginfo('stylesheet_directory') . '/js/ajax_add_to_cart.js', array('jquery'),'1.0' );
    }
}
add_action('wp_enqueue_scripts', 'ql_woocommerce_ajax_add_to_cart_js');

С условием if (function_exists('is_product') && is_product()) в строке 2 вы убедитесь, что JQuery применяется только на странице продукта.

в) создать JS-файл.

Сделав это, создайте файл, который вы включили на предыдущем шаге. Просто зайдите в свою cPanel , а затем в папку дочерней темы . После этого следуйте по маршруту wp_content/themes/folder . Там создайте новую папку в дочерней теме с именем js , а затем внутри нее файл с тем же именем, которое вы использовали в хуке ajax-add-to-cart.js . Имейте в виду, что этот шаг также работает, даже если вы используете FTP-клиент. Если в вашей дочерней теме уже есть папка JS, вы можете использовать ее, не создавая новую.

Г) Файл JQuery/JS

Следующим шагом будет работа с файлом JQuery, который вы загрузили в свою дочернюю тему. Этот файл пуст, поэтому вам нужно добавить скрипты. Во-первых, предотвратите перезагрузку страницы кнопкой « Добавить в корзину » с помощью следующего скрипта:

 $('.single_add_to_cart_button').on('щелчок', function(e) { 
    e.preventDefault();
});

Обратите внимание, что мы используем селектор $('.single_add_to_cart_button') для запуска вызова AJAX при нажатии кнопки. Вы должны это понимать, потому что весь последующий скрипт будет проходить внутри этой функции.

E) JQuery WooCommerce AJAX добавить в корзину отдельные продукты

Таким образом, полный сценарий JQuery для добавления AJAX в корзину для отдельных продуктов:

 jQuery (документ) .ready (функция ($) {
    $('.single_add_to_cart_button').on('щелчок', function(e){ 
    e.preventDefault();
    $этакнопка = $(это),
                $form = $thisbutton.closest('form.cart'),
                идентификатор = $thisbutton.val(),
                product_qty = $form.find('ввод[имя=количество]').val() || 1,
                product_id = $form.find('input[name=product_id]').val() || я бы,
                Variation_id = $form.find('input[name=variation_id]').val() || 0;
    переменные данные = {
            действие: 'ql_woocommerce_ajax_add_to_cart',
            product_id: продукт_id,
            product_sku: '',
            количество: product_qty,
            вариация_ид: вариация_ид,
        };
    $.ajax({
            тип: 'пост',
            URL-адрес: wc_add_to_cart_params.ajax_url,
            данные: данные,
            перед отправкой: функция (ответ) {
                $thisbutton.removeClass('добавлено').addClass('загрузка');
            },
            завершено: функция (ответ) {
                $thisbutton.addClass('добавлено').removeClass('загрузка');
            }, 
            успех: функция (ответ) { 
                если (ответ.ошибка и ответ.продукт_url) {
                    window.location = response.product_url;
                    возвращение;
                } еще { 
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                } 
            }, 
        }); 
     }); 
});

Е) PHP-скрипт

После этого вам понадобится обработчик PHP. Лучший способ — использовать некоторые фильтры WooCommerce для создания функции добавления в корзину . На этот раз вы сделаете это с помощью AJAX. Просто скопируйте и вставьте следующий скрипт в файл functions.php дочерней темы под предыдущим скриптом, который мы использовали для включения файла JS.

 add_action('wp_ajax_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart'); 
add_action('wp_ajax_nopriv_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart');          
функция ql_woocommerce_ajax_add_to_cart() {  
    $product_id = apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $ количество = пусто ($ _ POST ['количество'])? 1: wc_stock_amount($_POST['количество']);
    $variation_id = absint($_POST['variation_id']);
    $passed_validation = apply_filters('ql_woocommerce_add_to_cart_validation', true, $product_id, $количество);
    $product_status = get_post_status($product_id); 
    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'опубликовать' === $product_status) { 
        do_action('ql_woocommerce_ajax_added_to_cart', $product_id);
            если ('да' === get_option('ql_woocommerce_cart_redirect_after_add')) { 
                wc_add_to_cart_message (массив ($ product_id => $ количество), правда); 
            } 
            WC_AJAX :: get_refreshed_fragments(); 
            } еще { 
                $данные = массив( 
                    'ошибка' => правда,
                    'product_url' => apply_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));
                эхо wp_send_json ($ данные);
            }
            wp_die();
        }

Вот и все! Вы только что создали кнопку добавления в корзину WooCommerce AJAX ! Но как понять, что вы все сделали правильно? Вы можете легко это проверить. При нажатии на кнопку добавить в корзину товар должен быть добавлен в корзину без перезагрузки страницы.

Вывод

В общем, если вы хотите оптимизировать свой магазин, функция добавления в корзину WooCommerce AJAX является обязательной. Самый простой способ применить его — использовать плагин AJAX для добавления в корзину WooCommerce. Однако, если у вас есть навыки кодирования, вы можете написать код AJAX , добавить в корзину самостоятельно с дочерней темой и немного PHP, как описано выше.

Оба варианта превосходны, поэтому выберите тот, который лучше соответствует вашим потребностям и навыкам. Это поможет вам улучшить пользовательский опыт и повысить коэффициент конверсии. Пожалуйста, дайте нам знать ваши мысли в разделе комментариев ниже.

Наконец, для получения дополнительных руководств по WooCommerce мы рекомендуем вам ознакомиться с нашими руководствами о том, как добавлять продукты WooCommerce и как создавать атрибуты продукта по умолчанию в WooCommerce.