320 lines
8.2 KiB
HTML
320 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
||
<title>Loading Product...</title>
|
||
|
||
<link rel="stylesheet" href="assets/css/styles.css" />
|
||
<link rel="stylesheet" href="assets/css/product.css" />
|
||
<link rel="stylesheet" href="assets/css/components.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<!-- TOP BAR -->
|
||
<!-- <div id="topbar-placeholder"></div> -->
|
||
|
||
<!-- NAVBAR -->
|
||
<div id="navbar-placeholder"></div>
|
||
|
||
<!-- BREADCRUMB -->
|
||
<div class="breadcrumb-bar">
|
||
<div class="breadcrumb-inner">
|
||
<a href="index.html">Home</a>
|
||
<span class="sep">›</span>
|
||
<a href="#">Product</a>
|
||
<span class="sep">›</span>
|
||
<span class="current">Loading...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="product-page">
|
||
<!-- ========================= -->
|
||
<!-- TOP SECTION -->
|
||
<!-- ========================= -->
|
||
<div class="product-top">
|
||
<!-- GALLERY -->
|
||
<div class="gallery-col">
|
||
<div class="gallery-main">
|
||
<img
|
||
src=""
|
||
alt=""
|
||
width="600"
|
||
height="600"
|
||
loading="eager"
|
||
decoding="async"
|
||
draggable="false" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SUMMARY -->
|
||
<div class="summary-col">
|
||
<div class="product-title-row">
|
||
<h1 class="product-title"></h1>
|
||
</div>
|
||
|
||
<!-- Rating -->
|
||
<div class="rating-row">
|
||
<span class="stars">★★★★★</span>
|
||
<span class="rating-count"></span>
|
||
<span class="rating-divider">|</span>
|
||
<span class="review-link"></span>
|
||
<span class="rating-divider">|</span>
|
||
<span class="sold-count"></span>
|
||
</div>
|
||
|
||
<!-- Price -->
|
||
<div class="product-price-row">
|
||
<span class="price-current"></span>
|
||
<span class="price-original"></span>
|
||
<span class="price-badge"></span>
|
||
</div>
|
||
|
||
<!-- Short desc -->
|
||
<p class="product-short-desc"></p>
|
||
|
||
<!-- Benefit pills -->
|
||
<div class="benefit-pills"></div>
|
||
|
||
<!-- Stock -->
|
||
<div class="stock-status"></div>
|
||
|
||
<hr class="prod-divider" />
|
||
|
||
<!-- Qty + Add to Cart -->
|
||
<div class="qty-cart-row">
|
||
<div class="qty-control">
|
||
<button class="qty-btn" onclick="changeQty(-1)">−</button>
|
||
<span class="qty-num" id="qty">1</span>
|
||
<button class="qty-btn" onclick="changeQty(1)">+</button>
|
||
</div>
|
||
|
||
<button class="add-to-cart-btn" onclick="addCurrentProductToCart()">
|
||
ADD TO CART
|
||
</button>
|
||
</div>
|
||
|
||
<hr class="prod-divider" />
|
||
|
||
<!-- Meta -->
|
||
<div class="product-meta-block">
|
||
<div class="meta-row">
|
||
<span class="meta-label">SKU:</span>
|
||
<span class="meta-sku"></span>
|
||
</div>
|
||
<div class="meta-row">
|
||
<span class="meta-label">Weight:</span>
|
||
<span class="meta-weight"></span>
|
||
</div>
|
||
<div class="meta-row">
|
||
<span class="meta-label">Price:</span>
|
||
<span class="meta-price"></span>
|
||
</div>
|
||
<div class="meta-row">
|
||
<span class="meta-label">Categories:</span>
|
||
<div class="meta-categories"></div>
|
||
</div>
|
||
<div class="meta-row">
|
||
<span class="meta-label">Tags:</span>
|
||
<div class="meta-tags"></div>
|
||
</div>
|
||
<div class="meta-row">
|
||
<span class="meta-label">Ideal For:</span>
|
||
<span class="meta-ideal"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========================= -->
|
||
<!-- TABS SECTION -->
|
||
<!-- ========================= -->
|
||
|
||
<div class="product-lower">
|
||
<div class="tabs-panel">
|
||
<div class="tab-nav">
|
||
<button class="tab-nav-btn active" onclick="switchTab(0)">
|
||
Description
|
||
</button>
|
||
<button class="tab-nav-btn" onclick="switchTab(1)">
|
||
Ingredients
|
||
</button>
|
||
<button class="tab-nav-btn" onclick="switchTab(2)">Reviews</button>
|
||
<button class="tab-nav-btn" onclick="switchTab(3)">Shipping</button>
|
||
</div>
|
||
|
||
<!-- DESCRIPTION -->
|
||
<div class="tab-pane active">
|
||
<p class="desc-lead"></p>
|
||
<div class="desc-body"></div>
|
||
<div class="desc-features"></div>
|
||
<div class="how-to-use">
|
||
<h4>📋 How to Use</h4>
|
||
<div class="how-steps"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- INGREDIENTS -->
|
||
<div class="tab-pane">
|
||
<p class="desc-lead"></p>
|
||
<div class="ingredients-grid"></div>
|
||
<div class="full-ingredients"></div>
|
||
</div>
|
||
|
||
<!-- REVIEWS -->
|
||
<div class="tab-pane">
|
||
<div class="reviews-summary">
|
||
<div class="rating-big">
|
||
<div class="score"></div>
|
||
<div class="stars-big">★★★★★</div>
|
||
<div class="total"></div>
|
||
</div>
|
||
<div class="rating-bars"></div>
|
||
</div>
|
||
<div class="review-list"></div>
|
||
</div>
|
||
|
||
<!-- SHIPPING -->
|
||
<div class="tab-pane">
|
||
<p class="desc-lead"></p>
|
||
<div class="desc-body"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========================= -->
|
||
<!-- RELATED PRODUCTS SECTION -->
|
||
<!-- ========================= -->
|
||
|
||
<div class="related-section">
|
||
<div class="related-header">
|
||
<h2 class="related-title">Related Products</h2>
|
||
</div>
|
||
|
||
<div class="related-grid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FOOTER -->
|
||
<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 class="toast-view" onclick="window.location.href='cart.html'">
|
||
View Cart
|
||
</span>
|
||
</div>
|
||
|
||
<!-- SCRIPTS -->
|
||
<script src="assets/js/components.js"></script>
|
||
<script src="assets/js/products.js"></script>
|
||
<script src="assets/js/cart.js"></script>
|
||
<script src="assets/js/product-renderer.js"></script>
|
||
|
||
<script>
|
||
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
|
||
// -----------------------------
|
||
function switchTab(index) {
|
||
const panes = document.querySelectorAll(".tab-pane");
|
||
const buttons = document.querySelectorAll(".tab-nav-btn");
|
||
|
||
panes.forEach((pane, i) => {
|
||
pane.classList.toggle("active", i === index);
|
||
});
|
||
|
||
buttons.forEach((btn, i) => {
|
||
btn.classList.toggle("active", i === index);
|
||
});
|
||
|
||
if (index === 2) {
|
||
document
|
||
.querySelector(".tabs-panel")
|
||
.scrollIntoView({ behavior: "smooth", block: "start" });
|
||
}
|
||
}
|
||
|
||
// -----------------------------
|
||
// QUANTITY
|
||
// -----------------------------
|
||
function changeQty(delta) {
|
||
qty = Math.max(1, qty + delta);
|
||
document.getElementById("qty").textContent = qty;
|
||
}
|
||
|
||
// -----------------------------
|
||
// NAV CART COUNT (Uses Cart Module)
|
||
// -----------------------------
|
||
function updateNavCartCount() {
|
||
const countEl = document.getElementById("nav-cart-count");
|
||
if (countEl) {
|
||
countEl.textContent = Cart.getTotalCount();
|
||
}
|
||
}
|
||
|
||
// Listen for global cart updates
|
||
window.addEventListener("cartUpdated", updateNavCartCount);
|
||
|
||
// -----------------------------
|
||
// ADD TO CART (Uses Cart Module)
|
||
// -----------------------------
|
||
function addCurrentProductToCart() {
|
||
if (!currentProduct) return;
|
||
|
||
Cart.addItem(currentProduct, qty);
|
||
showToast(currentProduct.basic.name);
|
||
}
|
||
|
||
// -----------------------------
|
||
// INIT PAGE
|
||
// -----------------------------
|
||
(function () {
|
||
const params = new URLSearchParams(window.location.search);
|
||
const productId = params.get("id");
|
||
|
||
if (!productId) {
|
||
document.querySelector(".product-page").innerHTML =
|
||
"<h2 style='padding:40px'>Product not found</h2>";
|
||
return;
|
||
}
|
||
|
||
const product = PRODUCTS.find((p) => p.id === productId);
|
||
|
||
if (!product) {
|
||
document.querySelector(".product-page").innerHTML =
|
||
"<h2 style='padding:40px'>Product not found</h2>";
|
||
return;
|
||
}
|
||
|
||
currentProduct = product;
|
||
|
||
renderProduct(product.id);
|
||
|
||
// Set initial cart badge value
|
||
updateNavCartCount();
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|