Table of Contents
Add to Cart Functionality with AngularJS: Implementation Guide and Tutorial
Assignment: Perform Add to Cart with AngularJS
1. Perform Add to Cart with AngularJS
Add more features to the shopping application Pick2get:
• Add a field to capture the quantity to be ordered.
• Create an Add to cart button with a click function AddToCart (product), and return the success string with the alert Product added to Cart successfully.
• Enable Add to cart(change the image color over the button to orange) when the quantity field is > 0. Disable (change the image color over the button to grey) when the field is 0 or null.
Solution
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script>
<script src="index.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="topnav">
<a href="#" style="float:right;font-size:20px"><i>Check out</i></a>
<a href="#" style="float:right; font-size:20px"><i>Sign In</i></a>
<a href="#/Home" style="float:left; width:150px;" class="active"><b><i>Pick2get</i></b></a>
</div>
<br />
<div class="search_drop_down">
<select id="month" class="select select-styled" >
<option value="hide">-- Brand --</option>
<option ng-repeat="pdt in products" >{{pdt.brand}}</option>
</select>
<select id="year" class="select select-styled" >
<option value="hide">-- Price --</option>
<option value="low_price_to_high">Low Price to High</option>
<option value="hign_price_to_low">High Price to Low</option>
</select>
<input class="search" placeholder="Search" size="40" type="text">
</div>
<div class="product_box" ng-repeat="pdt in products">
<div class="single_1">
<div class="container">
<div class="discount">
<div class="discount_badge">{{pdt.discount}}</div>
<span class="discount_text">Discount</span>
</div>
<img src="img/dummy_product.jpg" />
</div>
</div>
<div class="single_2">
<div class="prod_desc">
<span class="pdt_name">{{pdt.name}}</span>
<div class="pdt_details_2_col">
<span class="brand">Brand</span>
<span class="brand_name">{{pdt.brand}}</span>
</div>
<div class="pdt_details_2_col">
<span class="brand">Price</span>
<span class="brand_name">{{pdt.price}}</span>
</div>
</div>
</div>
<div class="single_3">
<div class="quantity_sec">
<label>Quantity</label>
<br>
<input placeholder="Quantity" type="number" ng-model="pdt.quantity" >
</div>
</div>
<div class="single_4">
<input type="image" src="img/greyCart.png" alt="Submit" width="48" height="48" ng-show="pdt.quantity<1?true:false" />
<input type="image" src="img/orangeCart.png" alt="Submit" width="48" height="48" ng-hide="pdt.quantity<1?true:false" ng-click="addToCart(pdt);"/>
</div>
</div>
</body>
</html>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var imgPath = "img/";
$scope.quantity=0;
$scope.products = [
{
name : "Happy Cycle",
discount:"20%",
price: "2500",
brand : "Wheels",
addedToCart:false,
image : imgPath + "cycle.jpg",
quantity:0
},
{
name : "Kids Shoes",
discount:"10%",
price: "1460",
brand : "Feel Good",
addedToCart:false,
image : imgPath + "shoes.jpg",
quantity:0
},
{
name : "Polo Baby Care Dress",
discount:"20%",
price: "2500",
brand : "Super Hero",
addedToCart:false,
image : imgPath + "shirt.jpg",
quantity:0
},
]
//Add your code here for addToCart function which returns success message
$scope.addToCart = function(product) {
if (product.quantity > 0) {
product.addedToCart = true;
alert(product.name + " added to cart successfully!");
}
};
});
If you will run above code, you will get below output.
