Get currently selected variation id from Woocommerce variable product

问题

Situation: I have a bunch of variable products in a Wordpress WooCommerce shop. On the frontend there is a form with multiple select inputs, that let the user configure the product before adding it to the cart. The price and other information will change across the possible variations, so I need to keep track of that.

Aim: After the form has been changed by the user, Woocommerce will update a hidden field input.variation_id with the ID of the newly selected variation. Whenever that changes, I want to know that.

Apparently, there is something that keeps track of changes, which works fine:

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

I am also able to read the value of that hidden field, before it was changed:

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

Problem: But when I try to call the value inside that function, I won't work.

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

I’ve tried everything that came to my mind. If I type it directly into the browser console it works, but when I try to fetch it with the function above it is empty. What can I do?

I previously worked with $('form.variations_form select').change(...); but it will mess up the variations and I want to make sure, that Woocommerce has updated all the information before I perform my action.

回答1:

For the variation ID in Javascript/jQuery on single variable product pages see the following very explicit example that will allow you to get the currently selected variation:

<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>

So for dropdown select fields use the blur event to get the current variation ID

回答2:

I maybe have found the answer: woocommerce_variation_select_change seems just like a notifier whereas the desired action can be done with:

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

Found here: https://sarathlal.com/get-variation-product-data-on-selecting-variation-options-woocommerce/

来源：https://stackoverflow.com/questions/54965487/get-currently-selected-variation-id-from-woocommerce-variable-product

标签

jquery

forms

woocommerce

variations