» » » » » » Useful jQuery Plugins Of 2013 - Shopping Cart - jQuery Plugins - Plugins ,Extensions & Tutorials for jQuery

 2  Useful jQuery Plugins Of 2013  -  Shopping Cart     -  jQuery Plugins - Plugins ,Extensions & Tutorials for jQuery
There are a lot tutorial about creating drag and drop shopping cart, in this post I want to share my version still with JQuery, but the different is this example only shows the code on the client side, which mean all of data are hardcoded on the html, and counting price and total items will be handle by javascript.
    The Html
    Default Item List
    Like I said there is no server side scripting, so this code just a hardcoded item list, this example use 10 items, but the code below shows only two to make it simple.
    01<div id="item_container">
    02      <div class="item" id="i1">
    03          <img src="img/1.jpg"/>
    04          <label class="title">T-Shirt 1</label>
    05          <label class="price">$ 20</label>
    06      </div>
    07      <div class="item" id="i2">
    08          <img src="img/2.jpg"/>
    09          <label class="title">T-Shirt 2</label>
    10          <label class="price">$ 24</label>
    11      </div>
    12      <div class="clear"></div>
    13  </div>

    Shopping Cart
    In shopping cart element, there are element for dropped item area, this area will be draggable so all the items can be shown and there also a navigate for clearing cart, total items and total price.

    01<div id="cart_container">
    02  <div id="cart_title">
    03      <span>Shopping Cart</span>
    04      <div class="clear"></div>
    05  </div>
    06  <div id="cart_toolbar">
    07      <div id="cart_items" class="back"></div>
    08  </div>
    09  <div id="navigate">
    10      <div id="nav_left">
    11          <a href="" id="btn_prev"><</a>
    12          <a href="" id="btn_next">></a>
    13          <a href="" id="btn_clear">Clear Cart</a>
    14      </div>
    15      <div id="nav_right">
    16          <span class="sptext">
    17              <label>Items </label><label class="count" id="citem">0</label>
    18          </span>
    19          <span class="sptext">
    20              <label>Price </label><label class="count" id="cprice">$ 0</label>
    21          </span>
    22      </div>
    23      <div class="clear"></div>
    24  </div>
    25</div>
    The JQuery
    Intializing The Cart
    This initializing code for setting up the draggable item on item list, draggable shopping cart and the
     action after an item dropped on the cart like updating total item, total price and setting up remove link in each item.

    01var total_items = 0;
    02var total_price = 0;
    03$(document).ready(function() {
    04
    05    $(".item").draggable({
    06        revert: true
    07    });
    08    $("#cart_items").draggable({
    09        axis: "x"
    10    });
    11
    12    $("#cart_items").droppable({
    13        accept: ".item",
    14        activeClass: "drop-active",
    15        hoverClass: "drop-hover",
    16        drop: function(event, ui) {
    17            var item = ui.draggable.html();
    18            var itemid = ui.draggable.attr("id");
    19            var html = '<div class="item icart">';
    20            html = html + '<div class="divrm">';
    21            html = html + '<a onclick="remove(this)" class="remove '+itemid+'">&times;</a>';
    22            html = html + '<div/>'+item+'</div>';
    23            $("#cart_items").append(html);
    24
    25            // update total items
    26            total_items++;
    27            $("#citem").html(total_items);
    28
    29            // update total price
    30            var price = parseInt(ui.draggable.find(".price").html().replace("$ """));
    31            total_price = total_price + price;
    32            $("#cprice").html("$ " + total_price);
    33
    34            // expand cart items
    35            if (total_items > 4) {
    36                $("#cart_items").animate({width: "+=120"}, 'slow');
    37            }
    38        }
    39    });
    40});
    Removing An Item
    When removing an item the total price and total items are updated and of course the item removed from the cart.

    01function remove(el) {
    02    $(el).hide();
    03    $(el).parent().parent().effect("highlight", {color: "#ff0000"}, 1000);
    04    $(el).parent().parent().fadeOut('1000');
    05    setTimeout(function() {
    06        $(el).parent().parent().remove();
    07        // collapse cart items
    08        if (total_items > 3) {
    09            $("#cart_items").animate({width: "-=120"}, 'slow');
    10        }
    11    }, 1100);
    12
    13    // update total item
    14    total_items--;
    15    $("#citem").html(total_items);
    16
    17    // update totl price
    18    var price = parseInt($(el).parent().parent().find(".price").html().replace("$ """));
    19    total_price = total_price - price;
    20    $("#cprice").html("$ " + total_price);
    21}


    Navigate Cart
    Dragging the cart is not the only way to navigate through all the cart, so I adding
     the two links to seeing all items on the cart, these links just manipulating the left CSS property.

    01$("#btn_next").click(function() {
    02    $("#cart_items").animate({left: "-=100"}, 100);
    03    return false;
    04});
    05$("#btn_prev").click(function() {
    06    $("#cart_items").animate({left: "+=100"}, 100);
    07    return false;
    08});
    09$("#btn_clear").click(function() {
    10    $("#cart_items").fadeOut("2000"function() {
    11       $(this).html("").fadeIn("fast").css({left: 0});
    12    });
    13    $("#citem").html("0");
    14    $("#cprice").html("$ 0");
    15    total_items = 0;
    16    total_price = 0;
    17    return false;
    18});





    About bihax bihaxe

    Hi there! I am Hung Duy and I am a true enthusiast in the areas of SEO and web design. In my personal life I spend time on photography, mountain climbing, snorkeling and dirt bike riding.
    «
    Next
    Newer Post
    »
    Previous
    Older Post

    1 comment:

    lulur bali said...

    salam kenal bos. lagi jalan jalan pagi nih