Задача: как автоматически подставлять остаток товара в поле формы WPForms в WooCommerce?
В интернет-магазине на WooCommerce часто требуется, чтобы форма, например, для запроса наличия или предзаказа, автоматически показывала текущий остаток товара на складе. Это позволяет пользователю видеть реальное количество, а вам — избежать ошибок при оформлении.
Диагностика проблемы
WPForms по умолчанию не умеет получать данные из WooCommerce, а тем более динамически подставлять их в поля формы. При попытке вставить остаток вручную через шорткод или статический текст данные быстро устаревают. Нужно динамическое обновление на стороне сервера или клиента.
Пошаговое решение
Реализуем динамическое подставление остатка товара в поле формы WPForms на примере текстового поля. Для этого:
- Создайте или отредактируйте форму WPForms, добавьте текстовое поле с ID, например,
stock_quantity. - В шаблоне single-product.php (или через дочернюю тему) добавьте JavaScript, который при загрузке страницы получит остаток товара через AJAX и вставит значение в поле.
- Создайте обработчик AJAX в functions.php, который вернет остаток товара по ID.
Код PHP для AJAX-обработчика:
add_action('wp_ajax_get_product_stock', 'get_product_stock_callback');
add_action('wp_ajax_nopriv_get_product_stock', 'get_product_stock_callback');
function get_product_stock_callback() {
$product_id = isset($_POST['product_id']) ? intval($_POST['product_id']) : 0;
if (!$product_id) {
wp_send_json_error('Invalid product ID');
}
$product = wc_get_product($product_id);
if (!$product) {
wp_send_json_error('Product not found');
}
$stock_quantity = $product->get_stock_quantity();
wp_send_json_success(array('stock' => $stock_quantity));
}JavaScript код для вставки в footer (внутри wp_footer или через enqueue script):
jQuery(document).ready(function($) {
var productId = $('input[name="product_id"]').val();
if (!productId) return;
$.post(wpforms_ajax.ajax_url, {
action: 'get_product_stock',
product_id: productId
}, function(response) {
if (response.success) {
$('#wpforms-123-field_stock_quantity').val(response.data.stock);
}
});
});Обратите внимание, что в примере #wpforms-123-field_stock_quantity — это реальный ID поля формы (замените 123 на ID вашей формы). Также в форме должен быть скрытый input с именем product_id и значением ID текущего товара.
Как проверить, что решение сработало
- Откройте страницу товара WooCommerce с подключенной формой.
- Убедитесь, что поле с остатком автоматически заполняется текущим значением из базы WooCommerce.
- Обновите количество на складе в панели администрирования WooCommerce и повторно загрузите страницу — значение в форме должно обновиться.
Частые ошибки и их исправление
- Неверный ID поля формы: Проверьте в HTML коде страницы точный ID поля WPForms. Без правильного селектора JS не сможет обновить значение.
- Отсутствует product_id в форме: Добавьте скрытое поле с ID товара, иначе AJAX-запрос не сможет получить данные.
- AJAX-обработчик не подключен: Убедитесь, что функции
add_action('wp_ajax_...')объявлены и файл functions.php загружен. - JavaScript ошибка: Проверьте консоль браузера на наличие ошибок. Возможно, jQuery не подключен или конфликтует с другими скриптами.
Практические советы по безопасности и производительности
- Проверяйте и валидируйте данные в AJAX-обработчике, чтобы избежать инъекций.
- Кэшируйте ответы, если остаток меняется редко, чтобы снизить нагрузку на сервер.
- Ограничьте доступ к AJAX-обработчику только для нужных пользователей, если данные чувствительные.
- Используйте wp_localize_script для передачи ajax_url из PHP в JS, чтобы не хардкодить URL.
Таблица сравнения способов реализации
| Метод | Плюсы | Минусы |
|---|---|---|
| Статический текст в форме | Просто, не требует кода | Данные быстро устаревают, нет динамики |
| PHP-фильтры WPForms (перед рендером) | Динамическое заполнение с сервера | Сложнее отладка, требует PHP-кода |
| AJAX-запрос с JS (как в статье) | Динамичное обновление после загрузки, не тормозит рендеринг | Зависит от JS, возможны задержки загрузки |