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

Ajaxed Sliding Shopping Cart With jQuery DemoDownload

Sponsors Of E-Commerce Week:

SSLmatic - Cheap SSL Certificates

The HTML

For The Sliding Basket:

<div id="slidingTopWrap">
	<div id="slidingTopContent">
		<div id="basketWrap">
			<div id="basketTitleWrap">Your Basket</div>
			<div id="basketItemsWrap">
				<ul>
					<li>&nbsp;</li>
<!--?php getBasket(); ?-->				</ul>
			</div>
		</div>
	</div>
	<div id="slidingTopFooter">
		<div id="slidingTopFooterLeft"><img alt="Show Basket" src="images/arrow-down.png" /> <a href="no-js.htm" id="slidingTopTrigger" onclick="return false;">Show Basket</a></div>
	</div>
</div>

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

$("#basketItemsWrap li:first").hide();
$("#slidingTopContent").hide();

$("#slidingTopTrigger").live("click", function(event) {
	$("#slidingTopContent").slideToggle("slow", function(){
		if ($("#slidingTopContent").is(":visible")) {
			$("#slidingTopFooterLeft").html('<img src="images/arrow-up.png" alt="Hide Basket" /> <a href="no-js.htm" onclick="return false;" id="slidingTopTrigger">Hide Basket</a>');
		} else {
			$("#slidingTopFooterLeft").html('<img src="images/arrow-down.png" alt="Show Basket" /> <a href="no-js.htm" onclick="return false;" id="slidingTopTrigger">Show Basket</a>');
		}
	});
});

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

$(".productPriceWrapRight a img").click(function() {
	var productIDValSplitter 	= (this.id).split("_");
	var productIDVal 			= productIDValSplitter[1];

	if ($("#slidingTopContent").is(":visible")) {

		$("#notificationsLoader").html('<img src="images/loader.gif">');

		$.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('<img src="images/arrow-up.png" alt="Hide Basket" /> <a href="aaa.htm" onclick="return false;" id="slidingTopTrigger">Hide Basket</a>');
			$("#notificationsLoader").html('<img src="images/loader.gif">');

			$.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('<img src="images/arrow-down.png" alt="Show Basket" /> <a href="aaa.htm" onclick="return false;" id="slidingTopTrigger">Show Basket</a>');
				});

			});

		});
	}

});

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.

Answerbase E-Commerce
WebResourcesDepot Feed