Add to cart DOM functionality

notSagyo · Feb 4, 2022 · dc789cf · dc789cf
1 parent 8e133fb
commit dc789cf
Show file tree

Hide file tree

Showing 17 changed files with 5,750 additions and 39 deletions.
diff --git a/dist/css/main.css b/dist/css/main.css
diff --git a/dist/img/belt.webp b/dist/img/belt.webp
diff --git a/dist/img/img b/dist/img/img
diff --git a/dist/img/jeans.webp b/dist/img/jeans.webp
diff --git a/dist/img/shirt.webp b/dist/img/shirt.webp
diff --git a/dist/img/shoes.webp b/dist/img/shoes.webp
diff --git a/dist/index.html b/dist/index.html
@@ -19,7 +19,7 @@
 		<nav>
 			<div class="nav-wrapper container">
 				<a href="#!" class="brand-logo truncate">E-Commerce</a>
-				<!-- TODO: fix this icon -->
+				<!-- FIXME: fix this icon -->
 				<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
 				<ul class="right hide-on-med-and-down">
 					<li><a class="waves-effect waves-classic" href="#">HOME</a></li>
@@ -60,7 +60,7 @@ <h1 class="h1">E-Commerce</h1>
 	<footer class="page-footer">
 		<div class="container">
 			<div class="row">
-				<div class="col l4 s12">
+				<div class="col-sm-12 col-lg-4">
 					<h5 class="white-text">Links</h5>
 					<ul>
 						<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
@@ -69,7 +69,7 @@ <h5 class="white-text">Links</h5>
 						<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
 					</ul>
 				</div>
-				<div class="col l6 s12">
+				<div class="col-sm-12 col-lg-6">
 					<h5 class="white-text">E-Commerce</h5>
 					<p class="grey-text text-lighten-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque voluptates nam nihil excepturi est quos itaque. Dolorum, mollitia natus?</p>
 				</div>

diff --git a/dist/js/cart.js b/dist/js/cart.js
@@ -1,3 +1,4 @@
+
 // TODO: convert to ES6 classes?
 // TODO: manipulate quantity from cart
 // Stores cart status and (todavia no) item list
@@ -75,6 +76,7 @@ const Cart = function({discount, payments, monthInterestRate} = {}) {
 		_total = this.calcDiscount(_discount);
 		_monthFee = _total / _payments;
 
+		this.updateDom();
 		if (debugMode)
 			console.log(`Cart price now is: $${this.getTotal()}`);
 		return this.total;
@@ -138,6 +140,24 @@ const Cart = function({discount, payments, monthInterestRate} = {}) {
 	}
 	//#endregion
 
+	//#region DOM Methods
+	this.updateDom = () => {
+		// Update cart badges to show product count
+		let cartBadges = document.querySelectorAll('.cart-badge');
+		if (_productCount > 0) {
+			cartBadges.forEach(elem => {
+				elem.innerText = _productCount
+				elem.classList.remove('hide');
+			});
+		} else {
+			cartBadges.forEach(elem => {
+				if (!elem.classList.contains('hide'))
+					elem.classList.add('hide');
+			});
+		}
+	}
+	//#endregion
+
 	//#region Get / Set ------------- //
 	this.setItemList = (items) => {
 		if (!Array.isArray(items) || !items.every(x => x instanceof Product)) {
@@ -218,3 +238,10 @@ const Cart = function({discount, payments, monthInterestRate} = {}) {
 		console.groupEnd();
 	}
 };
+
+// Active cart used globally
+let activeCart = new Cart();
+function addToCart(product) {
+	activeCart.addItem(product);
+	M.toast({text: `${product.name} added to cart.`, displayLength: 2000});
+}
diff --git a/dist/js/main.js b/dist/js/main.js
@@ -4,8 +4,9 @@ let debugMode = true;
 // Create new cart and product list
 let productList = new ProductList();
 let cart = new Cart();
+activeCart = cart;
 
-//#region Interactive --------------------------------------------------- //
+//#region Interactive ------------------------------------------------------- //
 // let interactiveCart = () => {
 // 	let name = prompt('Para agregar un producto al carrito ingrese el nombre:');
 
@@ -30,19 +31,19 @@ let cart = new Cart();
 // }
 //#endregion
 
-//#region Example --------------------------------------------------------//
-let shirt = new Product('T-Shirt', 15, 'This is a simple T-Shirt.');
-let jeans = new Product('Jeans', 30, 'These are simple Jeans.');
-let shoes = new Product('Shoes', 50, 'These are simple Shoes.');
-let belt = new Product('Belt', 20, 'This is a simple Belt.');
+//#region Example ----------------------------------------------------------- //
+let shirt = new Product('T-Shirt', 15, 'This is a simple T-Shirt.', '..//img/shirt.webp');
+let jeans = new Product('Jeans', 30, 'These are simple Jeans.', '..//img/jeans.webp');
+let shoes = new Product('Shoes', 50, 'These are simple Shoes.', '..//img/shoes.webp');
+let belt = new Product('Belt', 20, 'This is a simple Belt.', '..//img/belt.webp');
 let prods = [shirt, jeans, shoes, belt];
 
 productList.setProducts(prods);
 productList.updateDom();
 
-cart.setItemList(prods);
-cart.removeItem(belt);
-cart.removeItem(shoes);
+// cart.setItemList(prods);
+// cart.removeItem(belt);
+// cart.removeItem(shoes);
 //#endregion
 
 // Log cart status

diff --git a/dist/js/products.js b/dist/js/products.js
@@ -85,6 +85,14 @@ const ProductList = function(products) {
 		this.productsHTML = this.getHTML();
 		productListElem.innerHTML = this.productsHTML;
 
+		// Add add to cart function
+		let productElems = document.querySelectorAll('.product-li__add');
+		console.log(productElems);
+		for (const key in this.products) {
+			productElems[key].addEventListener(
+				'click', () => addToCart(this.products[key]))
+		}
+
 		// New products aren't zoomable; initialize zoomable elements again
 		initMaterialboxed();
 	}
@@ -115,10 +123,10 @@ function productToHTML(product) {
 					<!-- Price -->
 					<span class="product-li__price">$${price}</span>
 					<!-- Add to cart -->
-					<a href="#" class="product-li__add"><i class="material-icons">add_shopping_cart</i></a>
+					<a href="javascript://addToCart" class="product-li__add indigo-text text-accent-2"><i class="material-icons">add_shopping_cart</i></a>
 				</div>
 			</div>
 		</li>
 		`;
 	return template;
-}
+}
diff --git a/dist/pages/products.html b/dist/pages/products.html
@@ -25,7 +25,12 @@
 					<li><a class="waves-effect waves-classic" href="products.html">PRODUCTS</a></li>
 					<li><a class="waves-effect waves-classic" href="contact.html">CONTACT</a></li>
 					<li><a class="waves-effect waves-classic" href="about.html">ABOUT</a></li>
-					<li><a class="waves-effect waves-classic" href="cart.html"><i class="material-icons">shopping_cart</i></a></li>
+					<li><a class="waves-effect waves-classic" href="cart.html">
+							<i class="material-icons badge-container">
+								<span class="cart-badge hide">0</span>
+								shopping_cart
+							</i>
+					</a></li>
 				</ul>
 			</div>
 		</nav>
@@ -39,14 +44,19 @@
 				<a href="#" class="sidenav-close white-text close-button">
 					<i class="material-icons">close</i>
 				</a>
-				<span class="white-text josefin-descender-ignore">E-COMMERCE</span>
+				<span class="white-text">E-COMMERCE</span>
 			</div>
 			<ul>
-				<li><a class="waves-effect waves-classic" href="../index.html"><span class="a josefin-descender-ignore">HOME</span><i class="material-icons">home</i></a></li>
-				<li><a class="waves-effect waves-classic indigo white-text" href="#"><span class="a josefin-descender-ignore">PRODUCTS</span><i class="material-icons white-text">shopping_bag</i></a></li>
-				<li><a class="waves-effect waves-classic" href="cart.html"><span class="a josefin-descender-ignore">CART</span><i class="material-icons">shopping_cart</i></a></li>
-				<li><a class="waves-effect waves-classic" href="contact.html"><span class="a josefin-descender-ignore">CONTACT</span><i class="material-icons">contact_support</i></a></li>
-				<li><a class="waves-effect waves-classic" href="about.html"><span class="a josefin-descender-ignore">ABOUT</span><i class="material-icons">info</i></a></li>
+				<li><a class="waves-effect waves-classic" href="../index.html"><span class="a">HOME</span><i class="material-icons">home</i></a></li>
+				<li><a class="waves-effect waves-classic indigo white-text" href="#"><span class="a">PRODUCTS</span><i class="material-icons white-text">shopping_bag</i></a></li>
+				<li><a class="waves-effect waves-classic" href="cart.html"><span class="a">CART</span>
+					<i class="material-icons badge-container">
+						<span class="cart-badge hide">0</span>
+						shopping_cart
+					</i>
+				</a></li>
+				<li><a class="waves-effect waves-classic" href="contact.html"><span class="a">CONTACT</span><i class="material-icons">contact_support</i></a></li>
+				<li><a class="waves-effect waves-classic" href="about.html"><span class="a">ABOUT</span><i class="material-icons">info</i></a></li>
 			</ul>
 		</div>
 

diff --git a/src/sass/components/_badges.scss b/src/sass/components/_badges.scss
@@ -0,0 +1,27 @@
+@use '../abstracts' as *;
+@use '../vendor/materialize/materialize' as M;
+
+.cart-badge {
+	position: absolute;
+
+	top: 50%;
+	left: 80%;
+	min-width: 1.25rem;
+	min-height: 1.25rem;
+	border-radius: 1000px;
+	padding: 0 0.25rem;
+
+	color: white;
+	font-family: M.$font-stack;
+	font-size: 1rem;
+	line-height: 1.25rem;
+	text-align: center;
+
+	transform: translateX(-50%);
+	background: M.color('materialize-red', 'lighten-1');
+}
+
+.badge-container {
+	position: relative;
+	overflow: visible;
+}
diff --git a/src/sass/components/_products.scss b/src/sass/components/_products.scss
@@ -6,9 +6,7 @@
 	display: flex;
 	flex-direction: column;
 
-	@include md-up {
-		flex-direction: row;
-	}
+	@include md-up { flex-direction: row; }
 }
 
 .product-filters {
@@ -28,30 +26,46 @@
 			padding: 10px 20px;
 			color: inherit;
 
-			&:hover {
-				background-color: rgba(0 0 0 / 5%);
-			}
+			&:hover { background-color: rgba(0 0 0 / 5%); }
 		}
 	}
 }
 
 .product-list {
+	@include mx-auto;
+
 	width: 100%;
-	// max-width: 40rem;
+	max-width: 48rem;
+
+	@include md-up { @include mx(0); }
 }
 
 .product-li {
 	display: flex;
 	margin-bottom: flex.$gutter * 2;
 
 	// LEFT SIDE
-	&__image img {
-		@extend .materialboxed;
-		width: 100%;
-		height: 100%;
+	&__image {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		border-radius: 0.25rem;
+		background: M.color('indigo', 'lighten-5');
+
+		img {
+			@extend .materialboxed;
+
+			width: 100%;
+			min-height: 12rem;
+			max-height: 16rem;
+
+			@include sm-up { min-height: auto; }
+		}
 	}
 
 	// RIGHT SIDE
+	// TODO: Style details. Add FAB ?
 	&__details {
 		display: flex;
 		flex-direction: column;

diff --git a/src/sass/main.scss b/src/sass/main.scss
@@ -11,6 +11,7 @@
 
 // Components
 @use 'components/products';
+@use 'components/badges';
 
 // Layout
 @use 'layout/footer';

diff --git a/src/sass/vendor/materialize/components/_navbar.scss b/src/sass/vendor/materialize/components/_navbar.scss
@@ -98,7 +98,6 @@ nav {
     }
   }
 
-
   // Title
   .nav-title {
     display: inline-block;
@@ -111,7 +110,7 @@ nav {
   ul {
     margin: 0;
 	max-height: 100%;
-	overflow: hidden;
+	// overflow: hidden;
 
     li {
       transition: background-color .3s;

diff --git a/src/sass/vendor/materialize/components/_typography.scss b/src/sass/vendor/materialize/components/_typography.scss
@@ -5,7 +5,7 @@ a {
   text-decoration: none;
 }
 
-html{
+html, ::after, ::before{
   line-height: 1.5;
 
   @media only screen and (min-width: 0) {

diff --git a/src/sass/vendor/materialize/materialize.scss b/src/sass/vendor/materialize/materialize.scss
@@ -20,7 +20,7 @@
 @import "components/typography";
 @import "components/transitions";
 // @import "components/cards";
-// @import "components/toast";
+@import "components/toast";
 // @import "components/tabs";
 // @import "components/tooltip";
 @import "components/buttons";