feat: add Priority 3 demos to components showcase page

Add live demos for:
- Product Gallery with image navigation and thumbnails
- Variant Selector with size buttons and color swatches
- Product Info with title, price, rating, stock status
- Product Tabs with description, specifications, reviews

Add demoProductDetail state with full product data including
images, sizes, colors, specifications, and sample reviews.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-07 17:14:43 +01:00
parent f6fc74acef
commit ecd12b8667
2 changed files with 378 additions and 0 deletions

View File

@@ -149,6 +149,80 @@ function adminComponents() {
this.demoCart.total = this.demoCart.subtotal;
},
// Product Detail Demo (Priority 3)
demoProductDetail: {
id: 1,
name: 'Premium Wireless Headphones',
sku: 'WH-1000XM5',
price: 349.99,
sale_price: 279.99,
rating: 4.7,
review_count: 1247,
stock: 23,
is_new: true,
short_description: 'Industry-leading noise cancellation with exceptional sound quality. 30-hour battery life.',
description: '<p>Experience the next level of silence with our Premium Wireless Headphones. Industry-leading noise cancellation technology lets you focus on what matters most.</p><p>With up to 30 hours of battery life, you can enjoy your favorite music all day long. The soft, pressure-relieving ear pads provide all-day comfort.</p>',
features: [
'Industry-leading noise cancellation',
'30-hour battery life',
'Hi-Res Audio certified',
'Multipoint connection',
'Speak-to-chat technology'
],
specifications: [
{ name: 'Driver Size', value: '40mm' },
{ name: 'Frequency Response', value: '4Hz - 40,000Hz' },
{ name: 'Battery Life', value: '30 hours' },
{ name: 'Charging Time', value: '3 hours' },
{ name: 'Weight', value: '250g' },
{ name: 'Connectivity', value: 'Bluetooth 5.2, 3.5mm' }
],
images: [
{ id: 1, url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&h=800&fit=crop', alt: 'Headphones front view' },
{ id: 2, url: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=800&h=800&fit=crop', alt: 'Headphones side view' },
{ id: 3, url: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=800&h=800&fit=crop', alt: 'Headphones with case' },
{ id: 4, url: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=800&h=800&fit=crop', alt: 'Person wearing headphones' }
],
sizes: [
{ id: 1, name: 'Standard', value: 'standard', stock: 23 },
{ id: 2, name: 'Compact', value: 'compact', stock: 8 }
],
colors: [
{ id: 1, name: 'Black', value: 'black', color_hex: '#1a1a1a', stock: 15 },
{ id: 2, name: 'Silver', value: 'silver', color_hex: '#C0C0C0', stock: 8 },
{ id: 3, name: 'Midnight Blue', value: 'blue', color_hex: '#191970', stock: 0 }
],
reviews: [
{
id: 1,
author_name: 'John D.',
rating: 5,
title: 'Best headphones I\'ve ever owned',
content: 'The noise cancellation is incredible. I use these for work calls and they block out everything. Battery life is amazing too.',
verified: true,
created_at: '2025-01-15',
helpful_count: 42
},
{
id: 2,
author_name: 'Sarah M.',
rating: 4,
title: 'Great sound, slightly tight fit',
content: 'Sound quality is phenomenal. My only complaint is they feel a bit tight after a few hours. Otherwise perfect.',
verified: true,
created_at: '2025-01-10',
helpful_count: 18
}
],
rating_distribution: { 5: 68, 4: 22, 3: 6, 2: 3, 1: 1 },
category: { name: 'Headphones', slug: 'headphones', url: '/category/headphones' },
vendor: { name: 'AudioTech', slug: 'audiotech', url: '/vendor/audiotech' }
},
selectedImage: 0,
selectedSize: null,
selectedColor: null,
activeProductTab: 'description',
// Sample form data for examples
exampleForm: {
textInput: 'Sample text',