LocalStorage Shopping App

Developer
Mihovil Ilakovac
Size
3,928 Kb
Views
12,144
  1. LocalStorage Shopping App Previews
  2. LocalStorage Shopping App HTML Codes
  3. LocalStorage Shopping App CSS Codes
  4. LocalStorage Shopping App JS Codes

How do I make an localstorage shopping app?

Done in pure javascript and caused me much headache :D . What is a localstorage shopping app? How do you make a localstorage shopping app? This script and codes were developed by Mihovil Ilakovac on 31 October 2022, Monday.

LocalStorage Shopping App Previews
IQ Test

LocalStorage Shopping App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>LocalStorage Shopping App</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/5.0.2/css/foundation.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="row"> <nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"> <h1><a href="#">LocalCart //</a></h1> </li> </ul> <section class="top-bar-section"> <ul class="left"> <li><a href="#">made for you <3</a> </li> </ul> </section> </nav> <div class="medium-4 columns"> <div class="cart"> <h1>Cart items</h1> <div class="row"> <div class="medium-6 columns"> <button class="tiny secondary" id="clear">Clear the cart</button> </div> <div class="medium-6 columns"> <button class="tiny disabled" title="Work in progress">Checkout</button> </div> </div> <div id="cartItems">Loading cart...</div> Total price: <strong id="totalPrice">0 $</strong> </div> </div> <div class="medium-8 columns"> <h1>Some products</h1> <div class="products"> <div class="product medium-4 columns" data-name="Orange" data-price="12" data-id="0"> <img src="https://i.imgur.com/eZoZJiR.png" alt="" /> <h3>Orange</h3> <input type="text" class="count" value="1" /> <button class="tiny">Add to cart</button> </div> <div class="product medium-4 columns" data-name="Apple" data-price="10" data-id="1"> <img src="https://i.imgur.com/rA0NZTo.jpg" alt="" /> <h3>Apple</h3> <input type="text" class="count" value="1" /> <button class="tiny">Add to cart</button> </div> <div class="product medium-4 columns" data-name="Peach" data-price="20" data-id="2"> <img src="https://i.imgur.com/S4tXku0.jpg" alt="" /> <h3>Peach</h3> <input type="text" class="count" value="1" /> <button class="tiny">Add to cart</button> </div> </div> </div>
</div>
<script type="text/template" id="cartT"> <% _.each(items, function (item) { %> <div class = "panel"> <h3> <%= item.name %> </h3> <span class="label">
<%= item.count %> piece<% if(item.count > 1)
{%>s
<%}%> for <%= item.total %>$</span > </div>
<% }); %>
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

LocalStorage Shopping App - Script Codes CSS Codes

nav { margin-bottom: 1em !important;
}
.cart { box-shadow: 0 0 5px #DDD; padding: 20px;
}

LocalStorage Shopping App - Script Codes JS Codes

/* Author: Mihovil Ilakovac (infomiho) Used: javascript + underscore.js (for templating), Foundation 5 (design) It's based on a simple idea, to minimize requests to the server and only send the final cart to the server for evaluation and payment.
*/
var cartId = "cart";
var localAdapter = { saveCart: function (object) { var stringified = JSON.stringify(object); localStorage.setItem(cartId, stringified); return true; }, getCart: function () { return JSON.parse(localStorage.getItem(cartId)); }, clearCart: function () { localStorage.removeItem(cartId); }
};
var ajaxAdapter = { saveCart: function (object) { var stringified = JSON.stringify(object); // do an ajax request here }, getCart: function () { // do an ajax request -- recognize user by cookie / ip / session return JSON.parse(data); }, clearCart: function () { //do an ajax request here }
};
var storage = localAdapter;
var helpers = { getHtml: function (id) { return document.getElementById(id).innerHTML; }, setHtml: function (id, html) { document.getElementById(id).innerHTML = html; return true; }, itemData: function (object) { var count = object.querySelector(".count"), patt = new RegExp("^[1-9]([0-9]+)?$"); count.value = (patt.test(count.value) === true) ? parseInt(count.value) : 1; var item = { name: object.getAttribute('data-name'), price: object.getAttribute('data-price'), id: object.getAttribute('data-id'), count: count.value, total: parseInt(object.getAttribute('data-price')) * parseInt(count.value) }; return item; }, updateView: function () { var items = cart.getItems(), template = this.getHtml('cartT'), compiled = _.template(template, { items: items }); this.setHtml('cartItems', compiled); this.updateTotal(); }, emptyView: function () { this.setHtml('cartItems', '<p>Nothing to see here</p>'); this.updateTotal(); }, updateTotal: function () { this.setHtml('totalPrice', cart.total + '$'); }
};
var cart = { count: 0, total: 0, items: [], getItems: function () { return this.items; }, setItems: function (items) { this.items = items; for (var i = 0; i < this.items.length; i++) { var _item = this.items[i]; this.total += _item.total; } }, clearItems: function () { this.items = []; this.total = 0; storage.clearCart(); helpers.emptyView(); }, addItem: function (item) { if (this.containsItem(item.id) === false) { this.items.push({ id: item.id, name: item.name, price: item.price, count: item.count, total: item.price * item.count }); storage.saveCart(this.items); } else { this.updateItem(item); } this.total += item.price * item.count; this.count += item.count; helpers.updateView(); }, containsItem: function (id) { if (this.items === undefined) { return false; } for (var i = 0; i < this.items.length; i++) { var _item = this.items[i]; if (id == _item.id) { return true; } } return false; }, updateItem: function (object) { for (var i = 0; i < this.items.length; i++) { var _item = this.items[i]; if (object.id === _item.id) { _item.count = parseInt(object.count) + parseInt(_item.count); _item.total = parseInt(object.total) + parseInt(_item.total); this.items[i] = _item; storage.saveCart(this.items); } } }
};
document.addEventListener('DOMContentLoaded', function () { if (storage.getCart()) { cart.setItems(storage.getCart()); helpers.updateView(); } else { helpers.emptyView(); } var products = document.querySelectorAll('.product button'); [].forEach.call(products, function (product) { product.addEventListener('click', function (e) { var item = helpers.itemData(this.parentNode); cart.addItem(item); }); }); document.querySelector('#clear').addEventListener('click', function (e) { cart.clearItems(); });
});
LocalStorage Shopping App - Script Codes
LocalStorage Shopping App - Script Codes
Home Page Home
Developer Mihovil Ilakovac
Username infomiho
Uploaded October 31, 2022
Rating 3.5
Size 3,928 Kb
Views 12,144
Do you need developer help for LocalStorage Shopping App?

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!

Mihovil Ilakovac (infomiho) Script Codes
Name
Exploration of the geolocation
THE WAY to animate elements when in view
OE 6b. zad
Seminar teme
Nice responsive team page
OE 4. zad
Magic Wizard Concept
Rss Feed App design
OE 6. zad
OE 5. zad
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!