Add To Cart jquery

In this example below you will see how to do a Add To Cart jquery with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -J0hn-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -J0hn- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Add To Cart jquery</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav>
  <button class="fa fa-shopping-cart cart-btn"></button>
  <ul id="cart-items"></ul>
</nav>

<div id="item" data-price="185">
  <h3>air jordan XXXI</h3>
  <div id="img">
    <img src="http://www.arch-usa.com/wp-content/uploads/2016/09/845037-001-PHSRH000-2000_1024x1024.png">
  </div>
  <div class="amount">
  <a href="#" class="fa fa-minus"></a>
  <span><span id="total"></span> Qty.</span>
  <a href="#" class="fa fa-plus"></a>
</div>
  
  <button class="add-to-cart-btn"> add to cart</button>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-J0hn-/add-to-cart-jquery-JEyQWe */
*,*:before,*:after{
  box-sizing:border-box;
}
body{
  margin:0;
  padding:0;
  font-family:sans-serif;
  background:radial-gradient(rgb(200,0,0),black) no-repeat;
  height:100vh;
}
button:focus{
  outline:0;
}


/*********
  NAV
*********/
nav{
  display:flex;
  justify-content:flex-end;
  background:black;
  padding:.50em 1em;
  margin:0;
  position:relative;
}
nav .cart-btn{
  background:rgb(200,0,0);
  color:white;
  border:solid 2px transparent;
  padding:.50em;
  display:block;
  cursor:pointer;
}
nav .cart-btn:hover{
  color:rgb(200,0,0);
  background:white;
}
 #cart-items{
  position:absolute;
   top:100%;
   width:300px;
   background:white;
   margin:0;
   z-index: 1;
   display:none;
}
#cart-items.open{
  display:block;
}
#cart-items img{
  width:50px;
  height:50px;
  margin-right:1em;
  padding-left:0;
}
#cart-items li{
  display:flex;
  align-items:center;
}
#cart-items span{
  font-size:.80em;
  text-transform:capitalize;
  margin:0 .10em;
}
#cart-items span.bold{
  font-weight:bold;
  text-transform:uppercase;
  margin-left:.60em;
}
#cart-items span.total{
  color:rgb(200,0,0);
  font-weight:bold;
}
#item{
  width:350px;
  margin:1.2em auto 0;
  padding-bottom:1em;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}
#item h3{
  color:white;
  margin: 0;
  text-transform:capitalize;
}
img{
  width:100%;
}
#item #img{
/*   border:solid 2px red; */
  width:300px;
/*   margin-bottom:1em; */
/*   margin-top:1em; */
}
/*********
QUANTITY
*********/
.amount a{
  text-decoration:none;
/*   color:rgb(200,0,0); */
  color:white;
  padding:10% 0;
  flex:1;
}
.amount{
/*   border:solid 2px rgb(200,200,0); */
  border:solid 2px white;
  height:60px;
  width:200px;
  border-radius:50px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  text-align:center;
  overflow:hidden;
  margin-bottom:1em;
}
.amount span{
/*   color:rgb(200,0,0); */
  color:white;
  flex:2;
}

/********
ITEM BUTTON
********/
.add-to-cart-btn{
  font-family:sans-serif;
  text-transform:uppercase;
  background:black;
  color:white;
  border:solid 1px transparent;
  border-radius:50px;
  padding:.90em 2em;
  cursor:pointer;
}
/* .add-to-cart-btn:hover{
  background:green;
} */
.add-to-cart-btn.clicked{
/*   transform:translatey(5px); */
  background:red;
}

.pop-up{
  text-transform:capitalize;
  color:white;
  background:rgba(0,0,0,.7);
  padding:.60em 3em;
  position:absolute;
  top:50%;
  margin-top:-50px;
}

/*Downloaded from https://www.codeseek.co/-J0hn-/add-to-cart-jquery-JEyQWe */
$(document).ready(function() {
  var count = 1;
  $('#total').text(count);
  
  var cart = $('#cart-items');
  var cart_btn = $('.cart-btn');
  
  //IF CART HAS NO ITEMS, DISABLE BUTTON
  if(cart.is(':empty')) {
    cart_btn.prop('disabled', true);
  }
  
  //GET PRICE OF ITEM($185)
  var price = +$('#item').data('price');
  
  //INCREMENT / DECREMENT BUTTON
  $('.amount').on('click', 'a', function(e) {
    e.preventDefault();
    if ($(this).hasClass('fa-plus')) {
      if (count < 10) {
        count++;
        $('#total').text(count);
      }
    } else if ($(this).hasClass('fa-minus')) {
      if (count > 1) {
        count--;
        $('#total').text(count);
      }
    }
  });
  
  //ADD TO CART BUTTON
  $('#item').on('click','button',function(){
    // ENABLE CART BUTTON
    cart_btn.prop('disabled', false);
    
    //GET SRC VALUE OF THE IMAGE
    var itemImg = $(this).parent().find('img').prop('src');
    //GET TEXT OF THE ITEM
    var itemText = $(this).parent().find('h3').text();
    //UL
    var cartItemsUL = $('#cart-items');
    //CREATE NEW LI
    var li = $('<li></li>');
    //CREATE IMG ELEMENT AND ADD THE SRC VALUE
    var cartItemsImg = $('<img>').attr('src',itemImg);
    //NAME OF THE ITEM
    var cartItemsText = $('<span></span>').text(itemText);
    
    var cartItemsAmount = $('<span></span>').addClass('bold').text('total:');
    //MULTIPLY THE PRICE OF THE ITEM WITH THE QTY.
    var total = Math.floor(price * count);
    
    var cartItemsTotal = $('<span></span>').addClass('total').text(`$${total}`);
    
    $(cartItemsUL).append($(li));
    $(li).append($(cartItemsImg),$(cartItemsText),$(cartItemsAmount),$(cartItemsTotal));
    
    
    if($(cartItemsUL).children().length > 1){
      $(cartItemsUL).children().first().remove();
    }
    
    
    //POP UP NOTIFICATION
    var notify = $('<div></div>').addClass('pop-up').text('added to cart').fadeOut(2000);
    $(this).parent().append(notify);
    
  });
  
  //NAV BUTTON TOGGLE UL
  $('nav').on('click','button',function(){
    $(this).parent().find('#cart-items').toggleClass('open');
  });
});

Comments