CODEWITHSUNDEEP
htmlangularjs
vennapusa
vennapusa

Reputation: 219

I want to provide user with an option of selecting the quantity of product for the cart in angular?

Here is my simple shopping cart where I have list of products and when I click on each item I get details and I have add to cart button in the details page which adds the product to cart and I also implemented remove cart logic.

See plunker with example

But I want to provide user with the option of selecting the quantity of the product, the user can increase or decrease the quantity? And also there should be limit for number of items in the cart!can anyone suggest how I can implement this?

It would be really helpful if someone suggests any more efficiency to be added to code which will be easy for the user and in a good structured way?

var app = angular.module("myApp", ["ngRoute"]);
app.controller('mobileController', function($scope) {
  $scope.items = [{
    name: 'Iphone',
    price: 70000,
    rating: '*****',
    image: 'http://i.imgur.com/hfMaGTN.png'
  }, {
    name: 'Oneplus',
    price: 60000,
    rating: '****',
    image: 'http://i.imgur.com/sBcs5ZE.jpg'
  }, {
    name: 'Samsung',
    price: 50000,
    rating: '***',
    image: 'http://i.imgur.com/8Bexxbf.jpg'
  }, {
    name: 'Sony',
    price: 40000,
    rating: '***',
    image: 'http://i.imgur.com/0c7PcX8.png'
  }, {
    name: 'Moto',
    price: 20000,
    rating: '****',
    image: 'http://i.imgur.com/HyWR1VE.png'
  }];
});

app.service("cartService", [function(){

  var cart = [];

  function getCart(){
    console.log(cart);
    return cart;
  }

  function addToCart(item){
    cart.push(item);
    console.log(cart);
  }

  return {
    getCart: getCart,
    addToCart: addToCart
  };

}]);

app.config(function($routeProvider) {
  $routeProvider

  .when("/store", {
       templateUrl : "store.html",
   })

 .when('/item/:itemName', {
      templateUrl: 'details.html',
      controller: 'ItemCtrl'
    })
    .when("/cart", {
      templateUrl: 'cartdetails.html',
      controller: 'cartCtrl'
    })
    .when("/checkout", {
      templateUrl: 'checkout.html',
      controller: 'cartCtrl'
    });


});

app.controller('ItemCtrl', ['$scope', '$routeParams', 'cartService',
  function($scope, $routeParams, cartService) {
    $scope.item = {};
    angular.forEach($scope.items, function(item) {
      if (item.name == $routeParams.itemName) {
        $scope.item.itemName = item.name;
        $scope.item.itemPrice = item.price;
        $scope.item.itemRating = item.rating;
        $scope.item.itemImage = item.image;
      }
    });

    $scope.addProduct = function(item){
      console.log(item);
      cartService.addToCart(item);
       alert(item.itemName+" added successfully") ;
    };

  }
]);
app.controller('cartCtrl', ['$scope','cartService',
  function($scope,cartService) {
    $scope.name="saisree";

    $scope.cartItems=cartService.getCart();

    $scope.getTotal = function(){
    var total = 0;
    for(var i = 0; i < $scope.cartItems.length; i++){
        var item = $scope.cartItems[i];
        total += item.itemPrice ;
    }
    return total;
};

  }
]);

Upvotes: 1

Views: 66

Answers (1)

Robert Sandu
Robert Sandu

Reputation: 673

I implemented a small part, just to get you started on the right direction: https://plnkr.co/edit/SDO5BlNfI9okDuwe4jrl?p=preview

var maxNumberOfProducts = 10;
var currentNumberOfProducts = 0;

The ideea is to store in the service the number of products you can have and the number of products you have in the cart. When the user tries to add a new product, you just have to verify if the number of products don't exceed the cart capacity. If you have any questions, please feel free to ask.

Upvotes: 0

Related Questions