Geekwise2 Day 7 - Shopping Cart

add-cart-button.html

<button class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> Add to cart</button>

add-cart-button.js

(function(angular) {
	"use strict";
	
	var app = angular.module('Swagwise');
	
	// Inject the CartService
	app.directive('addCartButton', function() {
	
		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
			},
			replace: true,
			templateUrl: 'templates/add-cart-button.html',
			link: function(scope, elem, attr) {
				
				scope.addItem = function(item) {
					// Pass the item into the addItem method of the CartService
				};
			}
		
		};
	});

})(window.angular);

cart-controller.js

(function(angular) {
	"use strict";
	
	var app = angular.module('Swagwise');

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

		// Set the items on the scope to the items in the CartService using the getItems method
		$scope.items = {};
		
		$scope.addItem = function(item) {
			// Pass the item into the addItem method of the CartService
		};

		$scope.getItemCount = function() {
			// Return the item count from the CartService
		};
		
		$scope.getCartSubtotal = function() {
			// Return the subtotal using the getCartSubtotal method of the CartService
		};
	    	
		$scope.getCartTotal = function() {
			// Return the cart total using the getCartTotal methode of the CartService
		};
		
		$scope.removeItem = function(id) {
			// Pass the item id into the removeItem method of the CartService
		};
		
		$scope.emptyCart = function() {
			// Invoke the emptyCart method of the CartService
		}

		$scope.checkout = function() {
			// Invoke the checkout method of the CartService
		};

	});

})(window.angular);

cart-service.js

(function(angular) {
	"use strict";

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

	// Inject in $cookieStore, SwagService and app config
	app.factory('CartService', function() {

		// Private items object
		var items = {};
		
		// Update cookies
		function updateItemsCookie() {
			
		}

		// Angular factories return service objects
		return {

			getItems: function() {
				// Initialize itemsCookie variable
                		var itemsCookie;
				// Check if items object has been populated
		                if(!items.length) {
		                    // Populate items object from cookie
		                    
		                    // Check if cookie exists
		                    if(itemsCookie) {
		                        // Loop through cookie and get the item by it's id
		                        // Add each item to the items object and set it's quantity
		                        
		                    }
		                }
		                // Return the 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
				// pushes the item onto the items array
				
		                // Update cookie
                		updateItemsCookie();
			},

			removeItem: function(id) {
				// Removes an item from the items object
				
		                // Update cookie
		                updateItemsCookie();
			},

			emptyCart: function() {
				// Re-initialize items object to an empty object
		                items = {};
		                // Remove items cookie using $cookieStore
		                
			},

			getItemCount: function() {
				// Initialize total counter
		                var total = 0;
		                // Loop through items and increment the total by the item quantity
		                
		                // Returns number of items, including item quantity
		                return total;
			},

			getCartSubtotal: function() {
				// Initialize the total counter
		                var total = 0;
		                // Loop through the items and multiply the quantity by the item price and increment the total
		               
		                // Return the item quantity times item price for each item in the array
		                return total;
			},

			getCartTotal: function() {
				return this.getCartSubtotal();
			},

			checkout: function() {
				// Impliment the checkout
			}
				
		};

	});

})(window.angular);

mini-cart-directive.js

(function(angular) {
	"use strict";

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

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

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

				scope.getCartSubtotal = function() {
					// Returns subtotal from CartService
				};

				scope.getItemCount = function() {
					//Returns the item count from the CartService
				};
			}

		};
	});

})(window.angular);

mini-cart.html

<!-- Use ng-show to show if the items have been added to the cart -->
<div class="row">
	<div class="col-sm-4 col-sm-offset-8 text-right">
		<!-- Display the subtotal followed by the number of items in the cart -->
		<i class="glyphicon glyphicon-shopping-cart"></i> Subtotal: - items
		<a class="btn btn-success" ui-sref="cart" role="button">view cart</a>
	</div>
</div>