从 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/or any specific available variation data too) using jQuery on single variable product pages, use the following:

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屋！