Geekwise Day 9 Assets

add-cart-button.html

<button type="button" class="btn btn-primary" ng-click="addItem(product)">Add to cart</button>

add-cart-button.js

(function(angular) {
    "use strict";

    var app = angular.module('MyStore');

    app.directive('msAddCart', function(CartService) {

        return {
            // E for Element
            // A for Attribute
            // C for Class
            restrict: 'E',
            scope: {
                // 3 types of bindings for scope properties
                // @ which is a string
                // & which is a one-way binding
                // = which is two-way binding
                product: '='
            },
            replace: true,
            templateUrl: 'templates/add-cart-button.html',
            link: function(scope, elem, attr) {
                scope.addItem = CartService.addItem;
            }

        };
    });

})(window.angular);

cart-controller.js

(function(angular) {

    var app = angular.module('MyStore');

	// Inject in the CartService
	app.controller('CartController', function($scope, CartService) {

		// Set the items on the scope to the items in the CartService
		$scope.items = CartService.getItems();

		$scope.getItemCount = CartService.getItemCount;

		$scope.removeItem = CartService.removeItem;

		$scope.emptyCart = CartService.emptyCart;

		$scope.cartSubtotal = CartService.getCartSubtotal;

		$scope.cartTotal = CartService.getCartTotal;

    });

})(window.angular);

cart-service.js

(function(angular) {
	"use strict";

	var app = angular.module('MyStore');

	app.factory('CartService', function() {

		// Private items variable
		var items = {};

		// Angular factories return service objects
		return {

			getItems: function() {
				// Returns items object
                		return items;
			},

			addItem: function(item) {
				// Checks if item already exists
				// If it exists, updates the quantity
				// If it doesn't exist, adds quantity property with value of 1 then
				// adds the item onto the items object
		                if(!items[item.guid]) {
		                    item.quantity = 1;
		                    items[item.guid] = item;
		                }else {
		                    items[item.guid].quantity += 1;
		                }
			},

			removeItem: function(item_id) {
                		delete items[item_id];
			},

			emptyCart: function() {
				// Sets items object to an empty object
                		items = {};
			},

			getItemCount: function() {
				// returns number of items, including item quantity
		                var total = 0;
		                angular.forEach(items, function(item) {
		                    total += parseInt(item.quantity);
		                });
		                return total;
			},

			getCartSubtotal: function() {
				// Return the item quantity times item price for each item in the items object
		                var total = 0;
		                angular.forEach(items, function(item) {
		                   total += parseInt(item.quantity) * parseFloat(item.isSpecial ? item.specialPrice : item.price);
		                });
		                return total;
			},

			getCartTotal: function() {
				// Return the cartSubtotal plus shipping and handling
		                var total = 0;
		                angular.forEach(items, function(item) {
		                    // TODO add shipping
		                    total += parseInt(item.quantity) * parseFloat(item.isSpecial ? item.specialPrice : item.price);
		                });
                		return total;
			}
		};

	});

})(window.angular);

cart.html

<div class="row">

	<h2>Your shopping cart</h2>

	<div class="col-sm-12">

        <div class="alert alert-warning" ng-show="!getItemCount()">
            <p>There are no items in your cart
                <a ui-sref="products" class="btn btn-default">
                    <span class="glyphicon glyphicon-shopping-cart"></span> Continue Shopping
                </a>
            </p>
        </div>

		<table class="table table-hover" ng-show="getItemCount()">
			<thead>
			<tr>
				<th>Product</th>
				<th>Quantity</th>
				<th class="text-center">Price</th>
				<th class="text-center">Total</th>
				<th>&nbsp;</th>
			</tr>
			</thead>
			<tbody>
			<!-- repeat of the items in the cart -->
			<tr ng-repeat="item in items">
				<td class="col-sm-8 col-md-6">
					<div class="media">
						<a class="thumbnail pull-left" ui-sref="product({guid: item.guid})">
							<img class="media-object" ng-src="{{item.thumbnail}}" style="width: 72px; height: 72px;"> </a>

						<div class="media-body">
							<h4 class="media-heading"><a ui-shref="product({guid: item.guid})" ng-bind="item.title"></a></h4>
							<h5 class="media-heading"> by <a href="#" ng-bind="item.manufacturer"></a></h5>
						</div>
					</div>
				</td>
				<td class="col-sm-1 col-md-1 text-center">
					<input type="input" class="form-control" ng-model="item.quantity">
				</td>
				<td class="col-sm-1 col-md-1 text-center"><strong>{{item.isSpecial ? item.specialPrice : item.price | currency}}</strong></td>
				<td class="col-sm-1 col-md-1 text-center"><strong>{{item.isSpecial ? item.specialPrice * item.quantity : item.price * item.quantity | currency}}</strong></td>
				<td class="col-sm-1 col-md-1">
					<button type="button" class="btn btn-danger" ng-click="removeItem(item.guid)">
						<span class="glyphicon glyphicon-remove"></span> Remove
					</button>
				</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td><h5>Subtotal</h5></td>
				<td class="text-right"><h5><strong>{{cartSubtotal() | currency}}</strong></h5></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td><h5>Estimated shipping</h5></td>
				<td class="text-right"><h5><strong></strong></h5></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td><h3>Total</h3></td>
				<td class="text-right"><h3><strong>{{cartTotal() | currency}}</strong></h3></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>
                    <button type="button" class="btn btn-danger" ng-click="emptyCart()">
                        <span class="glyphicon glyphicon-remove"></span> Empty Cart
                    </button>
				</td>
				<td>
					<a ui-sref="products" class="btn btn-default">
						<span class="glyphicon glyphicon-shopping-cart"></span> Continue Shopping
					</a>
				</td>
				<td>
					<button type="button" class="btn btn-success">
						Checkout <span class="glyphicon glyphicon-play"></span>
					</button>
				</td>
			</tr>
			</tbody>
		</table>

	</div>
</div>

mini-cart-directive.js

(function(angular) {
	"use strict";

	var app = angular.module('MyStore');

	// Inject in the CartService
	app.directive('msMiniCart', function(CartService) {

		return {
			scope: {
			},
			restrict: 'E',
			replace: true,
			templateUrl: 'templates/mini-cart.html',
			link: function(scope, elem, attr) {

				scope.cartSubtotal = CartService.getCartSubtotal;

				scope.itemCount = CartService.getItemCount;
			}

		};
	});

})(window.angular);