keystoneJS simple shopping cart part2

(1) AJAX & session

 

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;
    	
	});

(2) add my cart full view with purchase button.

 

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

(3) Create Order

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('/');
    }
};