[shopping cart] [start]
This commit is contained in:
parent
a2e2d4bd19
commit
ab69029d4e
@ -70,16 +70,17 @@ $(document).ready(function() {
|
||||
// update login
|
||||
var full_name = getCookie("full_name");
|
||||
if(full_name) {
|
||||
$("#user-tools").html(repl('<a href="profile" title="My Profile" id="user-full-name">%(full_name)s</a> | \
|
||||
<a href="account" title="My Account">My Account</a> | \
|
||||
<!--<a href="cart" title="Shopping Cart"><i class="icon-shopping-cart"></i> (%(count)s)</a> | -->\
|
||||
<a href="server.py?cmd=web_logout" title="Sign Out"><i class="icon-signout"></i></a>', {
|
||||
full_name: full_name,
|
||||
count: getCookie("cart_count") || "0"
|
||||
}));
|
||||
$("#user-tools a").tooltip({"placement":"bottom"});
|
||||
$("#user-tools").addClass("hide");
|
||||
$("#user-tools-post-login").removeClass("hide");
|
||||
$("#user-full-name").text(full_name);
|
||||
}
|
||||
})
|
||||
|
||||
wn.cart.update_display();
|
||||
$("#user-tools a").tooltip({"placement":"bottom"});
|
||||
$("#user-tools-post-login a").tooltip({"placement":"bottom"});
|
||||
|
||||
$(window).on("storage", function() { wn.cart.update_display(); });
|
||||
});
|
||||
|
||||
// Utility functions
|
||||
|
||||
@ -162,3 +163,43 @@ if (typeof Array.prototype.map !== "function") {
|
||||
return a;
|
||||
};
|
||||
}
|
||||
|
||||
// shopping cart
|
||||
if(!wn.cart) wn.cart = {};
|
||||
$.extend(wn.cart, {
|
||||
get_count: function() {
|
||||
return Object.keys(this.get_cart()).length;
|
||||
},
|
||||
|
||||
add_to_cart: function(itemprop) {
|
||||
var cart = this.get_cart();
|
||||
cart[itemprop.item_code] = $.extend(itemprop, {qty: 1});
|
||||
this.set_cart(cart);
|
||||
console.log(this.get_cart());
|
||||
},
|
||||
|
||||
remove_from_cart: function(item_code) {
|
||||
var cart = this.get_cart();
|
||||
delete cart[item_code];
|
||||
this.set_cart(cart);
|
||||
console.log(this.get_cart());
|
||||
},
|
||||
|
||||
get_cart: function() {
|
||||
if( !("localStorage" in window) ) {
|
||||
alert("Your browser seems to be ancient. Please use a modern browser.");
|
||||
throw "ancient browser error";
|
||||
}
|
||||
|
||||
return JSON.parse(localStorage.getItem("cart")) || {};
|
||||
},
|
||||
|
||||
set_cart: function(cart) {
|
||||
localStorage.setItem("cart", JSON.stringify(cart));
|
||||
wn.cart.update_display();
|
||||
},
|
||||
|
||||
update_display: function() {
|
||||
$(".cart-count").text("( " + wn.cart.get_count() + " )");
|
||||
}
|
||||
});
|
@ -3,8 +3,17 @@
|
||||
{% block body %}
|
||||
<div class="container">
|
||||
<div class="pull-right" style="margin:4px;" id="user-tools">
|
||||
<a href="cart" title="Shopping Cart"><i class="icon-shopping-cart"></i>
|
||||
<span class="cart-count"></span></a> |
|
||||
<a id="login-link" href="login">Login</a>
|
||||
</div>
|
||||
<div class="pull-right hide" style="margin:4px;" id="user-tools-post-login">
|
||||
<a href="profile" title="My Profile" id="user-full-name"></a> |
|
||||
<a href="account" title="My Account">My Account</a> |
|
||||
<a href="cart" title="Shopping Cart"><i class="icon-shopping-cart"></i>
|
||||
<span class="cart-count"></span></a> |
|
||||
<a href="server.py?cmd=web_logout" title="Sign Out"><i class="icon-signout"></i></a>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
{% if banner_html %}<div class="row" style="margin-top: 30px;">
|
||||
<div class="col col-lg-12">{{ banner_html }}</div>
|
||||
|
@ -1,4 +1,5 @@
|
||||
<div class="col col-lg-3">
|
||||
<!-- TODO product listing -->
|
||||
<div class="col col-lg-12">
|
||||
<div style="height: 120px; overflow: hidden;">
|
||||
<a href="{{ page_name }}">
|
||||
{%- if website_image -%}
|
||||
|
@ -29,14 +29,18 @@
|
||||
</div>
|
||||
<div class="col col-lg-6">
|
||||
<h3 itemprop="name" style="margin-top: 0px;">{{ item_name }}</h3>
|
||||
<p class="help">Item Code: {{ name }}</p>
|
||||
<p class="help">Item Code: <span itemprop="productID">{{ name }}</span></p>
|
||||
<h4>Product Description</h4>
|
||||
<div itemprop="description">
|
||||
{{ web_long_description or web_short_description or
|
||||
"[No description given]" }}
|
||||
</div>
|
||||
<div class="item-price hide"></div>
|
||||
<div class="item-stock"></div>
|
||||
<div class="item-price-info" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
|
||||
<div class="item-price hide" itemprop="price"></div>
|
||||
<div class="item-stock" itemprop="availablity"></div>
|
||||
<button class="btn btn-primary item-add-to-cart hide">Add to Cart</button>
|
||||
<button class="btn btn-default item-remove-from-cart hide">Remove from Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if obj.doclist.get({"doctype":"Item Website Specification"}) -%}
|
||||
|
66
website/templates/js/cart.js
Normal file
66
website/templates/js/cart.js
Normal file
@ -0,0 +1,66 @@
|
||||
// ERPNext - web based ERP (http://erpnext.com)
|
||||
// Copyright (C) 2012 Web Notes Technologies Pvt Ltd
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
// js inside blog page
|
||||
|
||||
$(document).ready(function() {
|
||||
// make list of items in the cart
|
||||
wn.cart.render();
|
||||
});
|
||||
|
||||
// shopping cart
|
||||
if(!wn.cart) wn.cart = {};
|
||||
$.extend(wn.cart, {
|
||||
render: function() {
|
||||
var $cart_wrapper = $("#cart-added-items").empty();
|
||||
if(Object.keys(wn.cart.get_cart()).length) {
|
||||
$('<div class="row">\
|
||||
<div class="col col-lg-10 col-sm-10">\
|
||||
<div class="row">\
|
||||
<div class="col col-lg-3"></div>\
|
||||
<div class="col col-lg-9"><strong>Item Details</strong></div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="col col-lg-2 col-sm-2"><strong>Qty</strong></div>\
|
||||
</div><hr>').appendTo($cart_wrapper);
|
||||
|
||||
$.each(wn.cart.get_cart(), function(item_code, item) {
|
||||
item.image_html = item.image ?
|
||||
'<div style="height: 120px; overflow: hidden;"><img src="' + item.image + '" /></div>' :
|
||||
'{% include "app/website/templates/html/product_missing_image.html" %}';
|
||||
item.price_html = item.price ? ('<p>@ ' + item.price + '</p>') : "";
|
||||
|
||||
$(repl('<div class="row">\
|
||||
<div class="col col-lg-10 col-sm-10">\
|
||||
<div class="row">\
|
||||
<div class="col col-lg-3">%(image_html)s</div>\
|
||||
<div class="col col-lg-9">\
|
||||
<h4><a href="%(url)s">%(item_name)s</a></h4>\
|
||||
<p>%(description)s</p>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="col col-lg-2 col-sm-2">\
|
||||
<input type="text" placeholder="Qty" value="%(qty)s">\
|
||||
%(price_html)s\
|
||||
</div>\
|
||||
</div><hr>', item)).appendTo($cart_wrapper);
|
||||
});
|
||||
} else {
|
||||
$('<p class="alert">No Items added to cart.</p>').appendTo($cart_wrapper);
|
||||
}
|
||||
}
|
||||
});
|
@ -28,16 +28,41 @@ $(document).ready(function() {
|
||||
if(data.message.price) {
|
||||
$("<h4>").html(data.message.price.ref_currency + " "
|
||||
+ data.message.price.ref_rate).appendTo(".item-price");
|
||||
$(".item-price").toggle(true);
|
||||
$(".item-price").removeClass("hide");
|
||||
}
|
||||
if(data.message.stock==0) {
|
||||
$(".item-stock").html("<div class='help'>Not in stock</div>")
|
||||
$(".item-stock").html("<div class='help'>Not in stock</div>");
|
||||
}
|
||||
else if(data.message.stock==1) {
|
||||
$(".item-stock").html("<div style='color: green'>\
|
||||
<i class='icon-check'></i> Available (in stock)</div>")
|
||||
<i class='icon-check'></i> Available (in stock)</div>");
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
if(wn.cart.get_cart()[$('[itemscope] [itemprop="name"]').text().trim()]) {
|
||||
$(".item-remove-from-cart").removeClass("hide");
|
||||
} else {
|
||||
$(".item-add-to-cart").removeClass("hide");
|
||||
}
|
||||
|
||||
$("button.item-add-to-cart").on("click", function() {
|
||||
wn.cart.add_to_cart({
|
||||
url: window.location.href,
|
||||
image: $('[itemscope] [itemprop="image"]').attr("src"),
|
||||
item_code: $('[itemscope] [itemprop="name"]').text().trim(),
|
||||
item_name: $('[itemscope] [itemprop="productID"]').text().trim(),
|
||||
description: $('[itemscope] [itemprop="description"]').html().trim(),
|
||||
price: $('[itemscope] [itemprop="price"]').text().trim()
|
||||
});
|
||||
$(".item-add-to-cart").addClass("hide");
|
||||
$(".item-remove-from-cart").removeClass("hide");
|
||||
});
|
||||
|
||||
$("button.item-remove-from-cart").on("click", function() {
|
||||
wn.cart.remove_from_cart($('[itemscope] [itemprop="name"]').text().trim());
|
||||
$(".item-add-to-cart").removeClass("hide");
|
||||
$(".item-remove-from-cart").addClass("hide");
|
||||
});
|
||||
})
|
17
website/templates/pages/cart.html
Normal file
17
website/templates/pages/cart.html
Normal file
@ -0,0 +1,17 @@
|
||||
{% extends "app/website/templates/html/page.html" %}
|
||||
|
||||
{% block javascript %}
|
||||
{% include "app/website/templates/js/cart.js" %}
|
||||
{% endblock %}
|
||||
|
||||
{% set title="Shopping Cart" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="col col-lg-12">
|
||||
<h2>Shopping Cart</h2>
|
||||
<hr>
|
||||
<div id="cart-added-items">
|
||||
<!-- list of items in the cart will be generated using javascript -->
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
Loading…
x
Reference in New Issue
Block a user