5.1 App Screen 2(UI + Backend)

After logging in the user is redirected to the menu page as shown.

It has a add to cart to cart functionality. I have implemented the cart using the jquery.

We can also increase and decrease its quantity and corresponding prices are subtracted and added.

A code snippet from it.

$(function () {

var goToCartIcon = function($addTocartBtn){
var $cartIcon = $(“.my-cart-icon”);
var $image = $(‘<img width=”30px” height=”30px” src=”’ + $addTocartBtn.data(“image”) + ‘“/>’).css({“position”: “fixed”, “z-index”: “999”});
$addTocartBtn.prepend($image);
var position = $cartIcon.position();
$image.animate({
top: position.top,
left: position.left
}, 500 , “linear”, function() {
$image.remove();
});
}

$(‘.my-cart-btn’).myCart({
currencySymbol: ‘Rs’,
classCartIcon: ‘my-cart-icon’,
classCartBadge: ‘my-cart-badge’,
classProductQuantity: ‘my-product-quantity’,
classProductRemove: ‘my-product-remove’,
classCheckoutCart: ‘my-cart-checkout’,
affixCartIcon: true,
showCheckoutModal: true,
numberOfDecimals: 2,
cartItems: [
/* {id: 1, name: ‘product 1’, summary: ‘summary 1’, price: 10, quantity: 1, image: ‘masala.jpg’},
{id: 2, name: ‘product 2’, summary: ‘summary 2’, price: 20, quantity: 2, image: ‘images/img_2.png’},
{id: 3, name: ‘product 3’, summary: ‘summary 3’, price: 30, quantity: 1, image: ‘images/img_3.png’}
*/],
clickOnAddToCart: function($addTocart){
goToCartIcon($addTocart);
},
afterAddOnCart: function(products, totalPrice, totalQuantity) {
console.log(“afterAddOnCart”, products, totalPrice, totalQuantity);
},
clickOnCartIcon: function($cartIcon, products, totalPrice, totalQuantity) {
console.log(“cart icon clicked”, $cartIcon, products, totalPrice, totalQuantity);
},
checkoutCart: function(products, totalPrice, totalQuantity) {
var checkoutString = “Total Price: “ + totalPrice + “\nTotal Quantity: “ + totalQuantity;
checkoutString += “\n\n id \t name \t summary \t price \t quantity \t image path”;
<! — alert(checkoutString) →
console.log(“checking out”, products, totalPrice, totalQuantity);
},
getDiscountPrice: function(products, totalPrice, totalQuantity) {
console.log(“calculating discount”, products, totalPrice, totalQuantity);
return totalPrice * 0.5;
}
});

});
</script>

You can check out my app at app.radhika.hasura.me.

Next- App screen 3(UI + backend)

Please feel free to give comments and feedback.

Link to my App idea