Scribd
Upload
40 views14 pages

111 Single Product Theame

The document is an HTML template for a ChicStyle online store, featuring a product section for a premium handbag, including images, color swatches, size options, and a cart dropdown. It utilizes Tailwind CSS for styling and includes interactive elements like a mobile menu and quantity selectors. The layout is responsive, designed for both desktop and mobile views, with a focus on user experience and product presentation.

Uploaded by

kashyapayush786
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
40 views14 pages

111 Single Product Theame

The document is an HTML template for a ChicStyle online store, featuring a product section for a premium handbag, including images, color swatches, size options, and a cart dropdown. It utilizes Tailwind CSS for styling and includes interactive elements like a mobile menu and quantity selectors. The layout is responsive, designed for both desktop and mobile views, with a focus on user experience and product presentation.

Uploaded by

kashyapayush786
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 14

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChicStyle Store Template</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css">
<style>
/* Custom Styles */
.product-swatch {
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.product-swatch.selected {
border-color: #000;
transform: scale(1.1);
}
.quantity-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
}
.image-gallery-thumbnail {
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
opacity: 0.7;
transition: all 0.3s ease;
}
.image-gallery-thumbnail.active, .image-gallery-thumbnail:hover {
opacity: 1;
border: 2px solid #000;
}
.sticky-nav {
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(10px);
}
.mobile-menu {
transition: all 0.3s ease;
transform: translateY(-100%);
}
.mobile-menu.open {
transform: translateY(0);
}
.cart-dropdown {
transition: all 0.2s ease;
opacity: 0;
pointer-events: none;
}
.cart-dropdown.open {
opacity: 1;
pointer-events: all;
}
</style>
</head>
<body class="font-sans text-gray-900 bg-white">
<!-- Announcement Bar -->
<div class="bg-black text-white text-center py-2 text-sm px-4">
<p>✨ Free shipping on all orders over $50 | Shop now ✨</p>
</div>

<!-- Navigation -->


<nav class="sticky-nav bg-white bg-opacity-80 border-b border-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Mobile menu button -->
<div class="flex md:hidden">
<button id="mobile-menu-button" class="text-gray-700">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>

<!-- Logo -->


<div class="flex-shrink-0 flex items-center">
<span class="text-xl font-bold text-gray-900">CHICSTYLE</span>
</div>

<!-- Desktop Navigation -->


<div class="hidden md:flex space-x-8">
<a href="#" class="text-gray-900 hover:text-gray-600 px-3 py-2
text-sm font-medium">Home</a>
<a href="#" class="text-gray-900 hover:text-gray-600 px-3 py-2
text-sm font-medium">Shop</a>
<a href="#" class="text-gray-900 hover:text-gray-600 px-3 py-2
text-sm font-medium">About</a>
<a href="#" class="text-gray-900 hover:text-gray-600 px-3 py-2
text-sm font-medium">Contact</a>
</div>

<!-- Cart/Icons -->


<div class="flex items-center space-x-4">
<button class="text-gray-700 hover:text-gray-900">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
<button id="cart-button" class="relative text-gray-700
hover:text-gray-900">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
<span id="cart-count" class="absolute -top-2 -right-2 bg-
black text-white text-xs rounded-full h-5 w-5 flex items-center justify-
center">0</span>
</button>
</div>
</div>
</div>

<!-- Mobile Menu -->


<div id="mobile-menu" class="mobile-menu md:hidden bg-white border-b
border-gray-200">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="block px-3 py-2 text-base font-medium text-gray-
900 hover:bg-gray-100 rounded-md">Home</a>
<a href="#" class="block px-3 py-2 text-base font-medium text-gray-
900 hover:bg-gray-100 rounded-md">Shop</a>
<a href="#" class="block px-3 py-2 text-base font-medium text-gray-
900 hover:bg-gray-100 rounded-md">About</a>
<a href="#" class="block px-3 py-2 text-base font-medium text-gray-
900 hover:bg-gray-100 rounded-md">Contact</a>
</div>
</div>

<!-- Cart Dropdown -->


<div id="cart-dropdown" class="cart-dropdown absolute right-0 mt-2 w-72 bg-
white rounded-md shadow-lg z-50 overflow-hidden">
<div class="py-2">
<div class="px-4 py-3 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">Your Cart</h3>
</div>
<div id="cart-items" class="max-h-60 overflow-y-auto px-4 py-2">
<!-- Cart items will be added here -->
<div class="text-center py-8 text-gray-500">
<p>Your cart is empty</p>
</div>
</div>
<div class="px-4 py-3 border-t border-gray-200 bg-gray-50">
<div class="flex justify-between mb-2">
<span class="text-gray-600">Subtotal</span>
<span id="cart-subtotal" class="text-gray-900 font-
medium">$0.00</span>
</div>
<button class="w-full bg-black text-white py-2 rounded-md
hover:bg-gray-800 transition">
Checkout
</button>
<p class="text-xs text-center mt-2 text-gray-500">Shipping &
taxes calculated at checkout</p>
</div>
</div>
</div>
</nav>
<!-- Product Section -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="lg:grid lg:grid-cols-2 lg:gap-16">
<!-- Product Images -->
<div class="mb-10 lg:mb-0">
<div class="relative overflow-hidden rounded-lg mb-4"
style="padding-top: 100%;">
<img id="main-product-image" src="https://placehold.co/800x800"
alt="Modern women's handbag in beige with gold accents, displayed against a
minimalist background" class="absolute top-0 left-0 w-full h-full object-cover">
</div>
<div class="flex space-x-2 overflow-x-auto py-2">
<div class="image-gallery-thumbnail active" data-
image="https://placehold.co/800x800" onclick="changeMainImage(this)">
<img src="https://placehold.co/800x800" alt="Modern women's
handbag in beige with gold accents, front view" class="w-full h-full object-cover">
</div>
<div class="image-gallery-thumbnail"
data-image="https://placehold.co/800x800" onclick="changeMainImage(this)">
<img src="https://placehold.co/800x800" alt="Modern women's
handbag in beige with gold accents, side view showing elegant detailing" class="w-
full h-full object-cover">
</div>
<div class="image-gallery-thumbnail"
data-image="https://placehold.co/800x800" onclick="changeMainImage(this)">
<img src="https://placehold.co/800x800" alt="Modern women's
handbag in beige with gold accents, interior view showing compartments" class="w-
full h-full object-cover">
</div>
<div class="image-gallery-thumbnail"
data-image="https://placehold.co/800x800" onclick="changeMainImage(this)">
<img src="https://placehold.co/800x800" alt="Modern women's
handbag in beige with gold accents, being held by a stylish woman" class="w-full h-
full object-cover">
</div>
</div>
</div>

<!-- Product Info -->


<div>
<h1 class="text-3xl font-bold tracking-tight text-gray-900 mb-
2">ChicStyle Premium Handbag</h1>
<p class="text-xl text-gray-900 font-medium mb-4">$129.99</p>

<!-- Color Swatches -->


<div class="mb-6">
<h3 class="text-sm font-medium text-gray-900 mb-2">Color</h3>
<div class="flex space-x-3">
<div class="product-swatch selected" style="background-
color: #e2b979;" data-color="Beige" onclick="selectSwatch(this)"></div>
<div class="product-swatch" style="background-color:
#4a4a4a;" data-color="Black" onclick="selectSwatch(this)"></div>
<div class="product-swatch" style="background-color:
#5d6d7e;" data-color="Slate" onclick="selectSwatch(this)"></div>
</div>
</div>

<!-- Size Selector -->


<div class="mb-6">
<h3 class="text-sm font-medium text-gray-900 mb-2">Size</h3>
<div class="grid grid-cols-3 gap-3">
<button class="size-option border border-gray-300 rounded-
md py-2 px-4 text-sm font-medium hover:border-black" onclick="selectSize(this)">
Small
</button>
<button class="size-option border border-gray-300 rounded-
md py-2 px-4 text-sm font-medium hover:border-black active border-black"
onclick="selectSize(this)">
Medium
</button>
<button class="size-option border border-gray-300 rounded-
md py-2 px-4 text-sm font-medium hover:border-black" onclick="selectSize(this)">
Large
</button>
</div>
</div>

<!-- Quantity -->


<div class="mb-6">
<h3 class="text-sm font-medium text-gray-900
mb-2">Quantity</h3>
<div class="flex items-center">
<div class="quantity-btn border border-gray-300 rounded-l-
md" onclick="updateQuantity(-1)">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M20 12H4" />
</svg>
</div>
<input type="text" id="quantity" value="1" class="w-12
text-center border-t border-b border-gray-300 py-2">
<div class="quantity-btn border border-gray-300 rounded-r-
md" onclick="updateQuantity(1)">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</div>
</div>
</div>

<!-- Add to Cart Button -->


<button id="add-to-cart" class="w-full bg-black text-white py-3
rounded-md hover:bg-gray-800 transition mb-4">
Add to Cart
</button>

<!-- Product Description -->


<div class="prose text-gray-600 mb-6">
<p>The ChicStyle Premium Handbag combines elegance with
functionality. Made from high-quality vegan leather with gold-tone hardware for a
luxurious look. Features include:</p>
<ul>
<li>Spacious main compartment with zipper closure</li>
<li>Two internal pockets for organization</li>
<li>Adjustable and removable shoulder strap</li>
<li>Lightweight yet durable construction</li>
</ul>
</div>

<!-- Product Details -->


<div class="border-t border-gray-200 pt-4">
<h3 class="text-sm font-medium text-gray-900 mb-2">Details</h3>
<div class="text-gray-600 text-sm">
<p>Material: Premium Vegan Leather</p>
<p>Dimensions: 12"W x 8"H x 4"D</p>
<p>Weight: 1.5 lbs</p>
</div>
</div>
</div>
</div>
</section>

<!-- Product Features -->


<section class="bg-gray-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-2xl font-bold text-center text-gray-900 mb-12">Why
You'll Love It</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center">
<div class="flex justify-center mb-4">
<svg class="h-10 w-10 text-gray-900" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955
11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332
9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Premium
Quality</h3>
<p class="text-gray-600">Crafted with the finest materials for
lasting durability and luxury.</p>
</div>
<div class="text-center">
<div class="flex justify-center mb-4">
<svg class="h-10 w-10 text-gray-900" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78
2.096A4.001 4.001 0 003 15z" />
</svg>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Versatile
Style</h3>
<p class="text-gray-600">Designed to complement any outfit from
casual to formal occasions.</p>
</div>
<div class="text-center">
<div class="flex justify-center mb-4">
<svg class="h-10 w-10 text-gray-900" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3
2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21
12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">Satisfaction
Guaranteed</h3>
<p class="text-gray-600">30-day return policy and 1-year
warranty on craftsmanship.</p>
</div>
</div>
</div>
</section>

<!-- Testimonials -->


<section class="py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-2xl font-bold text-center text-gray-900 mb-12">What Our
Customers Say</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="flex-shrink-0 mr-3">
<img class="h-10 w-10 rounded-full"
src="https://placehold.co/100x100" alt="Portrait of Sarah J., a satisfied customer
with blonde hair smiling">
</div>
<div>
<h4 class="text-sm font-medium text-gray-900">Sarah
J.</h4>
<div class="flex text-yellow-400 text-sm mt-1">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600">"This is my new favorite bag! The
quality is amazing and it holds everything I need without being bulky."</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="flex-shrink-0 mr-3">
<img class="h-10 w-10 rounded-full"
src="https://placehold.co/100x100" alt="Portrait of Michael T., a happy customer
with glasses and short beard">
</div>
<div>
<h4 class="text-sm font-medium text-gray-900">Michael
T.</h4>
<div class="flex text-yellow-400 text-sm mt-1">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<p class="text-gray-600">"Bought this for my wife and she loves
it. The craftsmanship is excellent and it looks more expensive than it is."</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<div class="flex-shrink-0 mr-3">
<img class="h-10 w-10 rounded-full"
src="https://placehold.co/100x100" alt="Portrait of Emily R., a stylish woman with
dark hair smiling">
</div>
<div>
<h4 class="text-sm font-medium text-gray-900">Emily
R.</h4>
<div class="flex text-yellow-400 text-sm mt-1">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600">"Perfect everyday bag. The
compartments are well thought out and the strap is comfortable even when full."</p>
</div>
</div>
</div>
</section>

<!-- FAQ -->


<section class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-2xl font-bold text-center text-gray-900 mb-
12">Frequently Asked Questions</h2>
<div class="max-w-3xl mx-auto">
<div class="space-y-4">
<div class="border-b border-gray-200 pb-4">
<button class="faq-question w-full flex justify-between
items-center text-left text-gray-900 font-medium" onclick="toggleFaqAnswer(this)">
<span>What materials are used in the ChicStyle Handbag?
</span>
<svg class="h-5 w-5 text-gray-500" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="faq-answer mt-2 text-gray-600 hidden">
<p>Our handbag is crafted from premium vegan leather
that mimics the look and feel of genuine leather while being more environmentally
friendly. The hardware is made from high-quality, gold-tone metal that's resistant
to tarnishing.</p>
</div>
</div>
<div class="border-b border-gray-200 pb-4">
<button class="faq-question w-full flex justify-between
items-center text-left text-gray-900 font-medium" onclick="toggleFaqAnswer(this)">
<span>What are the care instructions?</span>
<svg class="h-5 w-5 text-gray-500" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="faq-answer mt-2 text-gray-600 hidden">
<p>Simply wipe clean with a damp cloth and mild soap if
needed. Avoid harsh chemicals or abrasive cleaners. Store your bag in a cool, dry
place when not in use and stuff it with tissue paper to maintain its shape.</p>
</div>
</div>
<div class="border-b border-gray-200 pb-4">
<button class="faq-question w-full flex justify-between
items-center text-left text-gray-900 font-medium" onclick="toggleFaqAnswer(this)">
<span>What is your return policy?</span>
<svg class="h-5 w-5 text-gray-500" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="faq-answer mt-2 text-gray-600 hidden">
<p>We offer a 30-day return policy for unworn,
undamaged items in original condition with all tags attached. Shipping fees are
non-refundable unless the return is due to our error.</p>
</div>
</div>
<div class="border-b border-gray-200 pb-4">
<button class="faq-question w-full flex justify-between
items-center text-left text-gray-900 font-medium" onclick="toggleFaqAnswer(this)">
<span>How long does shipping take?</span>
<svg class="h-5 w-5 text-gray-500" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="faq-answer mt-2 text-gray-600 hidden">
<p>We typically process orders within 1-2 business
days. Domestic shipping takes 3-5 business days via our standard shipping method.
For international orders, delivery times vary by destination but generally take 7-
14 business days.</p>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Footer -->


<footer class="bg-gray-900 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-medium mb-4">Shop</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-white transition">All
Products</a></li>
<li><a href="#" class="hover:text-white transition">New
Arrivals</a></li>
<li><a href="#" class="hover:text-white transition">Best
Sellers</a></li>
<li><a href="#" class="hover:text-white transition">Gift
Cards</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-medium mb-4">Customer Service</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-white transition">Contact
Us</a></li>
<li><a href="#" class="hover:text-white
transition">Shipping Policy</a></li>
<li><a href="#" class="hover:text-white transition">Returns
& Exchanges</a></li>
<li><a href="#" class="hover:text-white
transition">FAQ</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-medium mb-4">About</h3>
<ul class="space-y-2 text-gray-400">
<li><a href="#" class="hover:text-white transition">Our
Story</a></li>
<li><a href="#" class="hover:text-white
transition">Sustainability</a></li>
<li><a href="#" class="hover:text-white
transition">Blog</a></li>
<li><a href="#" class="hover:text-white
transition">Careers</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-medium mb-4">Connect</h3>
<div class="flex space-x-4 mb-4">
<a href="#" class="text-gray-400 hover:text-white
transition">
<span class="sr-only">Facebook</span>
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white
transition">
<span class="sr-only">Instagram</span>
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white
transition">
<span class="sr-only">Twitter</span>
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white
transition">
<span class="sr-only">Pinterest</span>
<i class="fab fa-pinterest-p"></i>
</a>
</div>
<h4 class="font-medium mb-2">Sign up for our newsletter</h4>
<div class="flex">
<input type="email" placeholder="Your email" class="bg-
gray-800 text-white px-4 py-2 rounded-l-md w-full focus:outline-none focus:ring-2
focus:ring-gray-600">
<button class="bg-gray-600 px-4 py-2 rounded-r-md hover:bg-
gray-700 transition">Join</button>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-
400 text-sm">
<p>© 2023 ChicStyle. All rights reserved.</p>
</div>
</div>
</footer>

<script>
// Mobile Menu Toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');

mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('open');
});

// Cart Toggle
const cartButton = document.getElementById('cart-button');
const cartDropdown = document.getElementById('cart-dropdown');

cartButton.addEventListener('click', function() {
cartDropdown.classList.toggle('open');
});

// Close cart dropdown when clicking outside


document.addEventListener('click', function(event) {
if (!cartButton.contains(event.target) && !
cartDropdown.contains(event.target)) {
cartDropdown.classList.remove('open');
}
});

// Product Image Gallery


function changeMainImage(thumbnail) {
const thumbnails = document.querySelectorAll('.image-gallery-
thumbnail');
thumbnails.forEach(t => t.classList.remove('active'));
thumbnail.classList.add('active');

const newImageSrc = thumbnail.getAttribute('data-image');


document.getElementById('main-product-image').src = newImageSrc;
}

// Color Swatch Selection


function selectSwatch(swatch) {
const swatches = document.querySelectorAll('.product-swatch');
swatches.forEach(s => s.classList.remove('selected'));
swatch.classList.add('selected');

const selectedColor = swatch.getAttribute('data-color');


console.log('Selected color:', selectedColor);
}

// Size Selection
function selectSize(sizeBtn) {
const sizeBtns = document.querySelectorAll('.size-option');
sizeBtns.forEach(btn => {
btn.classList.remove('border-black');
btn.classList.add('border-gray-300');
});
sizeBtn.classList.remove('border-gray-300');
sizeBtn.classList.add('border-black');

const selectedSize = sizeBtn.textContent.trim();


console.log('Selected size:', selectedSize);
}

// Quantity Adjustment
function updateQuantity(change) {
const quantityInput = document.getElementById('quantity');
let quantity = parseInt(quantityInput.value);
quantity += change;
if (quantity < 1) quantity = 1;
quantityInput.value = quantity;
}

// FAQ Accordion
function toggleFaqAnswer(question) {
const answer = question.nextElementSibling;
const icon = question.querySelector('svg');

answer.classList.toggle('hidden');
icon.classList.toggle('rotate-180');
}

// Add to Cart Functionality


const addToCartButton = document.getElementById('add-to-cart');
let cartItems = [];
let cartTotal = 0;

addToCartButton.addEventListener('click', function() {
// Get selected options
const selectedColor = document.querySelector('.product-
swatch.selected').getAttribute('data-color');
const selectedSize = document.querySelector('.size-option.border-
black').textContent.trim();
const quantity = parseInt(document.getElementById('quantity').value);

// Create cart item


const item = {
name: 'ChicStyle Premium Handbag',
price: 129.99,
color: selectedColor,
size: selectedSize,
quantity: quantity,
image: 'https://placehold.co/800x800'
};

cartItems.push(item);
cartTotal += item.price * item.quantity;

// Update cart display


updateCartDisplay();

// Show success message


alert(`${quantity} ${selectedColor} ${selectedSize} bag${quantity > 1 ?
's' : ''} added to cart!`);

// Reset quantity
document.getElementById('quantity').value = 1;
});

function updateCartDisplay() {
const cartItemsContainer = document.getElementById('cart-items');
const cartCount = document.getElementById('cart-count');
const cartSubtotal = document.getElementById('cart-subtotal');

if (cartItems.length === 0) {
cartItemsContainer.innerHTML = `
<div class="text-center py-8 text-gray-500">
<p>Your cart is empty</p>
</div>
`;
cartCount.textContent = '0';
cartSubtotal.textContent = '$0.00';
return;
}

let itemsHTML = '';


cartItems.forEach((item, index) => {
itemsHTML += `
<div class="flex items-center py-4 border-b border-gray-200">
<div class="flex-shrink-0 mr-4">
<img src="${item.image}" alt="${item.color} $
{item.name}" class="h-16 w-16 rounded-md object-cover">
</div>
<div class="flex-grow">
<h4 class="text-sm font-medium text-gray-900">$
{item.name}</h4>
<p class="text-xs text-gray-500">${item.color} / $
{item.size}</p>
<p class="text-sm text-gray-900">$${(item.price *
item.quantity).toFixed(2)}</p>
</div>
<div class="ml-4">
<button class="text-gray-400 hover:text-red-500"
onclick="removeCartItem(${index})">
<svg class="h-5 w-5" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2
0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</div>
`;
});
cartItemsContainer.innerHTML = itemsHTML;
cartCount.textContent = cartItems.reduce((total, item) => total +
item.quantity, 0);
cartSubtotal.textContent = `$${cartTotal.toFixed(2)}`;
}

function removeCartItem(index) {
cartTotal -= cartItems[index].price * cartItems[index].quantity;
cartItems.splice(index, 1);
updateCartDisplay();
}
</script>
</body>
</html>

You might also like