перейти_к_оплате не перенаправляет, если не установлен флажок

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

Я новичок в разработке с 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 Class
                   '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' );
    }
}

Любая помощь будет очень appreciated.

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

Проблема с редиректом на страницу оформления заказа при отсутствии отметки чекбокса

Вам необходимо обеспечить, чтобы пользователи могли перейти на страницу оформления заказа только после того, как они отметят чекбокс, подтверждающий ознакомление с дисклэймером. Давайте решим эту задачу поэтапно, интегрируя необходимые проверки и обработку ошибок на вашем сайте WordPress с установленным плагином WooCommerce.

1. Модификация кнопки "Proceed to checkout"

В данном случае кнопка "Proceed to checkout" представлена как тег <a>, что требует применения JavaScript для предотвращения перехода по ссылке. Мы добавим обработчик событий, который будет срабатывать при попытке перехода.

add_action('woocommerce_proceed_to_checkout', 'add_checkbox_and_js');

function add_checkbox_and_js() {
    // Отображаем чекбокс
    echo '<div class="woocommerce-checkbox">';

    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',
    ));

    echo '</div>';

    // Добавляем JavaScript для проверки состояния чекбокса
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('.checkout-button').on('click', function(e) {
                var checkbox = $('#checkout_checkboxTEST');
                if (!checkbox.is(':checked')) {
                    e.preventDefault(); // Останавливаем переход по ссылке
                    alert('Пожалуйста, подтвердите знакомство с дисклеймером.'); // Сообщение об ошибке
                }
            });
        });
    </script>
    <?php
}

2. Проверка состояния чекбокса на сервере

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

add_action('woocommerce_checkout_process', 'validate_checkout_checkbox');

function validate_checkout_checkbox() {
    if ( ! isset($_POST['checkout_checkboxTEST']) ) {
        wc_add_notice(__('Пожалуйста, подтвердите знакомство с дисклеймером.'), 'error');
    }
}

Рекомендации для дальнейшего улучшения

  • Тестирование: Убедитесь, что ваша форма корректно работает на всех устройствах и браузерах.
  • SEO Оптимизация: Используйте ключевые слова, такие как "дисклеймер", "оформление заказа" и "WooCommerce", в тексте и мета-тегах вашей страницы, чтобы улучшить видимость в результатах поиска.
  • Пользовательский опыт: Убедитесь, что пользователям понятно, почему нужно делать отметку в чекбоксе. Ясные указания и ссылки на подробности касаемо дисклеймера будут полезны.

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

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

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