feat: add Priority 4 and 5 demos to components showcase page
Add interactive demos for all new e-commerce macros: Priority 4 - Navigation & Discovery: - Category navigation with mega menu - Breadcrumb variants - Search bar with autocomplete - Filter sidebar with all filter types - Sort dropdown Priority 5 - Social Proof & Trust: - Star ratings (static, dynamic, sizes) - Compact ratings for lists - Interactive rating input - Rating summary with distribution - Review cards with helpful voting - Review form - Trust badges grid - Trust banner variants - Payment method icons - Guarantee badges - Security seals - Checkout trust section Demo state includes sample data for categories, filters, reviews, and ratings to showcase all component features. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -223,6 +223,187 @@ function adminComponents() {
|
||||
selectedColor: null,
|
||||
activeProductTab: 'description',
|
||||
|
||||
// Navigation & Discovery Demo (Priority 4)
|
||||
demoCategories: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Electronics',
|
||||
slug: 'electronics',
|
||||
url: '/category/electronics',
|
||||
product_count: 245,
|
||||
children: [
|
||||
{ id: 11, name: 'Audio', slug: 'audio', url: '/category/audio', product_count: 89, children: [
|
||||
{ id: 111, name: 'Headphones', slug: 'headphones', url: '/category/headphones', product_count: 45 },
|
||||
{ id: 112, name: 'Speakers', slug: 'speakers', url: '/category/speakers', product_count: 32 }
|
||||
]},
|
||||
{ id: 12, name: 'Wearables', slug: 'wearables', url: '/category/wearables', product_count: 67 },
|
||||
{ id: 13, name: 'Accessories', slug: 'accessories', url: '/category/accessories', product_count: 89 }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Clothing',
|
||||
slug: 'clothing',
|
||||
url: '/category/clothing',
|
||||
product_count: 512,
|
||||
children: [
|
||||
{ id: 21, name: 'Men', slug: 'men', url: '/category/men', product_count: 234 },
|
||||
{ id: 22, name: 'Women', slug: 'women', url: '/category/women', product_count: 278 }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Home & Garden',
|
||||
slug: 'home-garden',
|
||||
url: '/category/home-garden',
|
||||
product_count: 189
|
||||
}
|
||||
],
|
||||
currentCategory: { id: 111, name: 'Headphones', slug: 'headphones' },
|
||||
demoBreadcrumbs: [
|
||||
{ label: 'Electronics', url: '/category/electronics' },
|
||||
{ label: 'Audio', url: '/category/audio' },
|
||||
{ label: 'Headphones' }
|
||||
],
|
||||
|
||||
// Filter Demo State
|
||||
demoFilters: {
|
||||
categories: [
|
||||
{ id: 'headphones', name: 'Headphones', count: 45 },
|
||||
{ id: 'earbuds', name: 'Earbuds', count: 32 },
|
||||
{ id: 'speakers', name: 'Speakers', count: 28 }
|
||||
],
|
||||
brands: [
|
||||
{ id: 'audiotech', name: 'AudioTech', count: 24 },
|
||||
{ id: 'soundmax', name: 'SoundMax', count: 18 },
|
||||
{ id: 'beatspro', name: 'BeatsPro', count: 15 },
|
||||
{ id: 'sonicwave', name: 'SonicWave', count: 12 }
|
||||
],
|
||||
priceRange: { min: 0, max: 500 },
|
||||
attributes: {
|
||||
color: [
|
||||
{ value: 'black', label: 'Black', hex: '#1a1a1a', count: 35 },
|
||||
{ value: 'white', label: 'White', hex: '#ffffff', count: 28 },
|
||||
{ value: 'silver', label: 'Silver', hex: '#C0C0C0', count: 22 },
|
||||
{ value: 'blue', label: 'Blue', hex: '#3B82F6', count: 15 }
|
||||
],
|
||||
size: [
|
||||
{ value: 'compact', label: 'Compact', count: 18 },
|
||||
{ value: 'standard', label: 'Standard', count: 42 },
|
||||
{ value: 'over-ear', label: 'Over-ear', count: 25 }
|
||||
]
|
||||
},
|
||||
ratings: [
|
||||
{ value: 5, count: 12 },
|
||||
{ value: 4, count: 28 },
|
||||
{ value: 3, count: 15 },
|
||||
{ value: 2, count: 5 },
|
||||
{ value: 1, count: 2 }
|
||||
]
|
||||
},
|
||||
demoActiveFilters: {
|
||||
categories: [],
|
||||
brands: [],
|
||||
priceMin: undefined,
|
||||
priceMax: undefined,
|
||||
rating: undefined,
|
||||
attributes: {},
|
||||
inStock: false
|
||||
},
|
||||
demoSortBy: 'relevance',
|
||||
showMobileSearch: false,
|
||||
showMobileFilters: false,
|
||||
showCategoryDrawer: false,
|
||||
|
||||
// Search Demo Methods
|
||||
demoFilterProducts() {
|
||||
componentsLog.debug('Filtering products with:', this.demoActiveFilters);
|
||||
if (typeof Utils !== 'undefined' && Utils.showToast) {
|
||||
Utils.showToast('Filters applied!', 'info');
|
||||
}
|
||||
},
|
||||
demoSortProducts() {
|
||||
componentsLog.debug('Sorting by:', this.demoSortBy);
|
||||
if (typeof Utils !== 'undefined' && Utils.showToast) {
|
||||
Utils.showToast('Sorted by: ' + this.demoSortBy, 'info');
|
||||
}
|
||||
},
|
||||
|
||||
// Social Proof Demo (Priority 5)
|
||||
demoRating: 4.5,
|
||||
demoReviewCount: 127,
|
||||
demoRatingDistribution: { 5: 68, 4: 35, 3: 15, 2: 6, 3: 3 },
|
||||
demoUserRating: 0,
|
||||
demoReviews: [
|
||||
{
|
||||
id: 1,
|
||||
author_name: 'John D.',
|
||||
author_avatar: null,
|
||||
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. Would highly recommend to anyone looking for premium audio quality.',
|
||||
verified: true,
|
||||
created_at: '2025-01-15',
|
||||
helpful_count: 42,
|
||||
images: []
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
author_name: 'Sarah M.',
|
||||
author_avatar: null,
|
||||
rating: 4,
|
||||
title: 'Great sound, slightly tight fit',
|
||||
content: 'Sound quality is phenomenal and the build quality feels premium. My only complaint is they feel a bit tight after a few hours of continuous use. Otherwise perfect for music lovers.',
|
||||
verified: true,
|
||||
created_at: '2025-01-10',
|
||||
helpful_count: 18,
|
||||
images: []
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
author_name: 'Mike R.',
|
||||
author_avatar: null,
|
||||
rating: 5,
|
||||
title: 'Worth every penny',
|
||||
content: 'These headphones are absolutely worth the investment. The sound stage is wide, bass is punchy but not overwhelming, and the noise cancellation is top-notch.',
|
||||
verified: false,
|
||||
created_at: '2025-01-05',
|
||||
helpful_count: 7,
|
||||
images: []
|
||||
}
|
||||
],
|
||||
demoReviewSort: 'newest',
|
||||
demoNewReview: {
|
||||
rating: 0,
|
||||
title: '',
|
||||
content: '',
|
||||
images: []
|
||||
},
|
||||
submittingReview: false,
|
||||
showReviewForm: false,
|
||||
|
||||
// Review Demo Methods
|
||||
demoSubmitReview() {
|
||||
this.submittingReview = true;
|
||||
setTimeout(() => {
|
||||
this.submittingReview = false;
|
||||
this.showReviewForm = false;
|
||||
this.demoNewReview = { rating: 0, title: '', content: '', images: [] };
|
||||
if (typeof Utils !== 'undefined' && Utils.showToast) {
|
||||
Utils.showToast('Review submitted successfully!', 'success');
|
||||
}
|
||||
}, 1500);
|
||||
},
|
||||
demoMarkHelpful(reviewId) {
|
||||
const review = this.demoReviews.find(r => r.id === reviewId);
|
||||
if (review) {
|
||||
review.helpful_count++;
|
||||
}
|
||||
if (typeof Utils !== 'undefined' && Utils.showToast) {
|
||||
Utils.showToast('Thanks for your feedback!', 'info');
|
||||
}
|
||||
},
|
||||
|
||||
// Sample form data for examples
|
||||
exampleForm: {
|
||||
textInput: 'Sample text',
|
||||
|
||||
Reference in New Issue
Block a user