refactor(toast): implemented toast.js refactored 'showToast' and updated pages accordingly

product.html

@@ -200,8 +200,8 @@
 		<div id="footer-placeholder"></div>
 
 		<div class="toast" id="toast">
-			<span class="toast-icon">🛒</span>
-			<span id="toast-msg">Item added to cart!</span>
+			<span id="toast-icon" class="toast-icon"></span>
+			<span id="toast-msg"></span>
 			<span class="toast-view" onclick="window.location.href='cart.html'">
 				View Cart
 			</span>
@@ -209,6 +209,7 @@
 
 		<!-- SCRIPTS -->
 		<script src="assets/js/components.js"></script>
+		<script src="assets/js/toast.js"></script>
 		<script src="assets/js/products.js"></script>
 		<script src="assets/js/cart.js"></script>
 		<script src="assets/js/product-renderer.js"></script>
@@ -217,22 +218,6 @@
 			let qty = 1;
 			let currentProduct = null;
 
-			// -----------------------------
-			// TOAST
-			// -----------------------------
-			function showToast(name) {
-				const toast = document.getElementById("toast");
-				const msg = document.getElementById("toast-msg");
-
-				msg.textContent = `"${name.substring(0, 30)}" added to cart!`;
-
-				toast.classList.add("show");
-
-				setTimeout(() => {
-					toast.classList.remove("show");
-				}, 3500);
-			}
-
 			// -----------------------------
 			// TABS
 			// -----------------------------
@@ -283,7 +268,13 @@
 				if (!currentProduct) return;
 
 				Cart.addItem(currentProduct, qty);
-				showToast(currentProduct.basic.name);
+				showToast({
+					title: `"${currentProduct.basic.name.substring(
+						0,
+						30
+					)}…" added to cart!`,
+					icon: "🛒",
+				});
 			}
 
 			// -----------------------------