Получить текущий выбранный идентификатор варианта из продукта переменной Woocommerce - PullRequest
Новая
       62

Получить текущий выбранный идентификатор варианта из продукта переменной Woocommerce

0 голосов
/ 03 марта 2019

Ситуация: У меня есть куча разных продуктов в магазине Wordpress WooCommerce.На веб-интерфейсе есть форма с несколькими выбранными входами, которая позволяет пользователю настроить продукт перед добавлением его в корзину.Цена и другая информация будут меняться в зависимости от возможных вариаций, поэтому мне нужно отслеживать это.

Цель: После того, как форма была изменена пользователем, Woocommerce обновит скрытуюполе input.variation_id с идентификатором вновь выбранного варианта.Всякий раз, когда это меняется, я хочу знать, что.

Очевидно, что есть что-то, что отслеживает изменения, и это прекрасно работает: 

$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
    console.log('form has changed'); // fires correctly
} );

Я также могу прочитать значение этогоскрытое поле, до того как оно было изменено: 

var id = $('input.variation_id').val();
console.log( id ); // returns correct value

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

$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
    var id = $('input.variation_id').val();
    console.log( id ); // fires, but returns empty
} );

Я перепробовал все, что пришло мне в голову.Если я набираю его прямо в консоль браузера, он работает, но когда я пытаюсь получить его с помощью функции выше, он пуст.Что я могу сделать?

Ранее я работал с $('form.variations_form select').change(...);, но это приведет к путанице в вариациях, и я хочу убедиться, что Woocommerce обновил всю информацию, прежде чем я выполню свое действие.

Ответы [ 2 ]

0 голосов
/ 03 марта 2019

Идентификатор варианта в Javascript / jQuery на страницах продукта с одной переменной приведен в следующем очень явном примере, который позволит вам получить текущий выбранный вариант: 

<script>
jQuery(function($){
    var i = 'input.variation_id', f = 'form.variations_form', s = 'table.variations select';

    // ----- ON start (once DOM is loaded) ------ //

    // The variation ID - BEFORE
    console.log( 'Variation id (on start): '+$(i).val() );

    // Get the default selected variation ID  - AFTER (if set on the variable product | delay 300 ms)
    setTimeout( function(){
        console.log( 'Default Variation id (on start +300ms): '+$(i).val() );
    }, 300 );

    // ---------------- Live events ------------- //

    // form on "change" delegated event - BEFORE
    $(f).on( 'change', s, function(){
        console.log('form select "CHANGE" event (variation id: '+$(i).val()+')');
    });

    // form on "blur" delegated event - AFTER
    $(f).on( 'blur', s, function(){
        console.log('form select "BLUR" event (variation id: '+$(i).val()+')');
    });
});
</script>

Поэтому для раскрывающегося списка выберите поляиспользуйте событие blur для получения текущего идентификатора варианта

0 голосов
/ 03 марта 2019

Возможно, я нашел ответ: woocommerce_variation_select_change выглядит как уведомитель, тогда как желаемое действие можно выполнить с помощью: 

$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
    console.log( variation ); // fires correctly and returns a Woocommerce product object
} );

Найдено здесь: https://sarathlal.com/get-variation-product-data-on-selecting-variation-options-woocommerce/

...