Как автоматически подставить номер телефона из FluentBooking в WooCommerce

При использовании FluentBooking вместе с WooCommerce клиент сначала записывается на консультацию, а затем переходит на страницу оплаты. Имя и электронная почта обычно заполняются автоматически, но номер телефона может оставаться пустым. В результате клиенту приходится вводить один и тот же номер дважды. Рассмотрим, почему это происходит и как автоматически подставить телефон в WooCommerce.

Почему телефон не передаётся

В FluentBooking имя и email являются системными полями. Плагин автоматически связывает их со стандартными полями WooCommerce:

• имя — billing_first_name;
• email — billing_email.

Поле телефона во FluentBooking является дополнительным вопросом формы. Даже если для него выбран тип Phone, оно не всегда связывается со стандартным полем WooCommerce: Поэтому номер сохраняется в бронировании FluentBooking, но не появляется на странице оплаты.

Как решить проблему

Можно добавить небольшой сниппет, который:

1. Получает номер из формы FluentBooking.
2. Временно сохраняет его в браузере.
3. После перехода на страницу оплаты находит поле телефона WooCommerce.
4. Автоматически подставляет сохранённый номер.
5. Передаёт его дальше платёжному модулю, например Продамус.

Настройка телефонного поля

Откройте:

FluentBooking → Календари → Нужная услуга → Настройки вопросов

Добавьте обязательное поле типа Phone с названием:

Телефон

Если услуг несколько, настройте это поле отдельно в каждой услуге.

Добавление сниппета в WPCodeBox2

Создайте новый PHP-сниппет в WPCodeBox2. Не добавляйте теги:

<?php

и:

?>

Вставьте следующий код:

add_action( 'wp_enqueue_scripts', function () {

	if (
		! is_page( 'sample-page' ) &&
		! is_page( 'oformlenie-zakaza' )
	) {
		return;
	}

	wp_enqueue_script( 'jquery' );

	$script = <<<'JAVASCRIPT'
(function () {
	'use strict';

	const storageKey = 'fluent_booking_phone';

	function getFluentPhoneField() {
		const fields = document.querySelectorAll('input[type="tel"]');

		for (const field of fields) {
			if (
				field.offsetParent !== null &&
				field.closest('.fcal_form_item')
			) {
				return field;
			}
		}

		return null;
	}

	function savePhone() {
		const field = getFluentPhoneField();

		if (!field || !field.value.trim()) {
			return;
		}

		let phone = field.value.trim();
		const container = field.closest('.fcal_form_item');

		if (container && !phone.startsWith('+')) {
			const code = container.textContent.match(/\+\d{1,4}/);

			if (code) {
				phone = code[0] + ' ' + phone;
			}
		}

		localStorage.setItem(storageKey, phone);
	}

	function fillWooCommercePhone() {
		const phone = localStorage.getItem(storageKey);

		if (!phone) {
			return;
		}

		const checkoutField = document.querySelector(
			'#billing_phone, input[name="billing_phone"]'
		);

		if (!checkoutField || checkoutField.value.trim()) {
			return;
		}

		checkoutField.value = phone;

		checkoutField.dispatchEvent(
			new Event('input', { bubbles: true })
		);

		checkoutField.dispatchEvent(
			new Event('change', { bubbles: true })
		);

		if (window.jQuery) {
			window.jQuery(checkoutField)
				.val(phone)
				.trigger('input')
				.trigger('change');
		}
	}

	document.addEventListener('input', function (event) {
		if (event.target.matches('input[type="tel"]')) {
			savePhone();
		}
	}, true);

	document.addEventListener('change', function (event) {
		if (
			event.target.matches('input[type="tel"]') ||
			event.target.closest('.fcal_form_item')
		) {
			savePhone();
		}
	}, true);

	document.addEventListener('click', function (event) {
		const button = event.target.closest('button');

		if (!button) {
			return;
		}

		const text = button.textContent.trim().toLowerCase();

		if (
			text.includes('запланировать встречу') ||
			text.includes('schedule meeting')
		) {
			savePhone();
		}
	}, true);

	window.addEventListener('pagehide', savePhone);

	if (document.readyState === 'loading') {
		document.addEventListener(
			'DOMContentLoaded',
			fillWooCommercePhone
		);
	} else {
		fillWooCommercePhone();
	}

	const observer = new MutationObserver(
		fillWooCommercePhone
	);

	observer.observe(document.documentElement, {
		childList: true,
		subtree: true
	});

	setTimeout(function () {
		observer.disconnect();
	}, 20000);
})();
JAVASCRIPT;

	wp_add_inline_script(
		'jquery',
		$script,
		'after'
	);

}, 999 );

Активация

После добавления:

1. Нажмите Save.
2. Переключите сниппет в состояние Enabled.
3. Очистите кеш FlyingPress.
4. Очистите корзину WooCommerce.
5. Откройте сайт в режиме инкогнито.
6. Проведите новое тестовое бронирование.

Как это работает

Во время заполнения FluentBooking введённый номер сохраняется в браузере. Например:

+7 999 999-99-99

После перехода на страницу оплаты сниппет находит поле: и подставляет в него сохранённый номер. Покупателю больше не требуется вводить телефон повторно. После оформления заказа номер сохраняется в WooCommerce и может быть передан платёжному модулю Продамус.

Возможные причины, если номер не появился

Проверьте следующее:

• сниппет включён в WPCodeBox2;
• выбран тип PHP;
• в код не добавлены <?php и ?>;
• кеш FlyingPress очищен;
• в корзине нет старого бронирования;
• проверка выполняется в новой вкладке инкогнито;
• на странице WooCommerce присутствует поле billing_phone;
• используется классическая страница оформления заказа WooCommerce.

Результат

После настройки клиент вводит номер телефона только один раз — в форме FluentBooking. При переходе к оплате тот же номер автоматически появляется в WooCommerce и передаётся дальше вместе с данными заказа.