Skip to content

Instantly share code, notes, and snippets.

@Med116

Med116/shopping_car.js

Created April 17, 2014 21:31
Show Gist options
  • Save Med116/11012751 to your computer and use it in GitHub Desktop.
Save Med116/11012751 to your computer and use it in GitHub Desktop.
Download ZIP
shopping cart code for backbone.js
Raw
shopping_car.js
var AppRouter = Backbone.Router.extend({
routes:{
"products.html":"products"
}
});
Backbone.history.start();
var NavView = Backbone.View.extend({
el:"nav",
render: function(){
var template_html = jQuery("#nav_template").html();
this.$el.html(_.template(template_html, {"nav":this.nav_obj}));
},
nav_obj: new Array(),
addLink:function(link, display_text){
this.nav_obj.push({link:"#" + link, display: display_text});
}
});
var HomeView = Backbone.View.extend({
el:"#main",
render: function(){
var template_html = jQuery("#home_template").html();
this.$el.html(_.template(template_html, {}));
}
});
var ProductView = Backbone.View.extend({
tagName : "li",
render: function(){
var template_html = jQuery("#product_template").html();
this.$el.html(_.template(template_html, this.model.toJSON()));
return this;
},
events:{
"click .add_to_cart": "add_to_cart"
},
add_to_cart:function(e){
console.log(this.model.get("title"));
shopping_cart_view.collection.add(this.model);
}
});
var ProductListView = Backbone.View.extend({
tagName:"ul",
render: function(){
this.collection.each(function(product){
var product_view = new ProductView({model:product});
this.$el.append(product_view.render().el);
}, this);
return this;
}
});
var ShoppingCartView = Backbone.View.extend({
el:"#shopping_cart",
initialize: function(){
this.collection.on("add", this.render, this);
},
render: function(){
var template_html = jQuery("#shopping_cart_template").html();
var total = this.getTotal();
this.$el.html(_.template(template_html, {products:this.collection.models, total:total}));
},
getTotal: function(){
var sum = 0;
_.each(this.collection.models, function(product){
sum += parseFloat(product.get("price"));
});
return parseFloat(sum).toFixed(2);
}
});
var ProductModel = Backbone.Model.extend({
});
var ProductCollection = Backbone.Collection.extend({
});
Raw
shopping_cart.html
<html>
<head>
<style>
#main{
margin-left:25%;
height:500px;
width:500px;
border:1px solid black;
}
#shopping_cart{
width:300px;
min-height:200px;
position:absolute;
top:0;
right:0;
border:1px solid red;
}
.price{
color:green;
float:right;
font-size:1.1em;
}
.width_all{
width:100%;
}
.shopping_cart_table{
border-collapse:collapse;
}
.shopping_cart_table td{
padding:2px;
border:1px solid black;
}
.header_row{
background:#ccc;
font-size:1.3em;
}
.checkout_btn{
height:2em;
text-align:center;
font-family:impact;
color:green;
font-variant:small-caps;
font-size:1.5em;
float:right;
margin:4px;
}
</style>
<script type="text/template" id="nav_template">
<% _.each(nav, function(items){ %>
<a href="<%= items.link %>"><%= items.display %></a><br>
<% }); %>
</script>
<script type="text/template" id="home_template">
<h1>Welcome to the Store</h1>
<p> Please browse our products</p>
</script>
<script type="text/template" id="shopping_cart_template">
<h1>Your Cart</h1>
<table class="shopping_cart_table width_all">
<tr class="header_row"><td>Product</td><td>Price</td></tr>
<% _.each(products, function(product){ %>
<tr>
<td> <%= product.get("title") %> </td>
<td> <span class="price"><%= product.get("price") %> </span> </td>
</tr>
<% }); %>
<tr class="header_row"><td>Total</td><td><span class="price">$<%= total %></span></td></tr>
</table>
<% if(total > 0){ %>
<a class="checkout_btn" href="#checkout">Checkout</a>
<% } %>
</script>
<script type="text/template" id="product_template">
<%= title %> : <span class="price"> $<%= price %> </span> <button class="add_to_cart" id="<%= title %>">Add To Cart</button>
</script>
</head>
<body>
<header>
<h1> Your Store Here </h1>
</header>
<nav>
</nav>
<div id="shopping_cart">
</div>
<div id="main">
</div>
<script type="text/javascript" src="jquery.js"></script>
<script src="underscore.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
<script src="shopping_cart.js" type="text/javascript"></script>
<script>
var router = new AppRouter();
router.on("route:products", function(){
console.log("routed to products");
var products_collection = getMockProductsCollection();
var products_view = new ProductListView({collection:products_collection});
$("#main").html(products_view.render().el);
});
var nav_view = new NavView();
nav_view.addLink("index.html", "home");
nav_view.addLink("products.html", "products");
nav_view.addLink("about.html", "about");
nav_view.render();
var home_view = new HomeView();
home_view.render();
var shopping_cart_collection = new ProductCollection();
var shopping_cart_view = new ShoppingCartView({collection:shopping_cart_collection});
shopping_cart_view.render();
function getMockProductsCollection(){
var p1 = new ProductModel({"title":"Blue Ray DVD Rambo", "price":"100.00"});
var p2 = new ProductModel({"title":"Tylenol", "price":"20.00"});
var p3 = new ProductModel({"title":"Cell Phone", "price":"150.00"});
var p4 = new ProductModel({"title":"Book", "price":"4.00"});
var p5 = new ProductModel({"title":"BatMobile", "price":"400.00"});
var p6 = new ProductModel({"title":"Kindle", "price":"120.00"});
var p7 = new ProductModel({"title":"Tea Kettle", "price":"30.50"});
var p_collection = new ProductCollection();
p_collection.add([p1,p2,p3,p4,p5,p6,p7]);
console.log(p_collection);
return p_collection;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment