Simple shopping cart using RactiveJS

Developer
Christine
Size
6,642 Kb
Views
68,816
  1. Simple shopping cart using RactiveJS Previews
  2. Simple shopping cart using RactiveJS HTML Codes
  3. Simple shopping cart using RactiveJS CSS Codes
  4. Simple shopping cart using RactiveJS JS Codes

How do I make an simple shopping cart using ractivejs?

A simple exercise to learn the basic of RactiveJS.. What is a simple shopping cart using ractivejs? How do you make a simple shopping cart using ractivejs? This script and codes were developed by Christine on 09 August 2022, Tuesday.

Simple shopping cart using RactiveJS Previews
IQ Test

Simple shopping cart using RactiveJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple shopping cart using RactiveJS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<main class="main">	<div class="wrapper cf"> <div class="box latest-products"> <h1>Our latest products</h1> <ul class="products-list cf"></ul> </div> <div class="box cart"> <h1>My Cart</h1> <ul class="cart-list"></ul> </div> <div class="box filters"> <h1>Filters</h1> <h2>Mealtimes</h2> <ul class="categories-list"></ul> </div> </div>	</main>	<script type="text/ractive" id="product_item">	{{#each products}}	<li class="{{ hidden ? 'hidden' : '' }} {{ in_cart ? 'in-cart' : '' }}">	<a class="products-list__item" href="#/product/{{id}}">	<h3 class="products-list__item-name">{{name}}</h3>	<img class="products-list__item-image" src="{{image}}/{{id}}" /> <span class="products-list__item-price">$ {{price}}</span>	{{#if in_cart}}	<span class="products-list__item-buy fa fa-shopping-cart discard" on-click="discard" title="Remove from cart"></span>	{{else}}	<span class="products-list__item-buy fa fa-shopping-cart" on-click="add" title="Add to cart"></span>	{{/if}}	</a>	</li>	{{/each}}	</script>	<script type="text/ractive" id="cart_item">	{{#if products}}	{{#each products:i}}	<li class="cart-list__item cf"> <div class="cart-list__item-counter"> <span class="fa fa-plus" on-click="plus{{i}}"></span> <span class="cart-list__item-counter-quantity">{{quantity}}</span> <span class="fa fa-minus" on-click="minus{{i}}"></span> </div>	<img class="cart-list__item-image" src="{{image}}/{{id}}/" alt="{{name}}" />	<span class="cart-list__item-name">{{name}}</span>	<span class="cart-list__item-price">$ {{price}}</span>	<span class="cart-list__item-discard discard-from-cart fa fa-lg fa-trash" on-click="discard:{{i}}"></span>	</li>	{{/each}}	<li class="cart-list__subtotal cf">	<span class="cart-list__subtotal-caption">Subtotal</span>	<span class="cart-list__subtotal-number">$ {{subtotal}}</span>	</li>	{{else}}	<li class="cart-list__empty">Your shopping cart is empty.</li>	{{/if}}	</script>	<script type="text/ractive" id="categories_item">	{{#each categories}}	<li class="categories-list__item {{ active ? 'active' : '' }}" on-click="toggle">{{name}}</li>	{{/each}}	</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple shopping cart using RactiveJS - Script Codes CSS Codes

@import "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css";
@import "http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700";
*,
*:before,
*:after { -ms-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; outline: 0;
}
html,
body { height: 100%;
}
.cf:before,
.cf:after { content: " "; display: table;
}
.cf:after { clear: both;
}
.cf { *zoom: 1;
}
.f-left { float: left;
}
.f-right { float: right;
}
.table { display: table; vertical-align: middle; height: inherit;
}
.table > * { display: table-cell; vertical-align: middle;
}
.w-wide { width: 700px;
}
.w-small { width: 200px;
}
.p-0 { padding: 0;
}
.p-5 { padding: 5px;
}
.p-10 { padding: 10px;
}
.p-20 { padding: 20px;
}
.p-30 { padding: 30px;
}
.m-0 { margin: 0;
}
.m-5 { margin: 5px;
}
.m-10 { margin: 10px;
}
.m-20 { margin: 20px;
}
.m-30 { margin: 30px;
}
/**	UI
**/
a { color: #0098C8; text-decoration: none;
}
a:focus,
a:hover { text-decoration: underline; opacity: .8;
}
fieldset { display: block; border: none;
}
input { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; padding: 5px; border: solid 1px transparent; color: #0098C8; border-bottom-color: rgba(0, 0, 0, 0.2); font-weight: bold;
}
input:focus { border-bottom-color: currentcolor;
}
.box { margin: 10px 0 0; background: white; border: solid 1px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05); overflow: hidden;
}
.box-wide { width: 700px;
}
.box-small { width: 280px;
}
.box h1 { padding: 5px 10px; margin-bottom: 10px; border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}
.box h2 { padding: 5px 10px; color: #0098C8;
}
body { margin: 0; padding-top: 20px; font-family: "Open Sans", Arial, sans-serif; font-size: 12px; background: #EEE; color: #555;
}
.main-content,
.sidebar-content { padding: 0 5px;
}
.main-content h1,
.sidebar-content h1 { margin: 0 -5px;
}
.latest-products { width: 800px; margin: 10px 0; float: left;
}
.latest-products .products-list { list-style-type: none;
}
.latest-products .products-list li.hidden { display: none;
}
.latest-products .products-list li.in-cart .discard { background: tomato;
}
.latest-products .products-list__item { position: relative; display: block; width: 181px; height: 181px; float: left; margin: 9px;
}
.latest-products .products-list__item.in-cart .discard { background: tomato;
}
.latest-products .products-list__item-name { position: absolute; z-index: 2; top: 0; left: 0; width: inherit; padding: 10px; background: rgba(0, 0, 0, 0.4); color: white; font-weight: normal;
}
.latest-products .products-list__item-image { position: absolute; z-index: 1; top: 0; left: 0; display: block; width: inherit; height: inherit; background: rgba(0, 0, 0, 0.1);
}
.latest-products .products-list__item-price { position: absolute; z-index: 3; bottom: 0; left: 0; padding: 6px; font-size: 1.25em; color: white; background: #b3b300;
}
.latest-products .products-list__item-buy { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; position: absolute; z-index: 3; bottom: 0; right: 0; background: #0098C8; color: white; padding: 13px; opacity: 0;
}
.latest-products .products-list__item:hover span { opacity: 1;
}
.cart { width: 390px; margin: 10px 0 0; float: right;
}
.cart .cart-list { list-style-type: none; padding: 10px 0;
}
.cart .cart-list__empty { margin: 10px; padding: 10px; text-align: center; background: #CFC; font-weight: bold; color: orange; border-bottom: solid 2px rgba(0, 0, 0, 0.1);
}
.cart .cart-list__subtotal { border-top: solid 1px rgba(0, 0, 0, 0.15); font-size: 1.2em;
}
.cart .cart-list__subtotal > * { float: left; display: block;
}
.cart .cart-list__subtotal-caption,
.cart .cart-list__subtotal-number { text-align: right; padding: 2.5px 7px; font-weight: bold;
}
.cart .cart-list__subtotal-caption { width: 281px;
}
.cart .cart-list__subtotal-number { width: 75px;
}
.cart .cart-list__item { position: relative; padding: 5px 10px; border-bottom: solid 1px rgba(0, 0, 0, 0.05);
}
.cart .cart-list__item:last-child { border-bottom: none;
}
.cart .cart-list__item > * { float: left; display: block;
}
.cart .cart-list__item-counter { width: 40px; text-align: center;
}
.cart .cart-list__item-counter > span { display: block; width: inherit; padding: 1.5px;
}
.cart .cart-list__item-counter .fa { opacity: .3; cursor: pointer;
}
.cart .cart-list__item-counter:hover .fa { opacity: 1;
}
.cart .cart-list__item-counter-quantity { font-weight: bold;
}
.cart .cart-list__item-image { width: 50px; height: 50px; border-radius: 3px;
}
.cart .cart-list__item-name { width: 180px; padding: 16px 7px; font-size: 1.1em;
}
.cart .cart-list__item-price { width: 75px; text-align: right; padding: 16px 7px;
}
.cart .cart-list__item-discard { width: 22px; padding: 6px 0; margin: 13px 0; text-align: center; opacity: 0; cursor: pointer;
}
.cart .cart-list__item:hover .discard-from-cart { opacity: .6;
}
.filters { width: 390px; margin: 10px 0 0; float: right;
}
.filters .categories-list { list-style-type: none; padding: 0 10px 10px;
}
.filters .categories-list__item { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; padding: 0 3px; cursor: pointer;
}
.filters .categories-list__item.active { font-weight: bold;
}
@media (min-width: 900px) { .wrapper { max-width: 1200px; margin: 0 auto; }
}

Simple shopping cart using RactiveJS - Script Codes JS Codes

$(function () { var ProductList = new Ractive({ el: '.products-list', template: '#product_item', data: {products: hardcodedProducts} }); var Cart = new Ractive({ el: '.cart-list', template: '#cart_item', data: { products: hardcodedCartProducts, subtotal: 0 } }); var Categories = new Ractive({ el: '.categories-list', template: '#categories_item', data: {categories: hardcodedCategories} }); ProductList.on({ add: function (event) { this.set(event.keypath + '.in_cart', true); Cart.push('products', event.context); }, discard: function (event) { this.set(event.keypath + '.in_cart', false); Cart.get('products').forEach(function (product, index) { if (event.context.id === product.id) { Cart.splice('products', index, 1); } }); } }); Cart.on({ plus: function (event, index) { var quantity = this.get(event.keypath + '.quantity'); if (quantity === 9999) return; this.set(event.keypath + '.quantity', ++quantity); }, minus: function (event, index) { var quantity = this.get(event.keypath + '.quantity'); if (quantity === 1) return; this.set(event.keypath + '.quantity', --quantity); }, discard: function (event, index) { ProductList.get('products').forEach(function (product, index) { if (event.context.id === product.id) { ProductList.set('products.' + index + '.in_cart', false); } }); this.splice('products', index, 1); } }); Cart.observe('products', function (newValue, oldValue, keypath) { var subtotal = 0; this.get('products').forEach(function (product, index) { subtotal += parseFloat(product.price.replace(',', '.')) * product.quantity; }); this.set('subtotal', (subtotal.toFixed(2)+'').replace('.', ',')); }); Categories.on({ toggle: function (event) { if (event.context.active) { return; } this.set('categories.*.active', false); this.set(event.keypath + '.active', true); ProductList.get('products').forEach(function (product, index) { ProductList.set('products.' + index + '.hidden', event.context.id !== 1 && event.context.id !== product.category); }); } });
});
/**	POJOS
**/
var hardcodedProducts = [	{	id: 1,	name: 'Product #1',	image: 'http://lorempixel.com/150/150/food',	category: 3,	price: '13,20',	in_cart: true,	hidden: false, quantity: 1	},	{	id: 4,	name: 'Product #4',	image: 'http://lorempixel.com/150/150/food',	category: 4,	price: '6,66',	in_cart: false,	hidden: false, quantity: 1	},	{	id: 6,	name: 'Product #6',	image: 'http://lorempixel.com/150/150/food',	category: 3,	price: '5,50',	in_cart: false,	hidden: false, quantity: 1	},	{	id: 8,	name: 'Product #8',	image: 'http://lorempixel.com/150/150/food',	category: 4,	price: '99,99',	in_cart: false,	hidden: false, quantity: 1	},	{	id: 10,	name: 'Product #10',	image: 'http://lorempixel.com/150/150/food',	category: 2,	price: '1,75',	in_cart: false,	hidden: false, quantity: 1	},	{	id: 7,	name: 'Product #7',	image: 'http://lorempixel.com/150/150/food',	category: 2,	price: '4,50',	in_cart: false,	hidden: false, quantity: 1	},	{	id: 9,	name: 'Product #9',	image: 'http://lorempixel.com/150/150/food',	category: 3,	price: '10,10',	in_cart: false,	hidden: false, quantity: 1	},	{	id: 2,	name: 'Product #2',	image: 'http://lorempixel.com/150/150/food',	category: 4,	price: '3,60',	in_cart: false,	hidden: false, quantity: 1	}
];
var hardcodedCartProducts = [	{	id: 1,	name: 'Product #1',	image: 'http://lorempixel.com/150/150/food',	price: '13,20', quantity: 1	}
];
var hardcodedCategories = [	{	id: 1,	name: "All",	active: true	},	{	id: 2,	name: "Breakfast",	active: false	},	{	id: 3,	name: "Lunch",	active: false	},	{	id: 4,	name: "Dinner",	active: false	}
];
Simple shopping cart using RactiveJS - Script Codes
Simple shopping cart using RactiveJS - Script Codes
Home Page Home
Developer Christine
Username christinegp
Uploaded August 09, 2022
Rating 3
Size 6,642 Kb
Views 68,816
Do you need developer help for Simple shopping cart using RactiveJS?

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!

Christine (christinegp) Script Codes
Name
A Pen by christine
Searchable text
Eventful
Javascript Text Output
Datatable example
Progress bar
Itinerary
Password Confirmation template
Atlassian template
Multistep form
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!