Sharing...: Drag ‘n’ Drop Shopping Cart With jQuery UI (Tutorial)

Drag ‘n’ Drop Shopping Cart With jQuery UI (Tutorial):

Drag ‘n’ dropping items has its various popular uses and shopping carts are definitely one of them.
In this tutorial, we’ll be creating a simple shopping cart that works with drag ‘n’ drops.
It will have support for add-to-basket with quantity updates (so that the same items could be added more than once) and removing items from the basket. It will be totally client-side and cover the basic functionality (no PayPal integration, etc.).
For that, we’ll be using, probably the best drag-drop library, jQuery UI Draggable/Droppable in this tutorial. Here is the end result:

Let’s get started:

Step 1 -> Get the custom jQuery UI package

jQuery UI has lots of features and every feature adds bytes to its source, it is much more smarter to get only what we need.
As you can see from the screenshot above, we need the Core, Widget, Mouse from the core and Draggable + Droppable from the interactions.

This will end up in a 37kb JavaScript file which is not so bad for the features and compatibility offered.

Step 2 -> Insert the JS files into the web page

Let’s make sure we have the jQuery and jQuery UI inserted in the web page. Just add these lines inside the <head></head> tags.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery-ui-1.9.0.custom.min.js"></script>

Step 3 -> The HTML for the products

Let’s use a simple unordered list structure for featuring the products:


<section id="product">
    <ul class="clear">
        <li data-id="1">
            <a href="#">
                <img src="http://lorempixel.com/150/100/technics/1/" alt="">
                <h3>Product name</h3>
                <p>Product detail</p>
            </a>
        </li>
        <li data-id="2">...</li>
        <li data-id="3">...</li>
    </ul>
</section>

Step 4 -> The HTML for the basket

And a basic structure for the basket:


<aside id="sidebar">
    <div class="basket">
        <div class="basket_list">
            <div class="head">
                <span class="name">Product name</span>
                <span class="count">Quantity</span>
            </div>
            <ul>
            </ul>
        </div>
    </div>
</aside>

Step 5 -> Let’s start dragging

As you already know we’ll be using the jQuery UI Draggable and Droppable:


// jQuery UI Draggable
$("#product li").draggable({

    // brings the item back to its place when dragging is over
    revert:true,

    // once the dragging starts, we decrease the opactiy of other items
    // Appending a class as we do that with CSS
    drag:function () {
        $(this).addClass("active");
        $(this).closest("#product").addClass("active");
    },

    // removing the CSS classes once dragging is over.
    stop:function () {
        $(this).removeClass("active").closest("#product").removeClass("active");
    }
});

Step 6 -> And, time for dropping

The item will be dropped elegantly, thanks to the jQuery UI Droppable:


// jQuery UI Droppable
$(".basket").droppable({

    // The class that will be appended to the to-be-dropped-element (basket)
    activeClass:"active",

    // The class that will be appended once we are hovering the to-be-dropped-element (basket)
    hoverClass:"hover",

    // The acceptance of the item once it touches the to-be-dropped-element basket
    // For different values http://api.jqueryui.com/droppable/#option-tolerance
    tolerance:"touch",
    drop:function (event, ui) {

        var basket = $(this),
                move = ui.draggable,
                itemId = basket.find("ul li[data-id='" + move.attr("data-id") + "']");

        // To increase the value by +1 if the same item is already in the basket
        if (itemId.html() != null) {
            itemId.find("input").val(parseInt(itemId.find("input").val()) + 1);
        }
        else {
            // Add the dragged item to the basket
            addBasket(basket, move);

            // Updating the quantity by +1" rather than adding it to the basket
            move.find("input").val(parseInt(move.find("input").val()) + 1);
        }
    }
});

Step 7 -> Adding the dropped item to the basket

We are no wadding the item to the basket with any details it has:


function addBasket(basket, move) {
    basket.find("ul").append('<li data-id="' + move.attr("data-id") + '">'
            + '<span class="name">' + move.find("h3").html() + '</span>'
            + '<input class="count" value="1" type="text">'
            + '<button class="delete">✕</button>');
}

Step 8 -> Deleting an item for the basket

A simple way to remove items from the basket:


$(".basket ul li button.delete").live("click", function () {
    $(this).closest("li").remove();
});

And, it is that easy. Hope this tutorial helps you creating your own shopping cart.

Developer: Adem İlter

Adem İlter is a UI developer and also the creator of the liffect.

Sharing...

vendredi 16 novembre 2012

Drag ‘n’ Drop Shopping Cart With jQuery UI (Tutorial)