从Woocommerce变量产品获取当前选择的变体ID [英] Get currently selected variation id from Woocommerce variable product

问题描述

情况:我在Wordpress WooCommerce商店中有一堆可变产品.在前端，有一个带有多个选择输入的表单，允许用户在将产品添加到购物车之前对其进行配置.价格和其他信息会随可能的变化而变化，因此我需要保持跟踪.

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.

目标:用户更改了表单后，Woocommerce将使用新选择的变体ID更新隐藏字段input.variation_id.每当这种变化发生时，我都想知道.

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?

我以前使用过$('form.variations_form select').change(...);，但是它会弄乱各种变体，因此我想确保Woocommerce在执行我的操作之前已经更新了所有信息.

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.

推荐答案

有关单个变量产品页面上Javascript/jQuery中的变体ID，请参见以下非常明确的示例，该示例将允许您获取当前选定的变体:

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>

因此对于下拉列表选择字段，请使用 blur 事件获取当前版本ID

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

这篇关于从Woocommerce变量产品获取当前选择的变体ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！