WooCommerce 单品页面中基于尺寸的价格计算

Posted 2023-05-09

【中文标题】WooCommerce 单品页面中基于尺寸的价格计算

【英文标题】：Price calculation based on dimensions in WooCommerce single product page

【发布时间】：2019-08-03 21:35:52

【问题描述】：

根据 "Get selected variation price in jQuery on Woocommerce Variable products" 答案代码，在我的代码下面，我对 WooCommerce 可变产品的价格计算有疑问。

价格乘以 10 或 1000，具体取决于下拉菜单中选择的选项，这是不应该发生的，我不知道为什么会发生。

这是我的代码：

<script>
    jQuery(function($) 
        var jsonData = <?php echo json_encode($variations_data); ?>,
            inputVID = 'input.variation_id';

        $('input').change( function()
            if( '' != $(inputVID).val() ) 
                var vid      = $(inputVID).val(), // VARIATION ID
                    length   = $('#cfwc-title-field').val(), // LENGTH
                    diameter = $('#diameter').val(),  // DIAMETER
                    ene_enden = $('#id_dropdown_one_end').find('option:selected').attr("value_one_end"),
                    vprice   = ''; // Initilizing

                // Loop through variation IDs / Prices pairs
                $.each( jsonData, function( index, price ) 
                    if( index == $(inputVID).val() ) 
                        vprice = price; // The right variation price
                    
                );
                var rope_price = (length*vprice) + ene_enden;
                if (rope_price != 0)
                    $('.price').html(rope_price+',-');
                

                alert('variation Id: '+vid+' || Lengde: '+length+' || Diameter: '+diameter+' || Variantpris: '+vprice+ ' || Rope price: '+rope_price+' || ene_enden = '+ene_enden);

            
        );
    );
</script>

当为“I enden av tauet”选择的选项为“Ingenting”（其值为 0）时，由于某种原因，rope_price 会乘以 10 或与 0 连接。当我将选择的选项更改为任何其他选项时，rope_price 将乘以 1000 或与 00 连接。我不知道为什么会这样。 有什么想法吗？

【问题讨论】：

不确定是否需要在循环中设置 vprice 然后在循环外使用它...

【参考方案1】：

因为您正在连接字符串。 1 + 0 和 "1" + "0" 不一样，你可以在这里查看：

console.log("1 + 0 =", 1 + 0);
console.log('"1" + "0" =', "1" + "0");

当您从 HTML 对象中获取值时，您将其作为字符串接收。如果要将其用作数字，则必须先转换它。您可以使用Number 或parseFloat（甚至parseInt，但会删除小数）。

var oneNumber = 1;
var oneString = "1";
var oneConverted = Number(oneString);

console.log("typeof oneNumber:", typeof oneNumber);
console.log("typeof oneString:", typeof oneString);
console.log("typeof oneConverted:", typeof oneConverted);

console.log("oneNumber + oneNumber =", oneNumber + oneNumber);
console.log('oneString + oneString =', oneString + oneString);
console.log('oneConverted + oneConverted =', oneConverted + oneConverted);

您遇到的确切问题是您的ene_enden 变量是var rope_price = (length*vprice) + ene_enden; 行中的一个字符串。当您将两个字符串相乘时，它们会自动转换为一个数字（您的(length*vprice)），但是当您将该数字连接到另一个字符串时，它们会再次自动转换为一个字符串（您的+ ene_enden），因此您必须先转换ene_enden 转换为数字，最好将所有预期的数字变量转换为数字。

【讨论】：

效果很好！我只是这样转换它； var ene_enden_conv = 数字（ene_enden）；但是为什么 length = $('#cfwc-title-field').val(), 也没有变成字符串呢？是因为它从一个数字字段中获得了它的价值吗？

@Paudun 如果只是调用val() 而不进行转换是一个数字，那么可能本机返回一个数字，因为它是一个数字字段，或者jQuery 正在为您进行转换，因为它是一个数字字段。任何一种情况都是因为是一个像你说的 xD 的数字字段。 ene_enden 的问题在于您正在访问一个 HTML 属性，该属性始终是一个字符串。很高兴答案有效:-)