从Woocommerce可变产品中获取当前选择的变体和数据 [英] Get currently selected variation and data 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.

推荐答案

要在单个变量产品页面上使用jQuery获取选定的版本ID(以及一些版本数据)，请使用以下目标:

To get the selected variation ID (and some variation data too) using jQuery on single variable product pages, use the following that target :

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文件中.经过测试，可以正常工作.

Code goes in function.php file of your active child theme (or active theme). Tested and works.

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