when i add to cart the product gets added and shows 1 in cart but when i add same product again it doesn’t show in cart as 2 but during check out it shows 2 for same product. Is there missing something to show in the cart icon
here is my controller.js and html file
controller.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, WC, $localStorage, $rootScope, $ionicModal, $state){
$scope.$on('$ionicView.enter', function(e) {
console.log("userData", $localStorage.userData);
if($localStorage.userData){
$rootScope.userData = $localStorage.userData
}
});
$scope.logout = function(){
$localStorage.userData = undefined;
$rootScope.userData = undefined;
}
$localStorage.cart = [];
if($localStorage.cart)
$rootScope.cartCount = $localStorage.cart.length;
else
$rootScope.cartCount = 0;
.controller('ProductCtrl', function($scope, WC, $stateParams, $ionicSlideBoxDelegate, $localStorage, $rootScope){
var Woocommerce = WC.WC();
Woocommerce.get('products/' + $stateParams.productID, function(err, data, res){
if(err)
console.log(err);
$scope.product = JSON.parse(res).product;
$scope.images = JSON.parse(res).product.images;
console.log($scope.product);
$scope.$apply();
$ionicSlideBoxDelegate.update();
$ionicSlideBoxDelegate.loop(true);
Woocommerce.get('products/' + $stateParams.productID + '/reviews', function(error, dat, response){
if(error)
console.log(error);
$scope.reviews = JSON.parse(response).product_reviews;
})
})
$scope.addToCart = function(product){
var countIncreased = false;
$localStorage.cart.forEach(function(item, index){
if(item.id == product.id && !countIncreased){
console.log(item.id + "==" + product.id);
item.count += 1;
console.log("count increased by 1 for " + item.title);
countIncreased = true;
}
});
if(!countIncreased){
product.count = 1;
$localStorage.cart.push(product);
}
$rootScope.cartCount = $localStorage.cart.length;
}
});
product.html
<ion-view>
<ion-content>
<ion-list class="list-card">
<ion-item class="item-body">
<ion-slide-box show-pager="true" does-continue="true" pager-click="true" auto-play="true" slide-interval="4000">
<ion-slide ng-repeat="img in images"><center>
<img ng-src="{{img.src}}" style="width:350px !important; height:350px; margin:auto; display:block" /></center>
</ion-slide>
</ion-slide-box>
</ion-item>
</ion-list>
<div class="list card">
<div class="item item-body">
<div class="row">
<div class="col-50">
<h2>{{product.title}}</h2>
</div>
<div class="col-50">
<button class="button button-positive button-block" ng-click="addToCart(product)">Add To Cart</button>
</div>
</div>
<p ng-bind-html="product.description"> </p>
</div>
</div>
<div class="list card">
<div class="item item-body">
<div class="row">
<div class="col-50">
<h2>Price </h2>
<h2 ng-bind-html="product.price_html"></h2>
</div>
<div class="col-50">
<h2>Average Rating</h2>
<h2>{{product.average_rating}}</h2>
</div>
</div>
</div>
</div>
<div class="list card">
<div class="item item-body">
<h2>Product Specifications</h2>
<table style="min-width:100%;">
<tr class="row" ng-repeat = "attribute in product.attributes">
<td class="col-33"><b>{{attribute.name}}</b></td>
<td class="col-66"><span ng-repeat = "option in attribute.options">{{option}}</span></td>
</tr>
</table>
</div>
</div>
<div class="list card">
<div class="item item-body">
<h2>Product Reviews</h2>
<ion-list ng-repeat="review in reviews">
<ion-item class="item-divider">{{review.reviewer_name}}</ion-item>
<ion-item class="item-text-wrap">{{review.review}}</ion-item>
</ion-list>
</div>
</div>
</ion-content>
</ion-view>