Shopping Site Mockup

Developer
Bryan Fillmer
Size
6,977 Kb
Views
30,360
  1. Shopping Site Mockup Previews
  2. Shopping Site Mockup HTML Codes
  3. Shopping Site Mockup CSS Codes
  4. Shopping Site Mockup JS Codes

How do I make an shopping site mockup?

A simple mockup for an online store. Basic sorting, cart access, and a few bells and whistles for giggles. (WIP). What is a shopping site mockup? How do you make a shopping site mockup? This script and codes were developed by Bryan Fillmer on 10 December 2022, Saturday.

Shopping Site Mockup Previews
IQ Test

Shopping Site Mockup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shopping Site Mockup</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600,400italic'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper"> <header class="site-header"> <div class="inner-wrap"> <h1>Shopping.</h1> <ul class="list-inline"> <li><a href="#" class="search"><i class="fa fa-search"></i></a></li> <li><a href="#" class="account">Login</a></li> <li><button class="your-cart js-toggle-cart" data-item-num="3">Your Cart <i class="fa fa-lg fa-shopping-cart"></i></button></li> </ul> </div> </header> <div class="site-toolbar"> <div class="inner-wrap clearfix"> <div class="notifications animated"><span>Amazing Product</span> Added to Cart!</div> </div> </div> <div class="filter-grid"> <div class="inner-wrap"> <div class="filter-cell"> <select class="form-control"> <option value="*">Category</option> <option value="fav">Favorites</option> </select> </div> <div class="filter-cell"> <select class="form-control"> <option value="*">Product Type</option> <option value="square">Square</option> <option value="circular">Circular</option> </select> </div> <div class="filter-cell"> <select class="form-control" disabled="true"> <option>Price</option> </select> </div> <div class="filter-cell"> <select class="form-control" disabled="true"> <option>Brand</option> </select> </div> </div> </div> <div class="inner-wrap content-wrap"> <div class="product-grid"> <div class="grid-product square fav"> <div class="img-name camera"><h4>Camera</h4></div> <p class="price">$3.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> <div class="grid-product circular fav"> <div class="img-name watch"><h4>Watch</h4></div> <p class="price">$5.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> <div class="grid-product square"> <div class="img-name canoe"><h4>Canoe</h4></div> <p class="price">$6.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> <div class="grid-product"> <div class="img-name typewriter"><h4>Typewriter</h4></div> <p class="price">$7.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> <div class="grid-product square"> <div class="img-name canoe"><h4>Canoe</h4></div> <p class="price">$6.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> <div class="grid-product circular"> <div class="img-name typewriter"><h4>Typewriter</h4></div> <p class="price">$7.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> <div class="grid-product"> <div class="img-name camera"><h4>Camera</h4></div> <p class="price">$3.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> <div class="grid-product fav"> <div class="img-name watch"><h4>Watch</h4></div> <p class="price">$5.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> <div class="grid-product square"> <div class="img-name typewriter"><h4>Typewriter</h4></div> <p class="price">$7.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> <div class="grid-product"> <div class="img-name camera"><h4>Camera</h4></div> <p class="price">$3.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> <div class="grid-product circular square fav"> <div class="img-name canoe"><h4>Canoe</h4></div> <p class="price">$6.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> <div class="grid-product fav"> <div class="img-name watch"><h4>Watch</h4></div> <p class="price">$5.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> <div class="grid-product tasty"> <div class="img-name typewriter"><h4>Typewriter</h4></div> <p class="price">$7.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> <div class="grid-product circular"> <div class="img-name watch"><h4>Watch</h4></div> <p class="price">$5.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> <div class="grid-product fav"> <div class="img-name camera"><h4>Camera</h4></div> <p class="price">$3.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> <div class="grid-product square"> <div class="img-name canoe"><h4>Canoe</h4></div> <p class="price">$6.99 <button class="add-to-cart js-add-to-cart btn">Add</button><p> </div> </div> </div> <div class="sticky"></div>
</div>
<footer class="site-footer"> <div class="inner-wrap"> Footer Info </div>
</footer>
<div class="cart"> <div class="inner-wrap"> <h2>Your Cart</h2> <table class="cart-table"> <thead> <tr> <th class="product-remove">Remove Items</th> <th class="product-name">Product</th> <th class="product-price">Price</th> <th class="product-quantity">Quantity</th> <th class="product-line-total">Subtotal</th> </tr> </thead> <tbody> <tr id="product-camera"> <td><button type="button" class="product-remove" data-id="product-camera"><i class="fa fa-times"></i></button></td> <td>Camera</td> <td class="product-price" data-price="3.99">3.99</td> <td class="product-quantity"> <input type="number" pattern="\d*" step="1" min="1" max="5" value="1" data-id="product-camera"> <button class="plus js-number-control"> <i class="fa fa-plus-square"></i> </button> <button class="minus js-number-control"> <i class="fa fa-minus-square"></i> </button> </td> <td class="product-line-total" id="product-camera-total" data-line-total="3.99">3.99</td> </tr> </tbody> </table> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.0.0/isotope.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Shopping Site Mockup - Script Codes CSS Codes

/** * @TODO: * 1. Refactor a bit, is messy. * 2. Colors good, fonts meh. * 3. Finish actual cart layout. * 4. Wire up various data bits in UI. * 5. Pull data out of mockup in JS layer. */
html,
body { height: 100%;
}
body { padding-top: 230px; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; font-size: 14px; color: #2e2e2e; background-color: #f2f2f2;
}
h1,
h2,
h3,
h4,
h5 { font-weight: 600;
}
a:link,
a:visited { color: #b8d87f;
}
a:hover,
a:active { color: #b8d87f; text-decoration: none;
}
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -200px;
}
.sticky { height: 200px;
}
.inner-wrap { width: 960px; margin: 0 auto;
}
.site-header { position: fixed; top: 0; left: 0; width: 100%; height: 120px; z-index: 9999; background-color: #2b2e35;
}
.site-header .inner-wrap { display: table; height: 120px;
}
.site-header h1,
.site-header ul { display: table-cell; vertical-align: middle;
}
.site-header h1 { margin: 0; font-weight: 600; color: #fff;
}
.site-header ul { font-size: 16px; text-align: right; color: #b2c4d8;
}
.site-header ul li { padding-left: 7px; padding-right: 7px;
}
.site-header .search { color: #434f5b;
}
.site-header .account { color: #6f8295;
}
.site-header ul button { color: #aab5c0; border: none; background: none; outline: none;
}
.site-header ul a:hover,
.site-header ul button:hover,
.site-header ul button.have-items { color: #b8d87f;
}
/* @TODO */
.site-header ul button.have-items { position: relative;
}
.site-header ul button.have-items:before { position: absolute; top: -5px; right: 0; z-index: 9; content: '\f111'; display: block; font-family: 'FontAwesome'; color: #fff;
}
.site-header ul button.have-items:after { position: absolute; top: -4px; right: 3px; z-index: 11; content: attr(data-item-num); display: block; font-weight: bold; font-size: 0.8em; color: #2b2e35;
}
.site-toolbar,
.site-toolbar * { transition: all 0.5s;
}
.site-toolbar { position: fixed; top: 120px; left: 0; width: 100%; height: 30px; z-index: 9999; background-color: #b8d87f;
}
.site-toolbar .notifications { float: left; width: 100%; padding-top: 5px; padding-bottom: 5px; padding-right: 7px; font-weight: 600; text-align: right; opacity: 0;
}
.site-toolbar .notifications span { color: #434f5b;
}
.content-wrap { position: relative; padding-top: 30px; padding-bottom: 30px;
}
.filter-grid { position: fixed; top: 150px; left: 0; z-index: 8999; width: 100%; padding-top: 10px; padding-bottom: 10px; background-color: #434f5b;
}
.filter-grid .filter-cell { float: left; width: 25%; padding: 7px;
}
.filter-grid select { font-weight: 600;
}
.product-grid { width: 100%;
}
.grid-product { width: 25%; padding: 7px;
}
.grid-product .img-name { position: relative; width: 100%; height: 190px; background-color: #fff; background-size: cover; background-position: center center; background-repeat: no-repeat; border: 1px solid #aab5c0;
}
.grid-product .img-name h4 { position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px; font-size: 18px; color: #2b2e35; background-color: rgba(242, 242, 242, 0.8);
}
.grid-product .img-name img { width: 100%;
}
.grid-product .price { position: relative; padding: 15px; font-weight: bold; background-color: #aab5c0;
}
.grid-product .add-to-cart { position: absolute; top: 7px; right: 7px; color: #fff; background-color: #434f5b;
}
.grid-product .add-to-cart:hover { color: #b8d87f; background-color: #2b2e35;
}
.camera { background-image: url(https://imgur.com/fP6yjZ3.jpg);
}
.watch { background-image: url(https://imgur.com/DWMEYH3.jpg);
}
.typewriter { background-image: url(https://imgur.com/DVT28Z6.jpg);
}
.canoe { background-image: url(https://imgur.com/SC1jz9L.jpg);
}
.site-footer { height: 230px; padding-top: 30px; padding-left: 7px; font-size: 13px; background-color: #2e2e2e;
}
.site-footer a:link { font-weight: bold;
}
.site-footer table { width: 100%;
}
.site-footer table td { vertical-align: top; width: 25%;
}
.cart { position: fixed; top: -100%; z-index: 9599; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: top 0.5s; color: #fff; background-color: #434f5b;
}
.show-cart { top: 150px;
}
.product-quantity { position: relative; width: 60px; height: 40px;
}
.product-quantity .plus,
.product-quantity .minus { position: absolute; width: 20px; height: 20px; padding: 0; margin: 0; font-size: 16px; text-align: center; color: #fff; background: none; border: none; cursor: pointer;
}
.product-quantity .plus:hover,
.product-quantity .minus:hover { color: #b8d87f;
}
.product-quantity .plus { top: 0; left: 0;
}
.product-quantity .minus { bottom: 0; left: 0;
}
.product-quantity input[type=number] { position: absolute; top: 0; right: 0; width: 35px; height: 40px; margin: 0; padding: 0; font-family: 'Source Sans Pro', sans-serif; font-weight: 700; font-size: 16px; color: #fff; background: none; border: none; -moz-appearance: textfield;
}
.product-quantity input[type=number]::-webkit-inner-spin-button,
.product-quantity input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;
}

Shopping Site Mockup - Script Codes JS Codes

(function($){ $(document).ready(function() { // Initialize Isotope var $container = $('.product-grid'); $container.isotope({ itemSelector: '.grid-product', layoutMode: 'masonry' }); // Setup filtering with dropdowns. var $filterSelects = $('.filter-grid select'); var performFilter = function() { var filterVal = ( $(this).val() == '*' ) && '*' || '.'+$(this).val(); $container.isotope({ filter: filterVal }); }; $filterSelects.on( 'change', performFilter ); // Add to cart notification. var $addToCart = $('.js-add-to-cart'); var performNotification = function() { $('.your-cart').addClass('have-items'); $('.notifications').removeClass('fadeOut').addClass('fadeInLeft'); setTimeout( function(){ $('.notifications').removeClass('fadeInLeft').addClass('fadeOut'); }, 3000 ); }; $addToCart.on( 'click', performNotification ); // Cart Slide Down var $cartToggle = $('.js-toggle-cart'); var performCartToggle = function() { $('.cart').toggleClass('show-cart'); }; $cartToggle.on( 'click', performCartToggle ); /** * Function for manipulating a sibling input of type "number" * from an event fired. Relies on the control for increasing * the number to have a class of .plus. Also requires a min * attribute set on the number to know what not to go below. */ var manipulateNumberInput = function(e) { e.preventDefault(); // Prevent default action. var $numberInput = $(this).siblings('input[type=number]'), currentValue = $numberInput.val() != '' && $numberInput.val() || 1, adjustedValue = parseInt( currentValue ) + ($(this).hasClass('plus') && 1 || -1); $numberInput.val( adjustedValue ).trigger('change'); // Adjust the number input value, trigger onChange. } /** * Runs onchange to keep numbers between max/min values. */ var validateNumberInput = function(e) { var $numberInput = $(this), currentValue = parseInt( $numberInput.val() ), minimumValue = parseInt( $(this).attr('min') ), maximumValue = parseInt( $(this).attr('max') ); if( currentValue < minimumValue ) $numberInput.val( minimumValue ); if( currentValue > maximumValue ) $numberInput.val( maximumValue ); } // Find number controls, attach click events. var $numberControls = $('.js-number-control'); $numberControls.on( 'click', manipulateNumberInput ); // Attach validation listeners. var $numberInputs = $('input[type=number]'); $numberInputs.on( 'change', validateNumberInput ); }); // Document Ready
})(jQuery); // Map jQuery => $
Shopping Site Mockup - Script Codes
Shopping Site Mockup - Script Codes
Home Page Home
Developer Bryan Fillmer
Username bfillmer
Uploaded December 10, 2022
Rating 4
Size 6,977 Kb
Views 30,360
Do you need developer help for Shopping Site Mockup?

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!

Bryan Fillmer (bfillmer) Script Codes
Name
Prototype Angular JS Workout Log
Basic Javascript Chaining
Toggle Overlay on UL
General Tax Calculator
Five Programming Problems
Regex Sensei
Continued Angular Testbed
Simple Number Element Controls Demo
On A Boat
Flat Toggle Switch
Create amazing marketing copy 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!