Lets create a simple cart in right corner of nav bar.add this code in temples/layouts/default.jade after Sign in.
else
li: a(href='/keystone/signin') Sign In
li: a(href='/mycart')
div(class="row")
div(class="col-md-6") MyCart
div(class="col-md-6" id="cart_total")=sachincount
//- BODY
#body
And add a button called add to cart in templates/views/product.jade. and also load a client side Javascript called cart.js. Similarly you can add remove_item. function also.
extends ../layouts/default
block content
.container
h1= product.name
h2='$ '+ product.price
h3=product.description
< button class="btn btn-primary" onclick="add_to_cart('#{product.id}','#{product.price}')">Add to Cart</ button >
block js
script(src='/js/cart.js')
and a new client side Javascript file at public/js/cart.js. Add add_to_cart functio there.
function add_to_cart(product_id,product_price){
var total = parseFloat($('#cart_total').html());
total += parseFloat(product_price);
$.get("/cartadd?product_id="+product_id, function(string) {
$('#cart_total').html(total);
})
}
the cartadd page handler is very simple. we just add the product object to session.
var keystone = require('keystone');
exports = module.exports = function(req, res) {
var q = keystone.list('Product').model.findById(req.query.product_id);
q.exec(function(err, result) {
var product = result;
req.session.cart.push(result);
res.send('success');
});
};
in initLocals at routes/views/middleware.js we need to calculate total cart value so that it can be used in default.jade to be visible on all the page of this site.
res.locals.sachincount = 0;
req.session.cart.forEach( function (product)
{
res.locals.sachincount += product.price;
});
Here is the mycart router where we list all the product from cart object in session.
var keystone = require('keystone');
var Product = keystone.list('Product');
exports = module.exports = function(req, res) {
var view = new keystone.View(req, res);
var locals = res.locals;
// Set locals
locals.section = 'mycart';
locals.title = 'mycart';
locals.products = req.session.cart;
// Render the view
view.render('mycart');
};
and here is the simple Jade file for it.
extends ../layouts/default
include ../mixins/product
block content
.container
h1 My Cart
.blog
each post in products
ul
+product(post)
a(class='btn btn-primary',href='/purchase') Purchase
now just add a handler for purchase button and in this handler create order object.
var keystone = require('keystone');
var Order = keystone.list('orders');
exports = module.exports = function(req, res) {
var view = new keystone.View(req, res);
var locals = res.locals;
if(req.session.cart !=undefined ){
mycart_pro_ids = [];
req.session.cart.forEach( function (product) {
mycart_pro_ids.push(product._id);
});
var newOrder = Order.model({customer: req.user.id,products: mycart_pro_ids,});
updater = newOrder.getUpdateHandler(req, res, {
errorMessage: 'There was an error creating your order:'
});
updater.process(req.body, {
flashErrors: true,
logErrors: true,
}, function(err) {
if (err) {
} else {
req.session.cart=[];
res.redirect('/myorders')
}
});
}else{
res.redirect('/');
}
};