Add to Cart Functionality with AngularJS: Implementation Guide and Tutorial

Rumman Ansari   Software Engineer   2024-08-05 06:07:31   320  Share
Subject Syllabus DetailsSubject Details
☰ TContent
☰Fullscreen

Table of Content:

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.