Вопрос или проблема
Я хочу добавить пользовательскую кнопку, которая будет работать при таких условиях: у нас есть поле ввода на странице продукта в админке, куда администратор может добавить цену, а также опцию включения/выключения для использования кнопки конкретно для продуктов. Функция кнопки будет состоять в том, что при нажатии на кнопку она будет использовать AJAX-обработчик и добавлять продукт в корзину по идентификатору продукта, но цена будет браться из созданного поля, а не из фактической цены продукта. И будет производиться оформление заказа с этой пользовательской ценой. Это будет работать только для кнопки, остальные функциональности страницы продукта останутся прежними.
Ответ или решение
Создание кастомной кнопки добавления в корзину с индивидуальной ценой требует некоторые модификации как на стороне администрирования, так и на стороне клиента. Ниже изложены шаги, которые помогут вам реализовать данную функциональность.
Шаг 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'),
));
}
- Сохранение данных:
- Добавьте код для сохранения введенной информации при обновлении продукта.
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: Добавление кнопки на фронтенде
- Измените шаблон продукта:
- Вам нужно будет отредактировать шаблон страницы продукта (обычно
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 для добавления в корзину
- Создайте 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 для обработки нажатия кнопки
- Напишите скрипт для обработки нажатия кнопки:
- Добавьте 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(); // Обновляем страницу для отображения измененного содержимого корзины
}
}
});
});
});
Заключение
Теперь у вас есть кастомная кнопка добавления в корзину с индивидуальной ценой. Не забудьте протестировать все изменения на тестовом сервере перед развертыванием на живом сайте, чтобы убедиться, что все работает корректно. Если у вас возникнут дополнительные вопросы или нужна помощь с другим функционалом, пожалуйста, дайте знать!