Jquery 从变量产品中获取当前选定的变量和数据

情况：我在Wordpress WooCommerce商店里有一大堆不同的产品。在前端有一个具有多个选择输入的表单，允许用户在将产品添加到购物车之前配置产品。价格和其他信息将随着可能的变化而变化，因此我需要跟踪这些变化

Aim:用户更改表单后，Woocommerce将用新选择的变体id更新一个隐藏字段

input.variation\u 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\u form select'）.change（…）但它会弄乱变体，我想确保Woocommerce在我执行操作之前已经更新了所有信息。
我可能已经找到了答案：
woocommerce\u variation\u select\u change
看起来就像一个通知程序，而所需的操作可以通过以下方式完成：

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

可在此处找到：
要在单变量产品页面上使用jQuery获取选定的变量ID（和/或任何特定的可用变量数据），请使用以下命令：

add_action( 'woocommerce_before_single_variation',
 'action_wc_before_single_variation' );
function action_wc_before_single_variation() {
    ?>
    <script type="text/javascript">
    (function($){
        $('form.variations_form').on('show_variation', function(event, data){
            console.log( data.variation_id );      // The variation Id  <===  <===

            console.log( data.attributes );        // The variation attributes
            console.log( data.availability_html ); // The formatted stock status
            console.log( data.dimensions );        // The dimensions data
            console.log( data.dimensions_html );   // The formatted dimensions
            console.log( data.display_price );     // The raw price (float)
            console.log( data.display_regular_price ); // The raw regular price (float)
            console.log( data.image );             // The image data
            console.log( data.image_id );          // The image ID (int)
            console.log( data.is_downloadable );   // Is downloadable (boolean)
            console.log( data.is_in_stock );       // Is in stock (boolean)
            console.log( data.is_purchasable );    // Is purchasable (boolean)
            console.log( data.is_sold_individually ); // Is sold individually (yes or no)
            console.log( data.is_virtual );        // Is vistual (boolean)
            console.log( data.max_qty );           // Max quantity (int)
            console.log( data.min_qty );           // Min quantity (int)
            console.log( data.price_html );        // Formatted displayed price
            console.log( data.sku );               // The variation SKU
            console.log( data.variation_description ); // The variation description
            console.log( data.variation_is_active );   // Is variation active (boolean)
            console.log( data.variation_is_visible );  // Is variation visible (boolean)
            console.log( data.weight );            // The weight (float)
            console.log( data.weight_html );       // The formatted weight
        });
    })(jQuery);
    </script>
    <?php
}

add_action（'woocommerce_-before_-single_-variation'，
“单一变化前的行动”；
单变量之前的函数动作{
?>
（函数（$）{
$（'form.variations\u form'）。打开（'show\u variations'，函数（事件，数据）{
console.log（data.variation_id）；//变量id我成功地获得了我想要的工作。这就是


选择变体时调用页面重新加载
将变体ID值作为属性传递到URL中，我可以在使用$\u GET在单个页面上重新加载后处理该属性
保留所选选项

我在下面调用脚本：

add_action( 'woocommerce_before_add_to_cart_quantity', 'xenon_variation_modification' );

功能氙气变化修改（）{

global$产品；
如果（$product->is_类型（'variable'））{
全球$员额；
?>
jQuery（函数（$）{
setTimeout（函数（）{
$（“.single_variation_wrap”）。打开（“show_variation”，函数（事件，变量）{
//警报（变化。变化\u id）；
控制台日志（variation.variation\u id）；
var url=''；
//$（'input.variation_id'）.change（函数（）{
log（'您刚刚选择了variation#'+variation.variation_id）；
var属性=[]；
var allattributeset=true；
$（'table.variations select'）。每个（函数（）{
var值=$（this.val（）；
如果（值）{
属性推送({
id:$（this.attr（'name'），
价值：价值
});
}否则{
AllAttributeSet=false；
}
});
if（所有属性集）{
$.each（属性、函数（键、值）{
var attributeSlug=val.id.replace（'attribute_pa_'，''）；
url=url+'？variation_id='+variation.variation_id+'&'+attributeSlug+'='+val.value；
});
console.log（'relocationing#'+variation.variation_id）；
//window.location.replace（url）；
window.location.href=url；
}
} );
}, 400 );
});
谢谢。
blur
和
change
事件对我都不起作用，因为它们会在变体id更新之前触发。因此，至少在我的情况下，我得到的是以前的id。下面的答案（
on（“show_variation”，function（event，variation）
）不过对我来说很有用。@MoriWaan您有这种行为是因为您确实进行了一些其他自定义，这些自定义正在更改Woocommerce的默认行为。在上一个带有店面主题的Woocommerce版本上，我的代码工作得非常好，我从一段时间以来就将其用于我的客户端开发。请确保您可以使用来自t他想让这一切正常运作“模糊”事件自woocommerce版本2+开始对可变产品的产品属性选择字段起作用。这可能是因为太多可能的变化。它适用于只有少数可能性的产品，但对于其他产品，当woocommerce使用ajax加载详细信息时，它不起作用。@MoriWaan抱歉，这不是真的，我只是用一个产品t进行了测试hat有很多变体，它可以完美地与
blur
事件配合使用。
global $product;

if ( $product->is_type('variable') ) {

    global $post;
    ?>
    <script>
        jQuery(function($){
            setTimeout( function(){
                $( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
                    //alert( variation.variation_id );
                    console.log( variation.variation_id );


                    var url = '<?php echo get_permalink($post->ID);?>';
                    //$('input.variation_id').change( function(){


                    console.log('You just selected variation #' + variation.variation_id);
                    var attributes = [];
                    var allAttributesSet = true;
                    $('table.variations select').each(function() {
                        var value = $(this).val();
                        if (value) {
                            attributes.push({
                                id: $(this).attr('name'),
                                value: value
                            });
                        } else {
                            allAttributesSet = false;
                        }
                    });
                    if (allAttributesSet) {
                        $.each(attributes,function(key, val) {
                            var attributeSlug = val.id.replace('attribute_pa_','');
                            url = url +'?variation_id='+ variation.variation_id +'&'+attributeSlug+'=' + val.value;
                        });
                        console.log('Relocating #' + variation.variation_id);
                        //window.location.replace(url);
                        window.location.href = url;
                    }

                } );
            }, 400 );

        });
    </script>
    <?php
}