I’m trying to build a cart function for the existing Food ordering system.
There, the user can view the product price in
<div class="product__price m-t-5">
<span class="product__price product__price--large">[email protected](model => model.ProductPrice)</span>
</div>
section.
If the selected product is customizable, I show the extra items in the view with Checkbox.
So what I want to know is, if the customer selects any extra items, the extra item price should be added to the main price.
Also, if a customer is unchecked, then it should subtract from the main amount.
Want to know how to do this using Javascript?
This is the HTML code.
<div class="col-md-7">
<div class="product-details-box m-b-60">
<h4 class="font--regular m-b-20">@Html.DisplayFor(model => model.ProductName)</h4>
<div class="product__price m-t-5">
<span class="product__price product__price--large">[email protected](model => model.ProductPrice)</span>
</div>
<div class="product-var p-tb-30">
<div class="product-quantity product-var__item d-flex align-items-center">
<span class="product-var__text">Quantity: </span>
<form class="quantity-scale m-l-20">
<div class="value-button" id="decrease" onclick="decreaseValue()">-</div>
<input type="number" id="number" name="number" value="1" />
<div class="value-button" id="increase" onclick="increaseValue()">+</div>
</form>
</div>
<div>
<h4 class="font--regular m-b-20">Add Some Extra</h4>
@if (Model.CustomizableFoods.Count!=0)
{
foreach (var item in Model.CustomizableFoods)
{
<div class="row">
<ul class="list">
<li class="list__item">
<label class="label--checkbox">
<input type="checkbox" class="checkbox"> @item.ExtraItem - @item.Extra_Item_Price </label>
</li>
</ul>
</div>
}
}
</div>
<div class="product-var__item">
<input class="btn btn--long btn--radius-tiny btn--green btn--green-hover-black btn--uppercase btn--weight m-r-20" type="submit" value="Add to cart" />
<a href="wishlist.html" class="btn btn--round btn--round-size-small btn--green btn--green-hover-black">
<i class="fas fa-heart"></i>
</a>
</div>
<div class="product-var__item">
<span class="product-var__text">Guaranteed safe checkout </span>
</div>
<div class="product-var__item d-flex align-items-center">
<span class="product-var__text">Share: </span>
<ul class="product-social m-l-20">
<li>
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-pinterest-p"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
This is a sample of the view,
I did this,
In the view
@if (Model.CustomizableFoods.Count!=0)
{
foreach (var item in Model.CustomizableFoods)
{
<div class="row">
<ul class="list">
<li class="list__item">
<label class="label--checkbox">
<input type="checkbox" class="checkbox" onclick="thisChecked()" value="@item.Extra_Item_Price"> @item.ExtraItem - @item.Extra_Item_Price </label>
</li>
</ul>
</div>
}
}
```
in the script
```
< script >
function thisChecked() {
var sList = "";
$('input[type=checkbox]').each(function () {
sList += "(" + $(this).val() + "-" + (this.checked ? "checked" : "not checked") + ")";
});
alert(sList);
} <
/script>
```
as a result the alert shows
```
(100.00-checked)(450.00-not checked)
```
So any way of getting only the selected value to one variable and checked or not checked to another?
2
Answers
You can use data-attribute which will have the original amount of the product and using that you can add or subtract extra items inside
thisChecked
functionAlso, make sure the attribute value should be updated always when you call your
decreaseValue / increaseValue
functions .Demo Code :
Here is the solution of your question :
Warning : Make sure to update the price in backend for security reasons.