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:
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user