Live Demo
Are you tired of adding one item at a time to the cart and the page will refresh doing the same thing until you've decided to checkout. Now I will show you how to add an item by letting the user drag the items into the box and let them decide how many quantity is added to cart without refreshing the page.
I did not provide PHP file here. I just gave the idea how the program works. All the added product are save to the session, it's up to you whether you put it in a database or in a session array
JAVASCRIPT
<script type="text/javascript" src="/js/jquery-ui-1.8.5.custom.min.js"></script>
<script>
$(document).ready(function(){
$(".items img").draggable({
revert: true,
});
$("#cart").droppable({
accept: '.items img',
drop: function( event, ui ) {
$('#update').show();
prod_id = ui.draggable.attr("id");
$.ajax({
type: "POST",
url: "/demo/updatecart",
data: "id=" + prod_id + "&act=insert",
cache: false,
success: function(html){
$('#update').hide();
$('#cart').html(html);
$("#cart img").draggable({revert: true}); // bind the cart list
}
});
}
});
$("#trash").droppable({
accept: '#cart img',
hoverClass: 'trashhover',
drop: function( event, ui ) {
prod_id = ui.draggable.attr("id");
ui.draggable.remove();
$.ajax({
type: "POST",
url: "/demo/updatecart",
data: "id=" + prod_id + "&act=delete",
cache: false,
success: function(html){
$('#cart').html(html);
$("#cart img").draggable();
}
});
}
});
});
</script>
<script>
$(document).ready(function(){
$(".items img").draggable({
revert: true,
});
$("#cart").droppable({
accept: '.items img',
drop: function( event, ui ) {
$('#update').show();
prod_id = ui.draggable.attr("id");
$.ajax({
type: "POST",
url: "/demo/updatecart",
data: "id=" + prod_id + "&act=insert",
cache: false,
success: function(html){
$('#update').hide();
$('#cart').html(html);
$("#cart img").draggable({revert: true}); // bind the cart list
}
});
}
});
$("#trash").droppable({
accept: '#cart img',
hoverClass: 'trashhover',
drop: function( event, ui ) {
prod_id = ui.draggable.attr("id");
ui.draggable.remove();
$.ajax({
type: "POST",
url: "/demo/updatecart",
data: "id=" + prod_id + "&act=delete",
cache: false,
success: function(html){
$('#cart').html(html);
$("#cart img").draggable();
}
});
}
});
});
</script>
CSS
<style>
#cartdiv
{
width:40%;float:left;margin-top:30px;
}
#update
{
float:left;
width:100%;
margin-top:10px;
text-indent:10px;
color:#BFC6D0;
font-size:12px;
display:none;
}
#cart
{
width:95%;float:left;height:250px;background-color:#E8DDCB;padding:10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#cart img
{
width:30px;
height:30px;
cursor: move;
}
#cart:hover
{
}
ul.items{
margin:0;
padding:0;
list-style-type:none;
width:100%;
float:left;
cursor: move;
}
ul.items li{ float:left;margin:0 10px; }
#trash
{
float:left;
margin-top:200px;
background: url(/uploads/jquerySamples/trash.png);
width:100px;
height:100px;
margin-left:20px;
}
.trashhover
{
background-color:pink;
border:solid 1px #BFC6D0;
}
</style>
#cartdiv
{
width:40%;float:left;margin-top:30px;
}
#update
{
float:left;
width:100%;
margin-top:10px;
text-indent:10px;
color:#BFC6D0;
font-size:12px;
display:none;
}
#cart
{
width:95%;float:left;height:250px;background-color:#E8DDCB;padding:10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#cart img
{
width:30px;
height:30px;
cursor: move;
}
#cart:hover
{
}
ul.items{
margin:0;
padding:0;
list-style-type:none;
width:100%;
float:left;
cursor: move;
}
ul.items li{ float:left;margin:0 10px; }
#trash
{
float:left;
margin-top:200px;
background: url(/uploads/jquerySamples/trash.png);
width:100px;
height:100px;
margin-left:20px;
}
.trashhover
{
background-color:pink;
border:solid 1px #BFC6D0;
}
</style>
HTML
<div class="sampleTitle">Drag and Drop Shopping Cart</div>
<ul class="items">
<!-- each product has corresponding product id, assume the id is the product id-->
<li><img src="/uploads/jquerySamples/product0.png" id="1"/></li>
<li><img src="/uploads/jquerySamples/product1.png" id="2"/></li>
<li><img src="/uploads/jquerySamples/product2.png" id="3"/></li>
<li><img src="/uploads/jquerySamples/product3.png" id="4"/></li>
</ul>
<div id="cartdiv">
<div id="cart">
You have no shopping cart yet.
</div>
<div id="update">
Updating <img src="/images/ajax-loader.gif" />
</div>
</div>
<div id="trash" >
</div>
<ul class="items">
<!-- each product has corresponding product id, assume the id is the product id-->
<li><img src="/uploads/jquerySamples/product0.png" id="1"/></li>
<li><img src="/uploads/jquerySamples/product1.png" id="2"/></li>
<li><img src="/uploads/jquerySamples/product2.png" id="3"/></li>
<li><img src="/uploads/jquerySamples/product3.png" id="4"/></li>
</ul>
<div id="cartdiv">
<div id="cart">
You have no shopping cart yet.
</div>
<div id="update">
Updating <img src="/images/ajax-loader.gif" />
</div>
</div>
<div id="trash" >
</div>