WooCommerce：如何传递变体数据给函数以实时展示价格计算公式

我在这个问题上已经花费了几天时间，但我是JavaScript新手，一直没能解决。我需要为客户实现：在WooCommerce单产品页面上，当用户从下拉菜单选择不同产品变体或输入不同产品长度（数字字段）时，实时展示完整的价格计算公式。

为获取变体价格，我使用了以下代码：

$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
    var preis_variation = variation.display_regular_price;
    var gewicht_variation = variation.weight;
} );

我的问题是无法在后续的函数中访问这两个变量。我也尝试在开头设置全局变量，但上述代码无法更新这些变量。

以下是完整代码：

<script>
jQuery( function( $ ) {

    var preis_variation = 0;
    var gewicht_variation = 0;
    
    window.onload = function () {
                // 下拉菜单变更时触发grundkosten函数
        document.getElementById("pa_durchmesser").addEventListener('change', grundkosten);
                // 数字字段变更时触发grundkosten函数
        document.getElementById("wck_laenge").addEventListener('change', grundkosten);

               // 获取变体价格和重量
        $( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
            var preis_variation = variation.display_regular_price;
            var gewicht_variation = variation.weight;
        } );
        
                // 获取额外信息并在指定HTML结构中显示计算结果
        function grundkosten() {
            var uebertrag_laenge = document.getElementById("wck_laenge").value;
            document.getElementById("facon").innerHTML = preis_variation;
            document.getElementById("kosten_laenge").innerHTML = uebertrag_laenge;
            document.getElementById("total_grundkosten").innerHTML = uebertrag_laenge * 0.50;
            
            var uebertrag_goldpreis = document.getElementById("gold_preis_hidden").value;
            document.getElementById("goldpreis_laenge").innerHTML = uebertrag_laenge;
            document.getElementById("gewicht").innerHTML = gewicht_variation;
            document.getElementById("goldpreis_aktuell").innerHTML = uebertrag_goldpreis;
            document.getElementById("total_goldpreis").innerHTML = uebertrag_laenge * uebertrag_goldpreis;  
        }
    }
} );
</script>

我尝试将以下代码块移到grundkosten函数中，希望能访问变量，但没有变化，grundkosten函数仍然无法访问preis_variation和gewicht_variation：

$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
    var preis_variation = variation.display_regular_price;
    var gewicht_variation = variation.weight;
} );

核心问题是变量作用域：你在show_variation事件回调里用var声明了新的局部变量，覆盖了外层的全局变量，导致外层变量根本没被更新。

修改步骤：

1. 去掉事件回调里的var，直接赋值给外层已经声明的变量
2. 每次变体切换时，主动触发grundkosten函数，确保计算结果实时更新

修改后的完整代码：

<script>
jQuery( function( $ ) {

    var preis_variation = 0;
    var gewicht_variation = 0;
    
    // 获取变体价格和重量，直接更新外层变量
    $( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
        preis_variation = variation.display_regular_price;
        gewicht_variation = variation.weight;
        // 变体切换后立即触发计算
        grundkosten();
    } );

    // 获取额外信息并在指定HTML结构中显示计算结果
    function grundkosten() {
        var uebertrag_laenge = document.getElementById("wck_laenge").value;
        document.getElementById("facon").innerHTML = preis_variation;
        document.getElementById("kosten_laenge").innerHTML = uebertrag_laenge;
        document.getElementById("total_grundkosten").innerHTML = uebertrag_laenge * 0.50;
        
        var uebertrag_goldpreis = document.getElementById("gold_preis_hidden").value;
        document.getElementById("goldpreis_laenge").innerHTML = uebertrag_laenge;
        document.getElementById("gewicht").innerHTML = gewicht_variation;
        document.getElementById("goldpreis_aktuell").innerHTML = uebertrag_goldpreis;
        document.getElementById("total_goldpreis").innerHTML = uebertrag_laenge * uebertrag_goldpreis;  
    }

    // 页面加载完成后绑定事件
    $(window).on('load', function() {
        // 下拉菜单变更时触发计算
        document.getElementById("pa_durchmesser").addEventListener('change', grundkosten);
        // 数字字段变更时触发计算
        document.getElementById("wck_laenge").addEventListener('change', grundkosten);
    });
} );
</script>

关键说明：

• 移除show_variation回调里的var，这样赋值的是外层作用域的变量，而不是创建新的局部变量
• 在变体切换后调用grundkosten()，确保用户选完变体后立即更新计算公式展示
• 把事件绑定移到jQuery的load回调里，和WooCommerce的事件绑定逻辑更兼容

内容的提问来源于stack exchange，提问作者Samuel G