加入购物车前如何计算产品总价？

Question

希望你一切顺利。

我正在建立一个电子商务网站。 每个产品都有几个属性，每个属性值都有自己的价格，将添加到原始价格中。

例如：产品价格 = 25 美元，所选属性颜色的值为“红色”价格 = 5 美元，所选宽度 = 16 英寸，价格 = 7 美元

在产品详情页面，客户必须选择每个属性值，然后才能将产品添加到购物车。

我正在尝试使用选定的属性值价格计算产品总价格。

这是代码：

<var class="price h3 text-success">
    <span class="currency">{{ config('settings.currency_symbol') }}</span>
<span class="num" id="productPrice">{{ $product->price }}</span>
</var>

@foreach($attributes as $attribute)

    <dt>{{$attribute->name }}: </dt>
    <dd>
        <select class="form-control form-control-sm option" style="width:180px;" name="{{ strtolower($attribute->name) }}">
            <option data-price="0" value="0"> select {{ $attribute->name }}</option>
            @foreach($attributeValues as $attributeValue)
                @if ($attributeValue->attribute_id == $attribute->id)
                    <option
                        data-price="{{ $attributeValue->price }}"
                        value="{{ $attributeValue->value }}"> {{ ucwords($attributeValue->value . ' +'. $attributeValue->price) }}
                    </option>
                @endif
            @endforeach
        </select>
    </dd>

@endforeach

jquery：

 <script>
        $(document).ready(function () {
            $('#addToCart').submit(function (e) {
                if ($('.option').val() == 0) {
                    e.preventDefault();
                    alert('Please select an option');
                }
            });
            $('.option').change(function () {
                $('#productPrice').html("{{ $product->sale_price != '' ? $product->sale_price : $product->price }}");
                let extraPrice = $(this).find(':selected').data('price');
                let price = parseFloat($('#productPrice').html());
                let finalPrice = (Number(extraPrice) + price).toFixed(2);
                $('#finalPrice').val(finalPrice);
                $('#productPrice').html(finalPrice);
            });
        });
    </script>

问题出在哪里？

我遇到的问题是在 jquery 脚本中，只有最后选择的属性 price 被添加到原始价格中。

我想做什么？

我想通过使用 jquery 对该产品的每个相关属性执行 foreach 循环，将所有选定的属性值价格与原始价格相加。

像这样：

original_price = 25$;
red_color = 5$;
screen_size = 7$;
total_price = original_price + red_color + screen_size;

Answer 1

您可以使用.each 循环遍历您的.options 选择框，然后使用$(this).data("price") 获取价格值并将总计添加到您的productPrice 跨度。另外，我添加了data-original-price="{{ $product->price }}" 只是为了保留计算时的原始值，否则它将覆盖原始值。

演示代码：

$('.option').change(function() {
  var original_price = parseFloat($('#productPrice').data('original-price'));
  var values = 0
  var price_of_attr = 0
  //loop through all selected options..
  $('.option :selected').each(function() {
    price_of_attr += parseInt($(this).data("price")) //get data price
    //still confuse..you need value as well ? if yes use
    //values +=$(this).val() 
  })
  var finalPrice = original_price + price_of_attr //you can add + values..here in total
  $('#finalPrice').val(finalPrice);
  $('#productPrice').html(finalPrice);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>


<dt>Abc: </dt>
<dd>
  <select class="form-control form-control-sm option" style="width:180px;" name="{{ strtolower($attribute->name) }}">
    <option data-price="0" value="0"> select Abc</option>

    <option data-price="12" value="1"> Abc -1
    </option>
    <option data-price="11" value="2"> Abc -2
    </option>

  </select>
</dd>
<dt>Abc2: </dt>
<dd>
  <select class="form-control form-control-sm option" style="width:180px;" name="{{ strtolower($attribute->name) }}">
    <option data-price="0" value="0"> select Abc2</option>

    <option data-price="12" value="12"> Abc2 -12
    </option>
    <option data-price="11" value="22"> Abc2 -22
    </option>

  </select>
</dd>

<span class="currency">$</span>
<!--aded here --data-original-price="{{ $product->price }}"-->
<span class="num" id="productPrice" data-original-price="123">123</span>