Вопрос или проблема
Я нов в разработке на WordPress. В настоящее время я пытаюсь разрешить пользователям перейти на страницу оформления заказа только в том случае, если они сначала отметят чекбокс с отказом от ответственности. Если они нажмут кнопку “proceed_to_checkout_page” / <a> тег до отметки чекбокса, появится сообщение об ошибке, уведомляющее их о необходимости щелкнуть чекбокс с отказом от ответственности и остановить переадресацию на страницу оформления заказа.
Еще раз, при проверке кнопки proceed_to_checkout на самом деле это <a> тег. У меня возникли трудности с изменением этого тега.
Вот <a> тег:
<a href="https://nextdaygps.com/order-checkout-page/" class="checkout-button button alt wc-forward" style="pointer-events: auto; opacity: 1;"> Перейти к оформлению заказа</a>
Я могу отобразить свой чекбокс, но если нажать кнопку перейти к оформлению заказа, произойдет автоматическая переадресация на страницу оформления заказа. Ниже приведен мой код:
add_action( 'woocommerce_proceed_to_checkout', 'ICG70_Rover', 10 );
function ICG70_Rover() {
//Проверяем, активирован ли wooCommerce
if ( class_exists( 'WooCommerce' ) ) {
//Определяем SKU, которые вы хотите проверить
$checkSKUs = ['3'];
//Получаем все SKU в корзине
$skus = array();
foreach( WC()->cart->get_cart() as $cart_item ) {
array_push($skus, $cart_item['data']->get_sku());
}
//Проверяем, есть ли совпадения в обоих
$matchingResult = array_intersect($checkSKUs,$skus);
if (count($matchingResult) > 0) {
//Если хотя бы 1 SKU совпадает, то генерируем поле оформления
woocommerce_form_field( 'checkout_checkboxTEST', array( // CSS ID
'type' => 'checkbox',
'class' => array('form-row mycheckbox'), // CSS класс
'label_class' => array('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox'),
'input_class' => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),
'required' => true, // Обязательное или необязательное
'label' => 'Я подтверждаю, что прочитал и понял отказ от ответственности ICG70 Rover', // Метка и ссылка
));
}
}
}
// Мое всплывающее сообщение об ошибке
// Показывать уведомление, если клиент не отметит
add_action( 'woocommerce_proceed_to_checkout', 'verify_form' );
// НЕ МОГУ НАЙТИ значение для <a> тега, упомянутого выше
function verify_form() {
if ( ! (int) isset( $_POST['procced_to_checkout'] ) ) {
wc_add_notice( __( 'Пожалуйста, подтвердите отказ от ответственности' ), 'error' );
}
}
Любая помощь будет очень ценится.
Ответ или решение
Решение проблемы: Ограничение перехода на страницу оформления заказа в WooCommerce с учетом флажка согласия
Как разработчик, работающий с WordPress и WooCommerce, важно обеспечить, чтобы пользователи соблюдали необходимые условия перед переходом на страницу оформления заказа. В вашем случае вы хотите заставить пользователей отмечать флажок с декларацией перед тем, как перейти на страницу оформления заказа. Рассмотрим подробное решение вашей задачи.
Шаг 1: Настройка интерфейса для флажка согласия
Для начала, вы уже добавляете флажок с соглашением в процесс оформления заказа, используя следующее:
add_action('woocommerce_proceed_to_checkout', 'ICG70_Rover', 10);
function ICG70_Rover() {
// Проверка активирован ли WooCommerce
if (class_exists('WooCommerce')) {
// Определите артикулы, которые нужно проверить
$checkSKUs = ['3'];
// Получение всех артикулов в корзине
$skus = array();
foreach (WC()->cart->get_cart() as $cart_item) {
array_push($skus, $cart_item['data']->get_sku());
}
// Проверка наличия совпадений
$matchingResult = array_intersect($checkSKUs, $skus);
if (count($matchingResult) > 0) {
// Генерация поля для флажка оформления заказа
woocommerce_form_field('checkout_checkboxTEST', array(
'type' => 'checkbox',
'class' => array('form-row mycheckbox'),
'label_class' => array('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox'),
'input_class' => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),
'required' => true,
'label' => 'Я прочитал и понял декларацию ICG70 Rover',
));
}
}
}Шаг 2: Предотвращение перехода на страницу оформления заказа
Теперь необходимо остановить редирект на страницу оформления заказа, если флажок не установлен. Мы изменим вашу логику обработки и добавим проверку перед переходом на страницу оформления.
add_action('wp_footer', 'add_custom_checkout_validation');
function add_custom_checkout_validation() {
?>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const checkoutButton = document.querySelector('.checkout-button');
checkoutButton.addEventListener('click', function(e) {
// Поиск флажка
const checkbox = document.querySelector('input[name="checkout_checkboxTEST"]');
if (checkbox && !checkbox.checked) {
e.preventDefault(); // предотвратим переход
alert('Пожалуйста, подтвердите декларацию, отметив флажок.');
}
});
});
</script>
<?php
}Шаг 3: Завершающая проверка и валидация
С помощью вышеописанного кода мы:
- Убедились, что пользователь не перейдёт на страницу оформления без отметки флажка.
- Использовали JavaScript для добавления проверок в кликовые события на кнопку "Proceed to checkout".
Заключение
Таким образом, ваше решение будет включать в себя флажок согласия, который немедленно проверяется перед переходом на страницу оформления. Это позволяет улучшить взаимодействие с пользователем и обеспечивает защиту для вашего бизнеса от юридических рисков.
Если у вас есть дополнительные вопросы или нужна более подробная помощь, не стесняйтесь обращаться. Успехов в разработке вашего проекта на WordPress!