希望你一切顺利。
我正在建立一个电子商务网站。 每个产品都有多个属性,每个属性值都有自己的价格,将添加到原始价格中。
例如:产品价格 = 25$,所选属性颜色的值为 'red' price=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;
答案 0 :(得分: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>