Add To Cart jquery

Developer
Size
3,490 Kb
Views
8,096

How do I make an add to cart jquery?

What is a add to cart jquery? How do you make a add to cart jquery? This script and codes were developed by John on 05 January 2023, Thursday.

Add To Cart jquery Previews

Add To Cart jquery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<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>

Add To Cart jquery - Script Codes CSS Codes

*,*: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;
}

Add To Cart jquery - Script Codes JS Codes

$(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'); });
});
Add To Cart jquery - Script Codes
Add To Cart jquery - Script Codes
Home Page Home
Developer John
Username -J0hn-
Uploaded January 05, 2023
Rating 3
Size 3,490 Kb
Views 8,096
Do you need developer help for Add To Cart jquery?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John (-J0hn-) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!