JQuery CART Bootstrap Responsive Basket Dropdown

JQuery CART Bootstrap Responsive Basket Dropdown

by bizamajig

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.js"></script>
<script src="http://www.dermamor.com/dev/js/simpleCart.js"></script>
<div class="container">
   <span class="simpleCart_quantity glyphicon glyphicon-shopping-cart"></span> items - <span class="simpleCart_total"></span>
    
    <nav class="navbar navbar-default " role="navigation">
	<div class="container">
	  <!-- Brand and toggle get grouped for better mobile display -->
	  <div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".derma">
		  <span class="sr-only">Toggle navigation</span>
		  <span class="icon-bar"></span>
		  <span class="icon-bar"></span>
		  <span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">brand</a>
      
	  </div>


	  <div class="collapse navbar-collapse derma">
		<ul class="nav navbar-nav">
		  <!-- place dynamic links here -->
      
		  <li class="dropdown menu-large">
			<a href="#" class="dropdown-toggle" id="dLabel" data-toggle="dropdown"><span class="glyphicon glyphicon-shopping-cart"></span> Basket <b class="caret"></b></a>
			<ul class="dropdown-menu megamenu">
			      <div class="col-sm-12 clearfix">
                              <div class="simpleCart_items"></div>
                      <ul id="cart" class='clearfix'></ul><li class="divider"></li>
                        	<div class="btn-group pull-right">
				<a href="#" class="simpleCart_empty btn btn-lg btn-danger">Clear Cart</a>
				<a href="#" class="simpleCart_checkout btn btn-lg btn-success">Checkout Now</a>
				</div>
                    </div>
			</ul>
		  </li>
		</ul>
		 <ul class="nav navbar-nav navbar-right">
             <a class="btn btn-success btn-sm navbar-btn" style="margin-left:10px;" href="#">Sign in</a>
				<a class="btn btn-danger btn-sm navbar-btn" href="#">Sign up</a>
				<div class="btn-group...

CSS

#existingDiv {

    padding: 10px;
}

.simpleCart_items table{width:100%}
.test{color:brown;border-left:10px solid #ccc;margin-bottom:2px}

.simpleCart_items {background-color: #ffffff;}
.itemRow .item-remove a{
	color:#ddd;
}
.simpleCart_shelfItem .item_Quantity {width:50px}

.headerRow{background-color:#c5c4be;color:#ffffff;padding:3px}
.simpleCart_quantity, .simpleCart_total{
	font-size:25px;
	color:#000;
}
.headerRow .item-name,
.headerRow .item-price,
.itemRow .item-name,
.itemRow .item-price,
.itemRow .item-remove,
.headerRow .item-quantity,
.itemRow .item-quantity
{
	

	font-size:18px;
	padding:10px;
	color:#222222;
} 
.menu-large {
  position: static !important;
}
.megamenu{
  padding: 20px 0px;
  width:100%;
}
.megamenu> li > ul {
  padding: 0;
  margin: 0;
}
.megamenu> li > ul > li {
  list-style: none;
}
.megamenu> li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
  color: #999999;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}
.megamenu.dropdown-header {
  color: #428bca;
  font-size: 18px;
}
@media (max-width: 768px) {
  .megamenu{
    margin-left: 0 ;
    margin-right: 0 ;
  }
  .megamenu> li {
    margin-bottom: 30px;
  }
  .megamenu> li:last-child {
    margin-bottom: 0;
  }
  .megamenu.dropdown-header {
    padding: 3px 15px !important;

  }
  .navbar-nav .open .dropdown-menu .dropdown-header{
	color:#fff;
  }
}

JavaScript

simpleCart({
  checkout: {
    type: "PayPal" ,
    email: "[email protected]",
      currency: "GBP" // set the currency to pounds sterling
  },
  cartStyle: 'table',
                        cartColumns: [{
                            attr: "name",
                            label: "Name"
                        }, 
                        {
                            attr: "price",
                            label: "Price",
                            view: 'currency'
                        }, 
                        { 	attr: "quantity" ,
                        	label: "Quantity" } ,
                        {
                            view: "remove",
                            text: "Remove",
                            label: false
                        }]
  });

$(".btn").on('click', function(){
  
  checkCart()

});
// simpleCart.grandTotal()
//simpleCart.total();

function checkCart(){
  var sum = simpleCart.quantity();
  $("#dLabel").html('<span class="glyphicon glyphicon-shopping-cart"></span> Cart '+ sum +' items <span class="caret"></span>')

    if (simpleCart.items().length == 0) {
     $("#dLabel").html('<span class="glyphicon glyphicon-shopping-cart"></span> Cart Empty<span class="caret"></span>');

    }else{
        $("#dLabel").html('<span class="glyphicon glyphicon-shopping-cart"></span> Cart '+ sum +' items <span class="caret"></span>')
    }
    
  
}