Shopping Cart

Developer
Tyler Fry
Size
6,555 Kb
Views
64,768
  1. Shopping Cart Previews
  2. Shopping Cart HTML Codes
  3. Shopping Cart CSS Codes
  4. Shopping Cart JS Codes

How do I make an shopping cart?

Here's my re-imagined shopping cart. I actually had a ton of fun building the image charger. If your a js wizard please feel free to help me update it to be better. . What is a shopping cart? How do you make a shopping cart? This script and codes were developed by Tyler Fry on 16 July 2022, Saturday.

Shopping Cart Previews
IQ Test

Shopping Cart - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shopping Cart</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://s.cdpn.io/6035/grid.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans:400,600'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
img { max-width: 100%; height: auto; vertical-align: sub;
}
.left { float: left;
}
.right { float: right;
}
.clr { clr: both;
}
.align-left { text-align: left;
}
.align-right { text-align: right;
}
.align-center { text-align: center;
}
html { background: #f5f5f5; font-family: 'Open Sans', sans;
}
.icon { background: url(http://s.cdpn.io/6035/glyphicons-halflings-white.png) no-repeat; display: inline-block; display: inline-block; width: 14px; height: 14px; margin-top: 1px; line-height: 14px; vertical-align: text-top; background-position: 14px 14px;
}
.icon-plus { background-position: -408px -96px;
}
.icon-minus { background-position: -433px -96px;
}
.icon-remove { background-position: -312px 0;
}
.btn-quantity { width: 22px; height: 22px; border-radius: 3px; text-align: center; display: inline-block; line-height: 25px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3); transition: background-color .3s ease;
}
.btn-quantity.plus { background: #3498db;
}
.btn-quantity.plus:hover { background: #217dbb;
}
.btn-quantity.minus { background: #e74c3c;
}
.btn-quantity.minus:hover { background: #d62c1a;
}
.btn-remove { position: absolute; top: 2px; right: 2px; z-index: 10; width: 22px; height: 22px; border-radius: 3px; text-align: center; display: inline-block; line-height: 25px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3); transition: background-color .3s ease; background: #c0392b;
}
.btn-remove:hover { background: #962d22;
}
.btn-remove .icon { margin-top: 2px;
}
.btn-checkout { color: #fff; text-decoration: none; margin: 20px 0 0; padding: 10px 0; border-radius: 5px; text-align: center; display: block; line-height: 25px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3); transition: background-color .3s ease; background: #2ecc71;
}
.btn-checkout:hover { background: #25a25a;
}
.items { margin: 0; padding: 0; list-style: none;
}
.item { background: #fff; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); margin-bottom: 20px; position: relative;
}
.item img { border-radius: 5px 5px 0 0;
}
.item .preview ul { margin: 0; padding: 0; list-style: none; position: relative; height: 100%;
}
.item .preview li { position: absolute; top: 0; opacity: 0;
}
.item .preview li.active { opacity: 1;
}
.item .details { padding: 10px; position: relative; overflow: hidden;
}
.item .details:before { content: attr(data-price); position: absolute; font-weight: 600; font-size: 75px; color: #f8f8f8; right: -10px; top: -27px; z-index: 0;
}
.item .details h3 { margin: 0 0 5px 0; position: relative; z-index: 1;
}
.item .details p { font-size: .875em; line-height: 1.5em;
}
.item .details input[type="number"] { width: 50px; height: 30px; padding: 2px; outline: none; border-radius: 5px; border: none; border: 1px solid #ccc;
}
.summary { padding: 20px; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); border-radius: 5px; margin-bottom: 20px;
}
.summary .meta-data { border-right: 1px solid #eee;
}
.summary .total { font-size: 3em; text-align: center; line-height: 65px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="cart"> <div class="container"> <div class="grid_12"> <h1>Cart</h1> </div> <ul class="items"> <li class="grid_4 item"> <a href="#" class="btn-remove"> <span class="icon icon-remove"></span> </a> <div class="preview"> <ul class="images" data-images="[&quot;http://s.cdpn.io/6035/purplebike_01.jpg&quot;,&quot;http://s.cdpn.io/6035/purplebike_02.jpg&quot;,&quot;http://s.cdpn.io/6035/purplebike_03.jpg&quot;,&quot;http://s.cdpn.io/6035/purplebike_04.jpg&quot;]"> <li><img src="http://s.cdpn.io/6035/purplebike_01.jpg" /></li> <li><img src="http://s.cdpn.io/6035/purplebike_02.jpg" /></li> <li><img src="http://s.cdpn.io/6035/purplebike_03.jpg" /></li> <li><img src="http://s.cdpn.io/6035/purplebike_04.jpg" /></li> </ul> <img src="http://s.cdpn.io/6035/purplebike_01.jpg" /> </div> <div class="details" data-price="440"> <h3> 58cm Purple Miele <span class="right">$440</span> </h3> <p>Look at your bike. Now back to this bike . Now back to your bike. Now back to this bike. Sadly, your bike just isn't as sexy</p> <div class="inner_container"> <div class="col_1of2"> <p><span class="current_quantity">1</span> @ $440</p> </div> <div class="col_1of2 align-right"> <p> <a href="#" class="btn-quantity plus"> <span class="icon icon-plus"></span> </a> <a href="#" class="btn-quantity minus"> <span class="icon icon-minus"></span> </a> </p> <input type="hidden" class="quantity_field" name="quantity" value="1" data-price="440" /> </div> </div> </div> </li> <li class="grid_4 item"> <a href="#" class="btn-remove"> <span class="icon icon-remove"></span> </a> <div class="preview"> <ul class="images" data-images="[&quot;http://s.cdpn.io/6035/bluebike_01.jpg&quot;,&quot;http://s.cdpn.io/6035/bluebike_02.jpg&quot;,&quot;http://s.cdpn.io/6035/bluebike_03.jpg&quot;,&quot;http://s.cdpn.io/6035/bluebike_04.jpg&quot;]"> <li><img src="http://s.cdpn.io/6035/bluebike_01.jpg" /></li> <li><img src="http://s.cdpn.io/6035/bluebike_02.jpg" /></li> <li><img src="http://s.cdpn.io/6035/bluebike_03.jpg" /></li> <li><img src="http://s.cdpn.io/6035/bluebike_04.jpg" /></li> </ul> <img src="http://s.cdpn.io/6035/purplebike_01.jpg" /> </div> <div class="details" data-price="475"> <h3> 47cm Blue Steve Bauer <span class="right">$475</span> </h3> <p>WAIT ONE MINUTE! If you're not 5'1 and under, you will probably only get half a pedal stroke in before your knees hit...</p> <div class="inner_container"> <div class="col_1of2"> <p><span class="current_quantity">1</span> @ $475</p> </div> <div class="col_1of2 align-right"> <p> <a href="#" class="btn-quantity plus"> <span class="icon icon-plus"></span> </a> <a href="#" class="btn-quantity minus"> <span class="icon icon-minus"></span> </a> </p> <input type="hidden" class="quantity_field" name="quantity" data-price="475" value="1" /> </div> </div> </div> </li> </ul> <div class="grid_12 summary"> <div class="inner_container"> <div class="col_1of2 meta-data"> <div class="sub-total"> <em>Sub Total: </em><span class="amount"></span> </div> <div class="taxes"> <em>Sales Tax: </em><span class="amount">5%</span> </div> <div class="shipping"> <em>Shipping: </em><span class="amount">$20</span> </div> </div> <div class="col_1of2"> <div class="total"> <span class="amount"></span> </div> </div> <div class="col_1of1"> <a href="#" class="btn-checkout">Checkout</a> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Shopping Cart - Script Codes CSS Codes

* { box-sizing: border-box;
}
img { max-width: 100%; height: auto; vertical-align: sub;
}
.left { float: left;
}
.right { float: right;
}
.clr { clr: both;
}
.align-left { text-align: left;
}
.align-right { text-align: right;
}
.align-center { text-align: center;
}
html { background: #f5f5f5; font-family: 'Open Sans', sans;
}
.icon { background: url(http://s.cdpn.io/6035/glyphicons-halflings-white.png) no-repeat; display: inline-block; display: inline-block; width: 14px; height: 14px; margin-top: 1px; line-height: 14px; vertical-align: text-top; background-position: 14px 14px;
}
.icon-plus { background-position: -408px -96px;
}
.icon-minus { background-position: -433px -96px;
}
.icon-remove { background-position: -312px 0;
}
.btn-quantity { width: 22px; height: 22px; border-radius: 3px; text-align: center; display: inline-block; line-height: 25px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3); transition: background-color .3s ease;
}
.btn-quantity.plus { background: #3498db;
}
.btn-quantity.plus:hover { background: #217dbb;
}
.btn-quantity.minus { background: #e74c3c;
}
.btn-quantity.minus:hover { background: #d62c1a;
}
.btn-remove { position: absolute; top: 2px; right: 2px; z-index: 10; width: 22px; height: 22px; border-radius: 3px; text-align: center; display: inline-block; line-height: 25px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3); transition: background-color .3s ease; background: #c0392b;
}
.btn-remove:hover { background: #962d22;
}
.btn-remove .icon { margin-top: 2px;
}
.btn-checkout { color: #fff; text-decoration: none; margin: 20px 0 0; padding: 10px 0; border-radius: 5px; text-align: center; display: block; line-height: 25px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3); transition: background-color .3s ease; background: #2ecc71;
}
.btn-checkout:hover { background: #25a25a;
}
.items { margin: 0; padding: 0; list-style: none;
}
.item { background: #fff; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); margin-bottom: 20px; position: relative;
}
.item img { border-radius: 5px 5px 0 0;
}
.item .preview ul { margin: 0; padding: 0; list-style: none; position: relative; height: 100%;
}
.item .preview li { position: absolute; top: 0; opacity: 0;
}
.item .preview li.active { opacity: 1;
}
.item .details { padding: 10px; position: relative; overflow: hidden;
}
.item .details:before { content: attr(data-price); position: absolute; font-weight: 600; font-size: 75px; color: #f8f8f8; right: -10px; top: -27px; z-index: 0;
}
.item .details h3 { margin: 0 0 5px 0; position: relative; z-index: 1;
}
.item .details p { font-size: .875em; line-height: 1.5em;
}
.item .details input[type="number"] { width: 50px; height: 30px; padding: 2px; outline: none; border-radius: 5px; border: none; border: 1px solid #ccc;
}
.summary { padding: 20px; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); border-radius: 5px; margin-bottom: 20px;
}
.summary .meta-data { border-right: 1px solid #eee;
}
.summary .total { font-size: 3em; text-align: center; line-height: 65px;
}

Shopping Cart - Script Codes JS Codes

var $addQuantity = $('.btn-quantity.plus'), $minusQuantity = $('.btn-quantity.minus'), $removeItem = $('.btn-remove');
$addQuantity.on('click',function(e){ e.preventDefault(); var $item = $(this).parents('.item'), $quantityField = $item.find('.quantity_field'), currentQuantity = $quantityField.val(), nextQuantity = parseFloat(currentQuantity)+1; $item.find('.current_quantity').html(nextQuantity); $quantityField.val(nextQuantity); calculateTotal();
});
$minusQuantity.on('click',function(e){ e.preventDefault(); var $item = $(this).parents('.item'), $quantityField = $item.find('.quantity_field'), currentQuantity = $quantityField.val(); var prevQuantity = (currentQuantity <= 1) ? 0 : parseFloat(currentQuantity)-1; $item.find('.current_quantity').html(prevQuantity); $quantityField.val(prevQuantity); calculateTotal();
});
$removeItem.on('click',function(){ var $item = $(this).parents('.item'); $item.remove(); calculateTotal();
});
var calculateTotal = function( ) { var newSubTotal = 0; $('.quantity_field').each(function(){ var quantity = $(this).val(), price = $(this).data('price'); newSubTotal += parseFloat(quantity*price); }); $('.sub-total .amount').html('$'+newSubTotal); var withTax = newSubTotal*1.05; var newTotal = withTax+20; $('.total .amount').html('$'+newTotal);
};
/* * Image Slide * I actually had a lot more fun building this image changer function that I did the rest of the cart I think. It's a pretty straight forward. Please help me improve it if you see any issues. */
var imageSlide = { init: function(element){ imageSlide.$imageList = $(element); imageSlide.images = this.$imageList.data('images'); imageSlide.currentSlide = 0; imageSlide.$imageList.each(function(){ $(this).find('li').removeClass('active').eq(0).addClass('active'); }); imageSlide.$imageList.hover( function(){ imageSlide.$imageList = $(this) imageSlide.start(); }, function(){ imageSlide.stop(); }); }, changeSlide: function(){ imageSlide.$imageList.find('li').removeClass('active').eq(imageSlide.currentSlide).addClass('active'); if(imageSlide.currentSlide >= imageSlide.images.length -1) { imageSlide.currentSlide = 0; } else { imageSlide.currentSlide++; } }, start: function(){ imageSlide.changeSlide(); imageSlide.timer = setInterval(imageSlide.changeSlide,300); }, stop: function() { clearInterval(imageSlide.timer); imageSlide.$imageList.find('li').removeClass('active').eq(0).addClass('active'); }
};
imageSlide.init('.images');
calculateTotal();
Shopping Cart - Script Codes
Shopping Cart - Script Codes
Home Page Home
Developer Tyler Fry
Username frytyler
Uploaded July 16, 2022
Rating 4
Size 6,555 Kb
Views 64,768
Do you need developer help for Shopping Cart?

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!

Tyler Fry (frytyler) Script Codes
Name
Flat UI Kit - Dribbble Rebound
Ui Kit Dribbble Rebound
Old School Mac - Pure CSS
Volume
HTML5 Video Player UI
Flat Instagram Logo
Login Form
Check
Carousel Book Layout Using CSS Regions
Email UI - Dribbble Rebound
Create amazing SEO content 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!