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

#wordpress #woocommerce #shortcode

Вопрос:

Это довольно сложная настройка. Вероятно, это был более простой способ добраться сюда, но вот мы здесь.

Итак, у меня есть переменные продукты в категории под названием «Имитация».

У меня есть выпадающий список выбора, который при выборе заполняет содержимое в div содержимым (с помощью коротких кодов, таких как [product_page id=»6477″] ) из конкретного продукта, выбранного в категории «имитация».

Все это прекрасно работает так, как я хочу.

Проблема теперь в том, что как только продукт выбран, когда пользователь пытается выбрать нужный размер, страница мгновенно меняет этот раздел на пустой. Я не совсем понимаю, почему. У меня такое чувство, что это связано с использованием выпадающего списка, который я уже использую для выбора, но не уверен.

Вот эта страница

Ответ №1:

Это связано с тем, как вы установили прослушиватель событий на выбор, который вы используете

 $(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("."   optionValue).hide();
                $("."   optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
 

это в основном устанавливает событие изменения для всех полей выбора. лучшим вариантом было бы добавить идентификатор к выбору, используемому для изменения варианта. например, идентификатор «getvariant», затем в своем javascript вы изменяете код на следующий

 $(document).ready(function(){
        $("#getvariant").change(function(){
            $(this).find("option:selected").each(function(){
                var optionValue = $(this).attr("value");
                if(optionValue){
                    $(".box").not("."   optionValue).hide();
                    $("."   optionValue).show();
                } else{
                    $(".box").hide();
                }
            });
        }).change();
    });