5.1 App Screen 2(UI + Backend)

Radhika Sharma
Jul 20, 2017 · 2 min read

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

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade