时间戳

首页 > 解决方案 > 加入购物车前如何计算产品总价？

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

问题描述

希望你做得很好。

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

例如：产品价格 = 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

查询：

 <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 被添加到原始 price 中。

我想做什么？

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

像这样 ：

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

标签： javascriptphpjquerylaravele-commerce

解决方案

您可以使用.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>

推荐阅读