Add price summary to cart

dist/js/cart.js

@@ -12,7 +12,6 @@ class Cart {
 		this.payments = payments || 1;
 		this.taxRate = tax || 0;
 		this.monthFee = 0;
-
 	}
 
 	//#region Item Methods ---------- //
@@ -136,14 +135,15 @@ class Cart {
 
 	//#region Price Methods --------- //
 	calcDiscount(discount = this.discount) {
-		return this.total * (1 - discount);
+		discount = this.subtotal * discount;
+		return discount;
 	}
 
 	// Calc. the interest tax (flat $) for the subtotal
 	calcInterest(payments = this.payments, interest = this.monthInterest) {
 		interest = (payments > 1)
-			? this.total * (1 + (interest * (payments - 1)))
-			: this.total;
+			? this.total * ((payments * interest) - interest)
+			: 0;
 		return interest;
 	}
 
@@ -152,9 +152,10 @@ class Cart {
 		return this.calcInterest(payments, interest) / payments;
 	}
 
-	// Calc. the total with tax rate applied
+	// Calc. the tax rate applied to the subtotal
 	calcTax(tax = this.taxRate) {
-		return this.total * (1 + tax);
+		tax = this.subtotal * tax;
+		return tax;
 	}
 	//#endregion
 
@@ -176,6 +177,8 @@ class Cart {
 		else
 			cartListElem.innerHTML = Cart.emptyCartHtml();
 
+		this.updateCartSummary();
+
 		// New prods aren't listened by materialize; initialize again
 		reinitMaterialize();
 
@@ -192,6 +195,21 @@ class Cart {
 		return nodes;
 	}
 
+	updateCartSummary() {
+		let summaryElem = document.querySelector('#cart-summary');
+		let subtotalElem = summaryElem.querySelector('.cart__summary-subtotal');
+		let interestElem = summaryElem.querySelector('.cart__summary-interest');
+		let taxElem = summaryElem.querySelector('.cart__summary-tax');
+		let discountElem = summaryElem.querySelector('.cart__summary-discount');
+		let totalElem = summaryElem.querySelector('.cart__summary-total');
+
+		subtotalElem.innerText = `$${this.subtotal.toFixed(2)}`;
+		interestElem.innerText = `$${this.calcInterest().toFixed(2)}`;
+		taxElem.innerText = `${this.taxRate}%`;
+		discountElem.innerText = `${this.discount}%`;
+		totalElem.innerText = `$${this.total.toFixed(2)}`;
+	}
+
 	// Update cart icons to show a badge with the prod count
 	static updateCartBadges() {
 		let cartBadges = document.querySelectorAll('.cart-badge');
@@ -223,13 +241,14 @@ class Cart {
 	//#region Cart status ----------- //
 	// After modifying a field, should call this
 	updateCart() {
+		// !FIXME: Interest calculated erroneously on multiple calls
 		this.subtotal = this.itemList.reduce((a, b) => a + b.getTotal(), 0);
 		this.totalQuantity = this.itemList.reduce((a, b) => a + b.getQuantity(), 0);
 		this.itemCount = this.itemList.length;
 		this.total = this.subtotal;
-		this.total = this.calcInterest();
-		this.total = this.calcDiscount();
-		this.total = this.calcTax();
+		this.total -= this.calcDiscount();
+		this.total += this.calcTax();
+		this.total += this.calcInterest();
 		this.monthFee = this.total / this.payments;
 
 		Cart.saveCart();
@@ -256,6 +275,8 @@ class Cart {
 		let itemListParsed = [];
 		let itemListRecovered = [];
 
+		let paymentsElem = document.querySelector('#cart-payments');
+
 		// Load cart properties
 		Object.assign(cartRecovered, cartParsed);
 
@@ -266,6 +287,26 @@ class Cart {
 		});
 		cartRecovered.itemList = itemListRecovered;
 
+		if (paymentsElem) {
+			// Get the payments element and add the event listener
+			paymentsElem.value = cartRecovered.payments;
+			paymentsElem.addEventListener('change', () => {
+				cartRecovered.payments =
+				cartRecovered.setPayments(paymentsElem.value);
+			});
+
+			// Then add interest% next to the payments count
+			paymentsElem.childNodes.forEach(child => {
+				let payments = child.value;
+				let interest =
+					Math.round(cartRecovered.monthInterest * (payments - 1) * 100);
+				if (payments > 1) {
+					child.innerHTML =
+						`${payments} <span class="cart__payments-interest"> (${interest}%)</span>`;
+				}
+			});
+		}
+
 		return cartRecovered;
 	}
 

dist/js/products.js

@@ -85,7 +85,7 @@ class Product {
 
 			if (result)
 				console.log(
-					`%c${result.name} found.`, `color: ${colors.info}`);
+					`%cFound: ${result.name}`, `color: ${colors.info}`);
 			else if (typeof product === 'string')
 				notFound(product);
 

dist/pages/cart.html

@@ -34,14 +34,49 @@
 	<main>
 		{{sidenav}}
 
-		<div class="main__wrapper cart-list__wrapper">
+		<div class="main__wrapper cart">
 			<a href="javascript:void(0)" id="empty-cart-btn" class="btn empty-cart-btn" onclick="activeCart.clearCart();">
 				<i class="material-icons left">delete</i>Empty cart
 			</a>
 			<!-- Cart items list -->
 			<ul id="cart-list" class="cart-list">
 				<!-- This list is populated with JS -->
 			</ul>
+			<div id="cart-summary" class="cart__summary">
+				<div class="input-field cart__summary-payments">
+					<select class="select-dropdown" id="cart-payments">
+						<option value="1" selected>1</option>
+						<option value="2">2</option>
+						<option value="4">4</option>
+						<option value="6">6</option>
+						<option value="8">8</option>
+						<option value="12">12</option>
+					</select>
+					<label>Payments</label>
+				</div>
+				<div class="cart__summary-details">
+					<div class="cart__summary-details-names">
+
+					</div>
+					<ul class="cart__summary-values">
+						<li class="cart__summary-values-li">
+							<span>Subtotal:</span><span class="cart__summary-subtotal"></span>
+						</li class="cart__summary-values-li">
+						<li class="cart__summary-values-li">
+							<span>Interest:</span><span class="cart__summary-interest"></span>
+						</li class="cart__summary-values-li">
+						<li class="cart__summary-values-li">
+							<span>Discount:</span><span class="cart__summary-discount"></span>
+						</li class="cart__summary-values-li">
+						<li class="cart__summary-values-li">
+							<span>Tax:</span><span class="cart__summary-tax"></span>
+						</li class="cart__summary-values-li">
+						<li class="cart__summary-values-li">
+							<span>Total:</span><span class="cart__summary-total"></span>
+						</li class="cart__summary-values-li">
+					</ul>
+				</div>
+			</div>
 		</div>
 	</main>