<!DOCTYPE html>
<html ng-app="store">
<head>
<meta charset="utf-8" />
<title>Store Application</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" data-require="bootstrap@3.3.5" data-semver="3.3.5" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.css" rel="stylesheet" data-require="bootstrap@3.3.5" data-semver="3.3.5" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" data-require="bootstrap@3.3.5" data-semver="3.3.5"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js" data-require="bootstrap@3.3.5" data-semver="3.3.5"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js" data-require="angularjs@1.4" data-semver="1.4.4"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-cookies.min.js" data-require="angularjs@1.4" data-semver="1.4.4"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-sanitize.min.js" data-require="angularjs@1.4" data-semver="1.4.4"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js" data-require="angularjs@1.4" data-semver="1.4.4"></script>
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div ng-controller="StoreController">
<h1>STORE</h1>
<ul class="list-group text-center">
<li class="col-xs-6 col-md-3 col-sm-3 col-lg-3 list-group-item" ng-repeat="product in products">
<figure>
<img width="100" height="100" src="https://lh3.googleusercontent.com/-M_NiblLM-0A/Vh9eSY5LIeI/AAAAAAAAB_I/VBeV8X1V2HM/s144-Ic42/mac.jpg" />
<figcaption>
{{product.name}}
<h3>{{product.price | currency}}</h3>
</figcaption>
</figure>
<input class="btn btn-success" type="button" ng-click="addItemToCart(product)" value="BUY" />
</li>
</ul>
<div ng-show="cart.length !== 0">
<h1>CART-SHOW</h1>
<ul class="list-group">
<li class="list-group-item" ng-repeat="c in cart">
<h4>{{c.name}} | <span style="color:blue"> {{c.count}} </span>
| {{c.price*c.count | currency}}</h4>
<input class="btn btn-danger" type="button" ng-click="removeItemCart(c)" value="Remove" />
</li>
</ul>
Total : {{total | currency}}
</div>
</div>
</div>
</body>
</html>
(function(){
var app = angular.module('store', ['ngCookies']);
app.controller('StoreController', ['$scope','$cookies', function($scope,$cookies){
$scope.products = productsData;
$scope.cart = [];
$scope.total = 0;
/*
if ($cookieStore.get('cart') !== null) {
$scope.cart = $cookieStore.get('cart');
}
*/
if(!angular.isUndefined($cookies.get('total'))){
$scope.total = parseFloat($cookies.get('total'));
}
//Sepetimiz daha önceden tanımlıysa onu çekelim
if (!angular.isUndefined($cookies.get('cart'))) {
$scope.cart = $cookies.getObject('cart');
}
$scope.addItemToCart = function(product){
if ($scope.cart.length === 0){
product.count = 1;
$scope.cart.push(product);
} else {
var repeat = false;
for(var i = 0; i< $scope.cart.length; i++){
if($scope.cart[i].id === product.id){
repeat = true;
$scope.cart[i].count +=1;
}
}
if (!repeat) {
product.count = 1;
$scope.cart.push(product);
}
}
var expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 1);
$cookies.putObject('cart', $scope.cart, {'expires': expireDate});
$scope.cart = $cookies.getObject('cart');
$scope.total += parseFloat(product.price);
$cookies.put('total', $scope.total, {'expires': expireDate});
};
$scope.removeItemCart = function(product){
if(product.count > 1){
product.count -= 1;
var expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 1);
$cookies.putObject('cart', $scope.cart, {'expires': expireDate});
$scope.cart = $cookies.getObject('cart');
}
else if(product.count === 1){
var index = $scope.cart.indexOf(product);
$scope.cart.splice(index, 1);
expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 1);
$cookies.putObject('cart', $scope.cart, {'expires': expireDate});
$scope.cart = $cookies.getObject('cart');
}
$scope.total -= parseFloat(product.price);
$cookies.put('total', $scope.total, {'expires': expireDate});
};
}]);
var productsData = [{
id: 1,
name: 'product1',
price: 100.0,
image: ''
},{
id: 2,
name: 'product2',
price: 14.5,
image: ''
},{
id: 3,
name: 'product3',
price: 100.43,
image: ''
},{
id: 4,
name: 'product4',
price: 99.9,
image: ''
}];
})();