从 Woocommerce 变量产品中获取当前选择的变体和数据

Question

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

目的：用户更改表单后，Woocommerce 将input.variation_id使用新选择的变体的 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 文件中。测试和工作。