salejs
Version:
Cart Widget turning any Site into Shop
127 lines (116 loc) • 5.59 kB
HTML
<html>
<head>
<link rel="stylesheet" href="../client/vendor/purecss-0.3.0.css">
<link rel="stylesheet" href="shop/shop.css">
</head>
<body>
<div class="content">
<div class="header">
<div class="pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal">
<a class="pure-menu-heading" href="">auris nec</a>
<ul>
<li class="pure-menu-selected"><a href="#">Nulla</a></li>
<li><a href="#">Fusce</a></li>
</ul>
<a class="pure-cart pure-button cart-button">0 Items</a>
</div>
</div>
<div class="splash">
<div class="pure-g-r">
<div class="pure-u-1-3">
<div class="l-box splash-image">
<img src="http://placehold.it/500x350" alt="Placeholder image for example.">
</div>
</div>
<div class="pure-u-2-3">
<div class="l-box splash-text">
<h1 class="splash-head">
Aliquam erat volutpat.
</h1>
<h2 class="splash-subhead">
Morbi viverra, justo quis placerat commodo, nisi metus vehicula tellus, lobortis iaculis eros nunc vitae magna. Duis a auctor tellus, et elementum magna. Phasellus at nunc sodales lorem ultricies varius. Nam ultricies iaculis magna vel feugiat. Mauris nec eros commodo, commodo nisl eget, interdum nisi. Aliquam erat volutpat. Aenean id augue consequat, consequat mauris et, facilisis dui. Vestibulum sit amet neque eu neque rutrum auctor tempus a libero. Nulla a nunc vel enim euismod rhoncus. Duis sit amet nisl in lacus ultrices vestibulum vel eget lacus. Nam et odio ultrices, interdum ligula ac, fringilla mi. Donec et rutrum dolor, eu tincidunt arcu. Fusce nunc ipsum, volutpat ultricies consequat vitae, vestibulum venenatis magna.
</h2>
<p>
<a href="#" class="pure-button primary-button">Buy</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="bootstrap-widget">
</div>
<textarea id="cart-with-items-template" style="display: none;">
<div class="cart">
<div class="cart-items">
<div class="cart-item">
<div class="cart-item-name">Nice Boots</div>
<div class="cart-item-remove">×</div>
<input class="cart-item-quantity form-control" type="text" value="1">
<div class="cart-item-multiply-sign">×</div>
<div class="cart-item-price">$10</div>
<div class="cart-clearfix"></div>
</div>
<div class="cart-item">
<div class="cart-item-name">Super ultra mega pro level Black Hat</div>
<div class="cart-item-remove">×</div>
<input class="cart-item-quantity form-control" type="text" value="33">
<div class="cart-item-multiply-sign">×</div>
<div class="cart-item-price">$10</div>
<div class="cart-clearfix"></div>
</div>
</div>
<button type="button" class="btn btn-primary cart-purchase-button">
<span class="cart-purchase-button-label">Purchase</span>
<span class="cart-purchase-button-currency"></span>
<span class="cart-purchase-button-price">$20</span>
</button>
</div>
</textarea>
<textarea id="cart-contact-form-template" style="display: none;">
<div class="cart">
<form role="form">
<div class="form-group has-error">
<label class="control-label" for="cart-phone">Your phone</label>
<input type="phone" name="phone" class="form-control" id="cart-phone" placeholder="Enter phone" required>
<span class="help-block">Invalid phone number.</span>
</div>
<div class="form-group has-success">
<label class="control-label" for="cart-email">Your email</label>
<input type="email" name="email" class="form-control" id="cart-email" placeholder="Enter email" required>
</div>
</form>
<button type="button" class="btn btn-primary cart-purchase-button">
<span class="cart-purchase-button-label">Purchase</span>
<span class="cart-purchase-button-currency"></span>
<span class="cart-purchase-button-price">$20</span>
</button>
</div>
</textarea>
<textarea id="cart-message-template" style="display: none;">
<div class="cart">
<div class="cart-message">You haven't purchased any products yet.</div>
</div>
</textarea>
<link rel="stylesheet" href="../client/vendor/bootstrap-3.0.2/css/bootstrap-widget.css" type="text/css">
<link rel="stylesheet" href="cart.css" type="text/css">
<script src="../client/vendor/jquery-1.10.2.js"></script>
<script src="../client/vendor/underscore-1.5.2.js"></script>
<script src="../client/vendor/bootstrap-3.0.2/js/bootstrap.js"></script>
<script src="cart.js"></script>
<script>$(function(){cartjs.initialize()})</script>
<!-- Live CSS Reload. -->
<script>
setInterval(function(){
var links = document.querySelectorAll('link')
// Updating only the last style, if you need to update all styles remove line below.
links = [links[links.length - 1]]
for(var i = 0; i < links.length; i++){
var link = links[i]
var href = link.getAttribute('href').split('#')[0]
link.setAttribute('href', href + '#' + Math.random())
}
}, 1000)
</script>
</body>
</html>