如何在将产品添加到购物车之前计算产品的总价？

Question

祝你一切顺利。

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

例如：产品价格 = 25$，selected 属性颜色的值为 'red' 价格 = 5$，selected 宽度 = 16寸同价=7$

在产品详细信息页面中，客户必须 select 每个属性值才能将产品添加到购物车。

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

代码如下：

<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 脚本中，只有最后一个 selected 属性价格被添加到原始价格中。

我想做什么？

我想通过使用 jquery.

对该产品的每个相关属性执行 foreach 循环，将所有 selected 属性值价格加总到原始价格

像这样：

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

Answer 1

您可以使用 .each 循环遍历您的 .options select-框，然后使用 $(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>

如何在将产品添加到购物车之前计算产品的总价？

How to calculate product's total price before adding it to the shopping cart?

javascript

php

jquery

e-commerce

laravel