Geekwise Day 8 Assets

cart-controller.js

(function(angular) {

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

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

	    // Set the items on the scope to the items in the CartService
	    $scope.items;

	    $scope.addItem = function(item) {
		    // Add the item using the CartService

	    };

	    $scope.removeItem = function(item) {
		    // Remove the item using the CartService

	    };

	    $scope.cartSubtotal = function() {
		    // Returns the cartSubtotal from the CartService

	    };

	    $scope.cartTotal = function() {
		    // Returns the cartTotal from the CartService
	    }

    });

})(window.angular);

cart-service.js

(function(angular) {
	"use strict";

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

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

		// Private items variable
		var items = [];

		// Angular factories return service objects
		return {

			getItems: function() {
				// Returns items array

			},

			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
				// pushes the item onto the items array

			},

			updateItem: function(item) {
				// Updates the quantity of an item

			},

			removeItem: function(item_id) {
				// Removes an item from the items array
				// Can use angular.forEach(array, function(item, index) to splice

			},

			emptyCart: function() {
				// Sets items array to empty array

			},

			getItemCount: function() {
				// returns number of items, including item quantity

			},

			getCartSubtotal: function() {
				// Return the item quantity times item price for each item in the array
			},

			getCartTotal: function() {
				// Return the cartSubtotal plus shipping and handling
			}
		};

	});

})(window.angular);

cart.html

<div class="row">

	<h2>Your shopping cart</h2>

	<div class="col-sm-12">
		<table class="table table-hover">
			<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>
				<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="email" class="form-control">
				</td>
				<td class="col-sm-1 col-md-1 text-center"><strong ng-bind="item.isSpecial ? item.specialPrice : item.price | currency"></strong></td>
				<td class="col-sm-1 col-md-1 text-center"><strong ng-bind="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()">
						<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 ng-bind="cartSubtotal()"></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 ng-bind="cartTotal()"></strong></h3></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</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() {

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

				scope.cartSubtotal = function() {
					// Returns the subtotal form the CartService

				};

				scope.itemCount = function() {
					// Return the item count from the CartService
					return 1; // static value to display cart temporarily
				};
			}

		};
	});

})(window.angular);

mini-cart.html

<div class="row" ng-show="itemCount() > 0">
	<div class="col-sm-3 col-sm-offset-9 text-right">
		<i class="glyphicon glyphicon-shopping-cart"> </i> Total: {{cartSubtotal()}}: {{itemCount()}} items
		<a class="btn btn-success" ui-sref="cart" role="button">view cart</a>
	</div>
</div>

routes.js

.state('cart', {
	url: '/cart',
	controller: 'CartController',
	templateUrl: 'views/cart.html'
})