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

Question

Hope you're doing well.

I'm building an E-commerce website. Each product has several attributes and every attribute value has its own price that will be added to the original price.

For Example: product price = 25$, the selected attribute color has values of 'red' price= 5$, and selected width = 16 inch with price = 7$

In product details page, the customer has to select each attribute value before adding the product to the shopping cart.

I'm trying to calculate the total product price with selected attributes values prices.

Here's The Code:

<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>

Where's the problem?

The problem I have is in the jquery script, only the last selected attribute price is added to the original price.

What do I want to do?

I want to sum all the selected attributes values prices to the original price by doing foreach loop for each related attribute to this product using jquery.

Like this:

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

Answer 1

You can use .each loop to iterate through your .options select-box then use $(this).data("price") to get price value and add total to your productPrice span.Also, i have added data-original-price="{{ $product->price }}" just to retain original value when calculating else it will override original value.

Demo Code :

 $('.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>