File: /home/jkwebsite.my.id/Shope/products.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detail Produk - Nama Produk</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="logo">
<a href="index.html">Toko Online Saya</a>
</div>
<ul class="nav-links">
<li><a href="index.html">Beranda</a></li>
<li><a href="#">Kategori</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#" id="cart-icon-detail">Keranjang (<span id="cart-count-detail">0</span>)</a></li>
</ul>
</nav>
</header>
<main class="container product-detail-page">
<div class="product-detail-card">
<img src="images/product1.jpg" alt="Nama Produk" class="product-detail-image">
<div class="product-detail-info">
<h1 id="product-detail-title">Nama Produk Contoh</h1>
<p class="product-detail-price" id="product-detail-price">Rp 150.000</p>
<p class="product-detail-description" id="product-detail-description">Ini adalah deskripsi singkat tentang produk ini. Produk ini sangat bagus, berkualitas tinggi, dan cocok untuk kebutuhan Anda. Tersedia dalam berbagai warna dan ukuran.</p>
<button class="add-to-cart-button" id="add-to-cart-detail" data-product-id="1">Tambahkan ke Keranjang</button>
</div>
</div>
</main>
<footer>
<p>© 2024 Toko Online Saya. Hak Cipta Dilindungi.</p>
</footer>
<script src="script.js"></script>
<script>
// Contoh sederhana untuk mengisi detail produk (biasanya ini dari data dinamis)
// Anda bisa mengambil ID produk dari URL dan memuat data yang sesuai
const productId = 1; // Contoh ID produk
const productData = products.find(p => p.id === productId);
if (productData) {
document.getElementById('product-detail-title').textContent = productData.name;
document.getElementById('product-detail-price').textContent = Rp ${productData.price.toLocaleString('id-ID')};
document.querySelector('.product-detail-image').src = productData.image;
document.getElementById('product-detail-description').textContent = productData.description;
document.getElementById('add-to-cart-detail').dataset.productId = productData.id;
}
// Memperbarui jumlah keranjang di halaman detail
updateCartCount();
</script>
</body>
</html>