Shoping cart addition of item quantity with the help of jquery
Question
I have web page where different product can be added to the cart by the user and i am using a calculator for adding the quantity i am somehow successful to add the quantity of last selected item till 9 using the calculator buttons which i have upto 9 what about if user want the 10 quantity please help me out because i am stuck . here is fiddle demo
here is html.
<body>
<div class="container">
<div class="left">
<div class="left-top">
<ul class="add">
</ul>
<ul style="float:right">
<li id="total" data-value="0"></li>
</ul>
</div>
<div class="left-bottom">
<div class="box-left">
<div class="btnBG">
<span>Cash Journal-Test</span>
</div>
<div class="btnBG">
<span>Bank Journal-Test</span>
</div>
</div>
<div class="box-right">
<div class="box-right-left" id="box-right-left">
<div class="btnSM">
<span><button data-value="1">1</button></span>
</div>
<div class="btnSM">
<span><button data-value="2">2</button></span>
</div>
<div class="btnSM">
<span><button data-value="3">3</button></span>
</div>
<div class="btnSM">
<span><button data-value="4">4</button></span>
</div>
<div class="btnSM">
<span><button data-value="5">5</button></span>
</div>
<div class="btnSM">
<span><button data-value="6">6</button></span>
</div>
<div class="btnSM">
<span><button data-value="7">7</button></span>
</div>
<div class="btnSM">
<span><button data-value="8">8</button></span>
</div>
<div class="btnSM">
<span><button data-value="9">9</button></span>
</div>
<div class="btnSM">
<span>+/-</span>
</div>
<div class="btnSM">
<span>0</span>
</div>
<div class="btnSM">
<span>.</span>
</div>
</div>
<div class="box-right-right">
<div class="btnSM">
<span>Qty</span>
</div>
<div class="btnSM">
<span>Disc</span>
</div>
<div class="btnSM">
<span>Price</span>
</div>
<div class="btnSM">
<span>*</span>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="right-top1">
<a href="#"><img src="images/home_w.png" /></a>
<span class="search"><span class="img"></span><input type="search" name="search" placeholder="Search Products" /></span>
</div>
<div class="right-top">
<div class="box1">
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box1">
<img src="images/free.png" />
<h1>Food</h1>
</div>
<div class="box1">
<img src="images/fru.png" />
<h1>Fresh Fruits</h1>
</div>
<div class="box1">
<img src="images/veg.png" />
<h1>Fresh Vegetables</h1>
</div>
<div class="box1">
<img src="images/camera.png" />
<h1>Others</h1>
</div>
</div>
<div class="right-bottom">
<div class="box2">
<p data-value="800">pkr 800.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="800">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="700">pkr 700.0</p>
<img src="images/col.png" />
<h1>Beverges</h1>
</div>
<div class="box2">
<p data-value="800">pkr 800.0</p>
<img src="images/col.png" />
<h1>Beverg</h1>
</div>
</div>
</div>
</div>
here is javascript.
<script type="text/javascript">
$(document).ready(function() {
$('.box2').click(function(){
var price=$(this).find('p').html();
var product=$(this).find('h1').html();
price = price.replace("pkr ","") * 1;
var price1=parseInt(price)+ parseInt($("#total").attr('data-value'));
$("#total").attr('data-value', price1);
$("#total").html('$'+price1);
if(product)
{
if($(".add li:first").html()== undefined)
{
//$('<li><input type="checkbox" name="selectedItem" /></li>').prependTo('.add');
$('<li>', {html: price}).prependTo('.add');
$('<li>', {html: product}).prependTo('.add');
}
else
{
$('<li>', {html: product}).appendTo('.add');
$('<li>', {html: price}).appendTo('.add');
}
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#box-right-left").find(".btnSM").on('click', function(e)
{
e.preventDefault();
var price1=$(".add").find('li:last').html();
price1 = price1.replace("pkr ","") * 1;
alert(price1);
var price=parseInt(price1)* parseInt($(this).find('button').attr('data-value'));
$(".add li:last").html(price);
var total=parseInt($("#total").attr('data-value'))+ parseInt(price)-parseInt(price1);
$("#total").attr('data-value', total);
$("#total").html('$'+total);
//alert(total);
});
});
</script>
1 answers
solution1
1 ACCPTED 2014-03-27 10:17:33
You will have to show button of 10 after 9 because if you wait for the user to click on a 0 after 1 the it will be slow down process and User will not able to process the order now
User will get annoyed oh!!!! how can i proceed now so this will be a not good approach if your requirement is more then 9,10 etc
One solution i can recommend for you is
Or another approach to solve this is to just add drop down after 9 so user can click the drop down
on more approach to this is why you are giving him add + your qty - or give text box to user when he can add the qty
Updated >>>>>>>>>>
Give one textbox here and one button here if 1 2 3 4 5 6 7 8 9 0
If user click one 1 the one will be there in textbox if user press 0 then it will be 10 there so when user click on button at right 10 will be added to cart
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.