<!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');
});
});