Один из ключевых аспектов успешного интернет-магазина — удобство взаимодействия с пользователем. В этой статье блога мы рассмотрим различные методы улучшения пользовательского опыта путем добавления поля количества к кнопке Ajax «Добавить в корзину» на страницах архива WooCommerce. Мы предоставим примеры кода для каждого метода, чтобы помочь вам эффективно реализовать эту функцию.

Метод 1: использование JavaScript и Ajax
В этом методе мы будем использовать JavaScript и Ajax для динамического обновления количества и добавления товаров в корзину без перезагрузки страницы.

// Add the following code to your theme's JavaScript file or use a custom JavaScript plugin
jQuery(document).ready(function($) {
  $('body').on('click', '.add-to-cart-button', function(e) {
    e.preventDefault();
    var quantity = $(this).closest('.product').find('.quantity').val();
    var product_id = $(this).data('product_id');

    $.ajax({
      type: 'POST',
      url: wc_add_to_cart_params.ajax_url,
      data: {
        action: 'woocommerce_add_to_cart',
        product_id: product_id,
        quantity: quantity
      },
      success: function(response) {
        if (response.success) {
          // Handle success message or redirect to cart page
        } else {
          // Handle error message
        }
      },
    });
  });
});

Метод 2: использование REST API WooCommerce
Если вы предпочитаете использовать REST API WooCommerce, вы можете добиться той же функциональности. Этот метод позволяет совершать вызовы API для добавления товаров в корзину в нужном количестве.

// Add the following code to your theme's JavaScript file or use a custom JavaScript plugin
jQuery(document).ready(function($) {
  $('body').on('click', '.add-to-cart-button', function(e) {
    e.preventDefault();
    var quantity = $(this).closest('.product').find('.quantity').val();
    var product_id = $(this).data('product_id');

    $.ajax({
      type: 'POST',
      url: wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'),
      data: {
        product_id: product_id,
        quantity: quantity
      },
      success: function(response) {
        if (response) {
          // Handle success message or redirect to cart page
        } else {
          // Handle error message
        }
      },
    });
  });
});

Метод 3: использование короткого кода WooCommerce
Если вам нужно более простое решение без специального кодирования, вы можете использовать встроенный короткий код WooCommerce [add_to_cart_url]для создания URL-адреса добавления в корзину с нужным количеством.

[add_to_cart_url id="PRODUCT_ID" quantity="QUANTITY"]

Замените PRODUCT_IDна идентификатор продукта и QUANTITYна желаемое количество.

Реализовав поле количества с помощью кнопки Ajax «Добавить в корзину» на страницах архива WooCommerce, вы можете значительно улучшить пользовательский опыт вашего интернет-магазина. Мы обсудили три различных метода, включая JavaScript и Ajax, WooCommerce REST API и шорткод WooCommerce. Выберите метод, который лучше всего соответствует вашим требованиям, и начните улучшать качество покупок для своих клиентов уже сегодня.