从 Woocommerce 可变产品中获取当前选择的变体和数据 [重复]

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

要在单变量产品页面上使用 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
}

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

Answer 2

我或许已经找到了答案： 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/

Answer 3

我设法按照我的意愿完成了这项工作。那是

• 选择变体时调用页面重新加载
• 将变体 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