Всплывающее окно выбора опции Woocommerce

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

    jQuery(document).ready(function($) {
    // Нацеливаемся только на кнопку "Выбрать опции", а не на кнопку добавления в корзину
    $('.products .button.select-options').on('click', function(e) {
        // Предотвращаем действие по умолчанию, чтобы остановить перенаправление страницы
        e.preventDefault();
        
        // Получаем ID продукта из атрибута данных кнопки
        const productId = $(this).data('product-id');
        
        // Открываем всплывающее окно Elementor
        elementorProFrontend.modules.popup.showPopup({ id: "CUSTOM_SELECT_POPUP" });

        // Выполняем AJAX-запрос для загрузки формы вариации
        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            method: 'POST',
            data: {
                action: 'load_variation_form',
                product_id: productId,
            },
            success: function(response) {
                // Загружаем форму вариации в предназначенный для этого div внутри всплывающего окна
                $('#popup-variation-form').html(response);
            }
        });
    });
});

function load_variation_form() {
    if (isset($_POST['product_id'])) {
        $product_id = intval($_POST['product_id']);
        
        // Выводим шаблон WooCommerce для одиночного продукта для вариаций
        wc_get_template_part('content-single-product', null, array('product_id' => $product_id));
    }
    wp_die();
}
add_action('wp_ajax_load_variation_form', 'load_variation_form');
add_action('wp_ajax_nopriv_load_variation_form', 'load_variation_form');

function enqueue_custom_select_option_popup_script() {
    // Добавляем скрипт только на страницах архива продуктов WooCommerce
    if (is_shop() || is_product_category()) {
        wp_enqueue_script(
            'custom-select-popup',
            get_template_directory_uri() . '/js/custom-select-popup.js',
            array('jquery'), // Убедитесь, что jQuery загружен как зависимость
            null,
            true // Загружаем в подвале
        );
    }
}
add_action('wp_enqueue_scripts', 'enqueue_custom_select_option_popup_script');

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

Всплывающее Окно Выбора Опции в WooCommerce

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

Задача 1: Триггер Всплывающего Окна только при Нажатии Кнопки "Выбрать Опцию"

Ваша текущая реализация в файле custom-select-popup.js уже близка к правильному решению. Вы используете событие клика на кнопке, которое вызывает всплывающее окно. Проблема с тем, что всплывающее окно открывается при нажатии кнопки "В корзину", может быть связана с неправильной инициализацией кнопок или отсутствием уникальной маркировки для вашей кнопки "Выбрать опцию".

Для того чтобы убедиться, что только кнопка "Выбрать опцию" триггерит всплывающее окно, вы можете использовать следующий код:

jQuery(document).ready(function($) {
    // Только для кнопки "Выбрать опцию"
    $('.products').on('click', '.button.select-options', function(e) {
        e.preventDefault();

        // Получите ID продукта
        const productId = $(this).data('product-id');

        // Откройте всплывающее окно Elementor
        elementorProFrontend.modules.popup.showPopup({ id: "CUSTOM_SELECT_POPUP" });

        // AJAX вызов для загрузки формы вариаций
        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            method: 'POST',
            data: {
                action: 'load_variation_form',
                product_id: productId,
            },
            success: function(response) {
                $('#popup-variation-form').html(response);
            }
        });
    });
});

Этот код будет автоматически вызывать всплывающее окно только при нажатии на кнопку "Выбрать опцию".

Задача 2: Отключение Перенаправления на Страницу Продукта

WooCommerce по умолчанию перенаправляет пользователей на страницу продукта при нажатии кнопки "Выбрать опцию". Чтобы избежать этого поведения, необходимо переопределить стандартное поведение кнопки. Вы уже добавили e.preventDefault(), что является правильным решением. Убедитесь, что данный код действительно срабатывает в полном объеме.

Таким образом, ваш окончательный код в файле custom-select-popup.js должен выглядеть так:

jQuery(document).ready(function($) {
    $('.products').on('click', '.button.select-options', function(e) {
        e.preventDefault(); // предотвращает стандартное поведение

        const productId = $(this).data('product-id');

        elementorProFrontend.modules.popup.showPopup({ id: "CUSTOM_SELECT_POPUP" });

        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            method: 'POST',
            data: {
                action: 'load_variation_form',
                product_id: productId,
            },
            success: function(response) {
                $('#popup-variation-form').html(response);
            }
        });
    });
});

Загрузка Формы Вариаций с Использованием AJAX

Код в вашем functions.php, который отвечает за загрузку формы вариаций, выглядит правильно:

function load_variation_form() {
    if (isset($_POST['product_id'])) {
        $product_id = intval($_POST['product_id']);

        // Загрузка шаблона WooCommerce для вариаций
        wc_get_template_part('content-single-product', null, array('product_id' => $product_id));
    }
    wp_die();
}
add_action('wp_ajax_load_variation_form', 'load_variation_form');
add_action('wp_ajax_nopriv_load_variation_form', 'load_variation_form');

Этот код формирует правильный ответ на AJAX-запрос и выводит форму вариаций в ваше всплывающее окно.

Заключение

Следуя данным рекомендациям, вы сможете успешно настроить пользовательское всплывающее окно выбора опции для продуктов на вашем сайте WooCommerce. Определите кнопку с классом "select-options", и используйте AJAX для подгрузки формы своим пользователям, избегая перенаправления на страницу продукта. Убедитесь, что у вас установлен Elementor Pro для корректного функционирования всплывающего окна.

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