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

assets/js/toast.js

@@ -0,0 +1,16 @@
+function showToast(options) {
+	if (!options) return;
+
+	const toast = document.getElementById("toast");
+	const tMsg = document.getElementById("toast-msg");
+	const tIcon = document.getElementById("toast-icon");
+
+	tMsg.textContent = options.title;
+	tIcon.textContent = options.icon;
+
+	toast.classList.add("show");
+
+	setTimeout(() => {
+		toast.classList.remove("show");
+	}, 3500);
+}

checkout.html

@@ -85,6 +85,7 @@
 						<button
 							type="submit"
 							id="btn-order"
+							data-step="unlock"
 							class="btn-primary checkout-continue">
 							<span class="btn-text">Continue to Payment →</span>
 							<span class="btn-spinner"></span>
@@ -126,8 +127,14 @@
 
 		<div id="footer-placeholder"></div>
 
+		<div class="toast" id="toast">
+			<span id="toast-icon" class="toast-icon"></span>
+			<span id="toast-msg"></span>
+		</div>
+
 		<script src="assets/js/config.js"></script>
 		<script src="assets/js/components.js"></script>
+		<script src="assets/js/toast.js"></script>
 		<script src="assets/js/cart.js"></script>
 		<script src="assets/js/checkout.js"></script>
 	</body>

index.html

@@ -129,8 +129,8 @@
 
 		<!-- TOAST — same as product pages -->
 		<div class="toast" id="toast">
-			<span class="toast-icon">🛒</span>
+			<span id="toast-icon" class="toast-icon"></span>
-			<span id="toast-msg">Item added to cart!</span>
+			<span id="toast-msg"></span>
 			<span class="toast-view" onclick="window.location.href = 'cart.html'"
 				>View Cart</span
 			>
@@ -138,6 +138,7 @@
 
 		<script src="assets/js/components.js"></script>
 		<script src="assets/js/products.js"></script>
+		<script src="assets/js/toast.js"></script>
 		<script src="assets/js/cart.js"></script>
 
 		<script>
@@ -246,7 +247,10 @@
 				if (!product) return;
 
 				Cart.addItem(product, 1);
-				showToast(product.basic.name);
+				showToast({
+					title: `"${product.basic.name.substring(0, 30)}…" added to cart!`,
+					icon: "🛒",
+				});
 
 				button.classList.add("added");
 				setTimeout(() => button.classList.remove("added"), 1000);
@@ -254,20 +258,6 @@
 				animateToCart(button);
 			}
 
-			/* ─────────────────────────────
-				TOAST
-			───────────────────────────── */
-			function showToast(name) {
-				const toast = document.getElementById("toast");
-				document.getElementById("toast-msg").textContent = `"${name.substring(
-					0,
-					30
-				)}…" added to cart!`;
-
-				toast.classList.add("show");
-				setTimeout(() => toast.classList.remove("show"), 3500);
-			}
-
 			/* ─────────────────────────────
 				FLY ANIMATION (UNCHANGED)
 			───────────────────────────── */
@@ -324,7 +314,10 @@
 				if (!product) return;
 
 				Cart.addItem(product, 1);
-				showToast(product.basic.name);
+				showToast({
+					title: `"${product.basic.name.substring(0, 30)}…" added to cart!`,
+					icon: "🛒",
+				});
 				animateToCart(button);
 			});
 

product.html

@@ -200,8 +200,8 @@
 		<div id="footer-placeholder"></div>
 
 		<div class="toast" id="toast">
-			<span class="toast-icon">🛒</span>
+			<span id="toast-icon" class="toast-icon"></span>
-			<span id="toast-msg">Item added to cart!</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: "🛒",
+				});
 			}
 
 			// -----------------------------