Question

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

目标：用户更改了表单后，Woocommerce将使用新选择的变体ID更新隐藏字段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在执行我的操作之前已经更新了所有信息。

Answer 1

有关单个变量产品页面上Javascript / jQuery中的版本ID，请参见以下非常明确的示例，该示例可让您获取当前选择的版本：

<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

Answer 2

我设法按我的意愿进行了工作。那是

选择版本后要求重新加载页面
将变体ID值作为属性传递给URL，我可以在使用$ _GET重新加载到单个页面后对其进行处理
保留选定的选项

我在以下位置调用脚本

add_action( 'woocommerce_before_add_to_cart_quantity', 'xenon_variation_modification' );

函数xenon_variation_modification（）{

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
}

}

我在以下来源对此进行了研究：

Get currently selected variation id from Woocommerce variable product

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

https://wordpress.stackexchange.com/questions/280125/custom-url-for-each-product-variation-rewrite-rules

Answer 3

我可能已经找到答案： 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/

从Woocommerce变量产品中获取当前选择的版本ID

3 个答案: