Ajaxed Sliding Shopping Cart With jQuery

24°

With this 5th & last post of the "WRD E-Commerce Week" we will be modifying "our Ajaxed shopping cart" to create a one which is very ideal for designs with limited spaces.

The shopping cart will:

  • be hidden at the top of the page that can be displayed with a show/hide link
  • open when an item is added to the basket & auto-close
  • require a manual "hide" click if opened manually
  • enable us to delete products

Ajaxed Sliding Shopping Cart

Download

The HTML

For The Sliding Basket:

[sourcecode language=”php”]

Your Basket
  •  

[/sourcecode]

The Highlights

  • the div slidingTopWrap is positioned absolutely with top: 0 CSS value to stick to the top of the page
  • the div slidingTopContent is hided via JavaScript when the page loads & it is actually the part which slides
  • the div basketWrap, nothing unusual, wraps the contents of the basket

The JavaScript (jQuery)

Manual Show/Hide Part

[sourcecode language=”javascript”]
$(“#basketItemsWrap li:first”).hide();
$(“#slidingTopContent”).hide();

$(“#slidingTopTrigger”).live(“click”, function(event) {
$(“#slidingTopContent”).slideToggle(“slow”, function(){
if ($(“#slidingTopContent”).is(“:visible”)) {
$(“#slidingTopFooterLeft”).html(‘Hide Basket Hide Basket‘);
} else {
$(“#slidingTopFooterLeft”).html(‘Show Basket Show Basket‘);
}
});
});

[/sourcecode]

The Highlights:

  • we have $("#slidingTopContent").hide(); in the beginning to hide the div in the initial load
  • when the #slidingTopTrigger is clicked, we use the slideToggle function to show/hide the #slidingTopContent. To understand whether it is open or not, we have an if then else clause as if ($("#slidingTopContent").is(":visible")) {
    • if the #slidingTopContent is visible, we insert the "hide HTML"
    • if the #slidingTopContent is not visible, we insert the "show HTML"
  • you'll see that we used the $("#slidingTopTrigger").live("click", function(event) { rather than a standard click function. The reason is adding the new created HTMLs to the DOM

Adding Products

[sourcecode language=”javascript”]
$(“.productPriceWrapRight a img”).click(function() {
var productIDValSplitter = (this.id).split(“_”);
var productIDVal = productIDValSplitter[1];

if ($(“#slidingTopContent”).is(“:visible”)) {

$(“#notificationsLoader”).html(‘‘);

$.ajax({
type: “POST”,
url: “inc/functions.php”,
data: { productID: productIDVal, action: “addToBasket”},
success: function(theResponse) {

if( $(“#productID_” + productIDVal).length > 0){
$(“#productID_” + productIDVal).animate({ opacity: 0 }, 500);
$(“#productID_” + productIDVal).before(theResponse).remove();
$(“#productID_” + productIDVal).animate({ opacity: 0 }, 500);
$(“#productID_” + productIDVal).animate({ opacity: 1 }, 500);
$(“#notificationsLoader”).empty();

} else {
$(“#basketItemsWrap li:first”).before(theResponse);
$(“#basketItemsWrap li:first”).hide();
$(“#basketItemsWrap li:first”).show(“slow”);
$(“#notificationsLoader”).empty();
}

}
});

} else {

$(“#slidingTopContent”).slideToggle(“slow”, function(){

$(“#slidingTopFooterLeft”).html(‘Hide Basket Hide Basket‘);
$(“#notificationsLoader”).html(‘‘);

$.ajax({
type: “POST”,
url: “inc/functions.php”,
data: { productID: productIDVal, action: “addToBasket”},
success: function(theResponse) {

if( $(“#productID_” + productIDVal).length > 0){
$(“#productID_” + productIDVal).animate({ opacity: 0 }, 500);
$(“#productID_” + productIDVal).before(theResponse).remove();
$(“#productID_” + productIDVal).animate({ opacity: 0 }, 500);
$(“#productID_” + productIDVal).animate({ opacity: 1 }, 500);
$(“#notificationsLoader”).empty();

} else {
$(“#basketItemsWrap li:first”).before(theResponse);
$(“#basketItemsWrap li:first”).hide();
$(“#basketItemsWrap li:first”).show(“slow”);
$(“#notificationsLoader”).empty();
}

}
});

$(“#slidingTopTrigger”).fadeTo(4000, 1, function(){
$(“#slidingTopContent”).slideToggle(“slow”, function(){
$(“#slidingTopFooterLeft”).html(‘Show Basket Show Basket‘);
});

});

});
}

});

[/sourcecode]

The Highlights:

As "how-to" on sending the Ajax query & fading animations are described in the previous post, we won't repeating the same info here & focus on the effects.

  • we again run the same if-then-else clause
    • if the #slidingTopContent is open send an Ajax query to functions.php and add-the-products to basket
    • if the #slidingTopContent is closed:
      • slideToggle the div
      • insert the "hide HTML" to #slidingTopFooterLeft"
      • send an Ajax query to functions.php and add-the-products to basket
      • wait for x seconds: $("#slidingTopTrigger").fadeTo(4000, 1, function(){
      • slideToggle the div
      • insert the "show HTML" to #slidingTopFooterLeft"

P.S. To make the example work on your side, you should be creating a new database with the jBasket.sql file inside the download package & configure the database connection information inside “inc/db.php” file.

Search