我如何使用 Javascript 在我的页面上收集价格以添加到总计中？

Question

我有一个产品页面，最近为其制作了一个产品附加工具。我正在修改代码以稍微改变它的格式。有一个“添加到购物车”按钮栏，在添加到购物车之前显示总价。

我使用 .innerHTML 来匹配页面顶部的价格以保持一致性，但我试图在选择后包含产品插件的价格。

底栏的当前代码：

  var selector1 = ".top-bar";
  var el1 = document.querySelector(selector1);
  var selector2 = ".bottom-bar";
  var el2 = document.querySelector(selector2);
  var totalPriceSelected = '';
  
  function getPrice() {
     
     el2.innerHTML = el1.innerHTML;
  };
  

  document.addEventListener('variant:priceChange', ()=>{
     getPrice();

  });

插件工具是一个vue应用，我对它有点陌生。我设法达到了这样的程度，即我可以让插件在选择后将价格打印到控制台：

watch: {
      selected: function(new_value) {
            
        
          setTimeout(function(){    
            var priceSelected = document.querySelectorAll(".price_selected");
            var strippedPriceSelected = priceSelected;
            for(var i=0;i<strippedPriceSelected.length;i++){
            var totalPriceSelected = priceSelected[i].innerHTML;
            console.log(totalPriceSelected);
            }
          }, 10);
        
        this.product.selected = new_value;
        //this.$emit('selected', this.product, new_value);
        
      }

目前，一旦选择附加产品，vue就会在选择价格元素后添加“.price_selected”的class。上面的代码查找“.price_selected”，将其保存到变量 totalPriceSelected，然后将其打印到控制台。

我想知道如何将所有插件价格值（一旦选择）添加到添加到购物车栏中的总价。我想我必须将所有价格转换为数字而不是字符串并将它们相加，但我不太确定该怎么做。

Product page for reference

更新

watch: {
      selected: function(new_value) {

          setTimeout(function(){
            var priceTotal = 0
            var priceSelected = document.querySelectorAll(".price_selected");
            var strippedPriceSelected = priceSelected;
            for(var i = 0; i < strippedPriceSelected.length; i++){
              var totalPriceSelected = priceSelected[i].innerHTML; // '+$ 85.00'
              var priceNumber = parseFloat(totalPriceSelected.split(' ')[1]);
                priceTotal += priceNumber;
                
            }
            var currentBottomPrice = parseFloat(el2.innerHTML);
            el2.innerHTML = currentBottomPrice += parseFloat(priceTotal);
            console.log(priceTotal);
          }, 10);

        this.product.selected = new_value;
        //this.$emit('selected', this.product, new_value);
        
      }
      
    },

所以我现在有了这个，它正确地添加了它们，但是当 priceTotal 的值返回到 0（取消选择附加组件）时，总数保持不变，因为它添加了值并且它是 tr

Answer 1

是的，因此您可以在 space 上将价格字符串分成两部分，然后将第二部分解析为浮点数（十进制数）。现在你可以做任何你需要的数学运算了。

setTimeout(function() {    
  var priceSelected = document.querySelectorAll(".price_selected");
  var strippedPriceSelected = priceSelected;
  for(var i = 0; i < strippedPriceSelected.length; i++){
    var totalPriceSelected = priceSelected[i].innerHTML; // '+$ 85.00'
    var priceNumber = parseFloat(totalPriceSelected.split(' ')[1]);
    console.log(priceNumber) // Prints 85 as number
  }
}, 10);

如果您有任何问题或它不起作用，请告诉我，我们很乐意提供帮助！

Answer 2

我们不应该只寻求一段可以解决小问题的工作代码，但稍后可能会导致主要功能中断。我发现这里使用的方法存在潜在缺陷：

a) 如果字符串包含无效字符，则从字符串转换为数字（使用 Number/parseFloat）可能会出现问题。例如，如果来自 add-on 的价格显示为“+$85.00”（注意 $ 符号后缺少的 space），totalPriceSelected.split(' ')[1] 将 return 未定义。将 undefined 添加到数字将得到 NaN。或者，如果 add-on 开始显示价格为“85.00 $”怎么办。上面使用的方法会再次失败。

b) 如果 vue 组件将价格的 CSS class 更新为其他内容，比如 amount_selected 怎么办？这样的更改将超出您的控制范围，但会直接影响您为显示总价而实施的 code/logic。不用说，在处理来自用户的showing/requesting价格时，我们应该格外小心。

可能会有更多这样的案例，我们应该寻找更稳健的解决方案。

我如何使用 Javascript 在我的页面上收集价格以添加到总计中？

How can I use Javascript to gather prices on my page to add to total?

html

javascript

vue.js