From ecd12b86670b3d398ad656490bb8da553c810a90 Mon Sep 17 00:00:00 2001 From: Samir Boulahtit Date: Sun, 7 Dec 2025 17:14:43 +0100 Subject: [PATCH] feat: add Priority 3 demos to components showcase page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/templates/admin/components.html | 304 ++++++++++++++++++++++++++++ static/admin/js/components.js | 74 +++++++ 2 files changed, 378 insertions(+) diff --git a/app/templates/admin/components.html b/app/templates/admin/components.html index 74b5de88..609e98a7 100644 --- a/app/templates/admin/components.html +++ b/app/templates/admin/components.html @@ -315,6 +315,310 @@ html { Copy Code + + +
+

Product Gallery

+

+ Image gallery with thumbnails, navigation, zoom on hover, and fullscreen lightbox. +

+
+
+
+ {# Main Image #} +
+
+ +
+ +
+
+ {# Navigation Arrows #} + + +
+ {# Thumbnails #} +
+ +
+
+
+
+ +
+ + +
+

Variant Selector

+

+ Product variant selection with button groups and color swatches. Supports out-of-stock indicators. +

+
+
+ {# Size Selector #} +
+
+ + +
+
+ +
+
+ {# Color Swatches #} +
+
+ + +
+
+ +
+
+
+
+ +
+ + +
+

Product Info

+

+ Product details section with title, price, rating, stock status, and description. +

+
+
+ {# Category / Vendor #} +
+ + • + Sold by +
+ {# Title #} +

+ {# Rating #} +
+
+ +
+ + ( reviews) +
+ {# Price #} +
+ + + +
+ {# Description #} +

+ {# Stock Status #} +
+ + In Stock +
+
+
+ +
+ + +
+

Product Tabs

+

+ Tabbed content for product description, specifications, reviews, and shipping info. +

+
+
+ {# Tab Navigation #} +
+ +
+ {# Tab Content #} +
+ {# Description Tab #} +
+
+
+

Key Features

+
    + +
+
+
+ {# Specifications Tab #} +
+
+ + + + +
+
+
+ {# Reviews Tab #} +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
diff --git a/static/admin/js/components.js b/static/admin/js/components.js index e4758af8..498dc133 100644 --- a/static/admin/js/components.js +++ b/static/admin/js/components.js @@ -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: '

Experience the next level of silence with our Premium Wireless Headphones. Industry-leading noise cancellation technology lets you focus on what matters most.

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.

', + 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',