Кто-нибудь может помочь мне с этой проблемой: как создать пользовательскую кнопку с индивидуальной ценой для добавления в корзину.

Вопрос или проблема

Я хочу добавить пользовательскую кнопку, которая будет работать при таких условиях: у нас есть поле ввода на странице продукта в админке, куда администратор может добавить цену, а также опцию включения/выключения для использования кнопки конкретно для продуктов. Функция кнопки будет состоять в том, что при нажатии на кнопку она будет использовать AJAX-обработчик и добавлять продукт в корзину по идентификатору продукта, но цена будет браться из созданного поля, а не из фактической цены продукта. И будет производиться оформление заказа с этой пользовательской ценой. Это будет работать только для кнопки, остальные функциональности страницы продукта останутся прежними.

Ответ или решение

Создание кастомной кнопки добавления в корзину с индивидуальной ценой требует некоторые модификации как на стороне администрирования, так и на стороне клиента. Ниже изложены шаги, которые помогут вам реализовать данную функциональность.

Шаг 1: Добавление поля для цены и переключателя в админской панели

  1. Добавление метаполя для цены и переключателя:
    • Используйте стандартные метаполя WordPress или функции WooCommerce для добавления пользовательского поля к странице редактирования продукта.
    • Поле для ввода цены должно быть числовым и включать в себя метаполе для включения/выключения кнопки.
add_action('woocommerce_product_options_general_product_data', 'add_custom_price_field');
function add_custom_price_field() {
    woocommerce_wp_text_input(array(
        'id' => '_custom_price',
        'label' => __('Custom Price', 'woocommerce'),
        'description' => __('Введите индивидуальную цену для этого продукта.', 'woocommerce'),
        'desc_tip' => true,
        'type' => 'number',
    ));

    woocommerce_wp_checkbox(array(
        'id' => '_enable_custom_price_button',
        'label' => __('Enable Custom Price Button', 'woocommerce'),
        'description' => __('Разрешить использование кнопки с индивидуальной ценой для этого продукта.', 'woocommerce'),
    ));
}
  1. Сохранение данных:
    • Добавьте код для сохранения введенной информации при обновлении продукта.
add_action('woocommerce_process_product_meta', 'save_custom_price_field');
function save_custom_price_field($post_id) {
    $custom_price = $_POST['_custom_price'];
    $enable_button = isset($_POST['_enable_custom_price_button']) ? 'yes' : 'no';

    update_post_meta($post_id, '_custom_price', sanitize_text_field($custom_price));
    update_post_meta($post_id, '_enable_custom_price_button', $enable_button);
}

Шаг 2: Добавление кнопки на фронтенде

  1. Измените шаблон продукта:
    • Вам нужно будет отредактировать шаблон страницы продукта (обычно single-product/add-to-cart/simple.php), чтобы добавить кастомную кнопку.
global $product;

$enable_custom_price_button = get_post_meta($product->get_id(), '_enable_custom_price_button', true);
$custom_price = get_post_meta($product->get_id(), '_custom_price', true);

if ($enable_custom_price_button === 'yes' && !empty($custom_price)) {
    echo '<button class="button custom-add-to-cart" data-product_id="' . esc_attr($product->get_id()) . '" data-custom_price="' . esc_attr($custom_price) . '">Добавить по индивидуальной цене</button>';
}

Шаг 3: Реализация AJAX для добавления в корзину

  1. Создайте AJAX обработчик:
    • Напишите обработчик AJAX для обработки нажатия кнопки и добавления товара в корзину с индивидуальной ценой.
add_action('wp_ajax_add_custom_price_to_cart', 'add_custom_price_to_cart');
add_action('wp_ajax_nopriv_add_custom_price_to_cart', 'add_custom_price_to_cart');

function add_custom_price_to_cart() {
    $product_id = intval($_POST['product_id']);
    $custom_price = floatval($_POST['custom_price']);

    $cart_item_data = array();
    $cart_item_data['custom_price'] = $custom_price;

    WC()->cart->add_to_cart($product_id, 1, 0, array(), $cart_item_data);

    wp_send_json_success();
}

Шаг 4: Добавление JavaScript для обработки нажатия кнопки

  1. Напишите скрипт для обработки нажатия кнопки:
    • Добавьте Javascript, который будет отправлять AJAX-запрос при нажатии кнопки.
jQuery(document).ready(function($) {
    $('.custom-add-to-cart').on('click', function() {
        var product_id = $(this).data('product_id');
        var custom_price = $(this).data('custom_price');

        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'POST',
            data: {
                action: 'add_custom_price_to_cart',
                product_id: product_id,
                custom_price: custom_price
            },
            success: function(response) {
                if(response.success) {
                    // Здесь добавьте код для обновления корзины или уведомления пользователя
                    location.reload(); // Обновляем страницу для отображения измененного содержимого корзины
                }
            }
        });
    });
});

Заключение

Теперь у вас есть кастомная кнопка добавления в корзину с индивидуальной ценой. Не забудьте протестировать все изменения на тестовом сервере перед развертыванием на живом сайте, чтобы убедиться, что все работает корректно. Если у вас возникнут дополнительные вопросы или нужна помощь с другим функционалом, пожалуйста, дайте знать!

Оцените материал
Добавить комментарий

Капча загружается...