Spaces:

KingNish
/

test-space

Running

App Files Files Community

test-space / product.html

smolSWE

Implement product page linking, cart functionality, icons, and animations

a99548a verified 3 months ago

raw

history blame

7.14 kB


	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Product Details - Amazon Clone</title>
	<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	</head>
	<body>
	<nav class="bg-gray-800 p-4 text-white">
	<div class="container mx-auto flex items-center justify-between">
	<a href="/" class="text-2xl font-bold">Amazon</a>
	<div class="flex items-center">
	<input type="text" placeholder="Search" class="bg-gray-700 text-white px-4 py-2 rounded-md mr-2">
	<button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400">Search</button>
	</div>
	<div>
	<a href="/cart.html" class="hover:text-yellow-500">Cart</a>
	</div>
	</div>
	</nav>

	<main class="container mx-auto mt-8">
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div>
	<div class="image-gallery">
	<img src="https://placehold.co/400x400" alt="Product Image 1" class="w-full rounded-md mb-2">
	<div class="grid grid-cols-4 gap-2">
	<img src="https://placehold.co/100x100" alt="Product Image 2" class="w-full rounded-md">
	<img src="https://placehold.co/100x100" alt="Product Image 3" class="w-full rounded-md">
	<img src="https://placehold.co/100x100" alt="Product Image 4" class="w-full rounded-md">
	<img src="https://placehold.co/100x100" alt="Product Image 5" class="w-full rounded-md">
	</div>
	</div>
	</div>
	<div>
	<h1 class="text-2xl font-bold" id="productName">Product Title</h1>
	<p class="text-gray-600" id="productDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	<p class="text-xl font-semibold" id="productPrice">$99.99</p>
	<div class="flex items-center mb-4">
	<i class="fas fa-star text-yellow-500"></i>
	<i class="fas fa-star text-yellow-500"></i>
	<i class="fas fa-star text-yellow-500"></i>
	<i class="fas fa-star text-yellow-500"></i>
	<i class="fas fa-star-half-alt text-yellow-500"></i>
	<span class="text-gray-600 ml-2">4.5</span>
	</div>
	<button class="bg-yellow-500 text-gray-800 px-4 py-2 rounded-md hover:bg-yellow-400 add-to-cart-button" id="addToCartButton"><i class="fas fa-cart-plus"></i> Add to Cart</button>
	</div>
	</div>
	</main>

	<footer class="bg-gray-800 p-4 text-white text-center mt-8">
	<p>© 2024 Amazon Clone</p>
	</footer>

	<script src="script.js">
	const urlParams = new URLSearchParams(window.location.search);
	const productId = urlParams.get("id");

	document.addEventListener('DOMContentLoaded', function() {
	if (productId) {
	const product = products.find(p => p.id === productId);

	if (product) {
	document.getElementById('productName').textContent = product.name;
	document.getElementById('productDescription').textContent = product.description;
	document.getElementById('productPrice').textContent = '$' + product.price.toFixed(2);
	// Assuming you have an image element with id 'productImage'
	// document.getElementById('productImage').src = product.image;
	// document.getElementById('productImage').alt = product.name;
	} else {
	console.error('Product not found with ID:', productId);
	document.getElementById('productName').textContent = 'Product Not Found';
	}
	} else {
	console.error('Product ID not provided.');
	document.getElementById('productName').textContent = 'Product ID Not Provided';
	}

	const addToCartButton = document.getElementById('addToCartButton');
	if (addToCartButton) {
	addToCartButton.addEventListener('click', () => {
	if (productId) {
	const product = products.find(p => p.id === productId);
	if (product) {
	addToCart(product);
	} else {
	console.error('Product not found with ID:', productId);
	}
	} else {
	console.error('Product ID not provided.');
	}
	});
	}
	});
	</script>
	<script src="data.js"></script>

	<script>
	const urlParams = new URLSearchParams(window.location.search);
	const productId = urlParams.get("id");

	document.addEventListener('DOMContentLoaded', function() {
	const product = products[0];
	trackProductView(product.id);
	});
	</script>


	<script>
	const urlParams = new URLSearchParams(window.location.search);
	const productId = urlParams.get("id");

	document.addEventListener('DOMContentLoaded', function() {
	trackProductView('product123');
	});
	</script>

	<script>
	const urlParams = new URLSearchParams(window.location.search);
	const productId = urlParams.get("id");

	const productNameElement = document.getElementById('productName');
	const productDescriptionElement = document.getElementById('productDescription');
	const productPriceElement = document.getElementById('productPrice');
	const productImageElement = document.getElementById('productImage');
	const addToCartButton = document.getElementById('addToCartButton');

	if (products && products.length > 0) {
	const product = products[0];

	if (productNameElement) productNameElement.textContent = product.name;
	if (productDescriptionElement) productDescriptionElement.textContent = product.description;
	if (productPriceElement) productPriceElement.textContent = '$' + product.price.toFixed(2);
	if (productImageElement) productImageElement.src = product.image;
	if (productImageElement) productImageElement.alt = product.name;
	} else {
	console.error('No products found in data.js');
	}

	addToCartButton.addEventListener('click', () => {
	addToCart(products[0]);
	});
	</script>
	</body>
	</html>