From 8fe1315cac6966d37d9ee6758881e0346218f7ff Mon Sep 17 00:00:00 2001 From: Samir Boulahtit Date: Sun, 7 Dec 2025 18:17:30 +0100 Subject: [PATCH] feat: add Priority 4 and 5 demos to components showcase page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/templates/admin/components.html | 750 ++++++++++++++++++++++++++++ static/admin/js/components.js | 181 +++++++ 2 files changed, 931 insertions(+) diff --git a/app/templates/admin/components.html b/app/templates/admin/components.html index 609e98a7..d7e468e8 100644 --- a/app/templates/admin/components.html +++ b/app/templates/admin/components.html @@ -619,6 +619,756 @@ html { Copy Code + + +
+

Category Navigation

+

+ Sidebar navigation with nested categories, collapsible sections, and active state tracking. +

+
+ {# Sidebar Navigation #} +
+

Sidebar Navigation

+ +
+ {# Horizontal Category Menu #} +
+

Horizontal Pills

+ +
+
+ +
+ + +
+

Breadcrumbs

+

+ Navigation trail showing category hierarchy with home link, separator icons, and current page indicator. +

+
+ {# Standard Breadcrumbs #} +
+

Standard Breadcrumbs

+ +
+ {# Compact Breadcrumbs #} +
+

Compact (Mobile-friendly)

+ +
+
+ +
+ + +
+

Search Bar

+

+ Product search with autocomplete, recent searches, popular suggestions, and mobile-optimized full-screen search. +

+
+ {# Basic Search #} +
+

Basic Search

+
+
+ + + + +
+
+
+ {# Search with Button #} +
+

With Search Button

+
+
+ + + + +
+ +
+
+ {# Autocomplete Search #} +
+

With Autocomplete Dropdown

+
+
+
+ + + + + +
+
+
+
+
+ Recent Searches + +
+ +
+
+ Popular Searches +
+ +
+
+
+
+
+
+ +
+ + +
+

Filter Sidebar

+

+ Product filtering with price range, categories, brands, colors, sizes, ratings, and availability. +

+
+ {# Filter Sidebar #} +
+
+

Filters

+ +
+ {# Categories #} +
+
Categories
+
+ +
+
+ {# Price Range #} +
+
Price Range
+
+
+
+ $ + +
+
+ - +
+
+ $ + +
+
+
+
+ {# Availability #} +
+ +
+
+ {# Color & Size Filters #} +
+

Attribute Filters

+ {# Colors #} +
+
Color
+
+ +
+
+ {# Sizes #} +
+
Size
+
+ +
+
+
+ {# Rating & Sort #} +
+

Rating & Sort

+ {# Rating Filter #} +
+
Rating
+
+ +
+
+ {# Sort Dropdown #} +
+
Sort By
+
+ +
+ + + + +
+
+
+
+
+ +
+ + + + + + +
+ {% from 'shared/macros/shop/star-rating.html' import star_rating, rating_input, rating_summary, compact_rating %} +
+

+ + Star Rating +

+

+ Flexible star rating components for displaying and collecting ratings. +

+ +
+ +
+

Static Ratings

+
+
+

Full Stars

+ {{ star_rating(rating=4) }} +
+
+

Half Stars

+ {{ star_rating(rating=4.5) }} +
+
+

Exact Precision

+ {{ star_rating(rating=3.7, precision='exact') }} +
+
+

With Value

+ {{ star_rating(rating=4.5, show_value=true) }} +
+
+

With Count

+ {{ star_rating(rating=4.5, show_count=true, count=127) }} +
+
+

Sizes

+
+ {{ star_rating(rating=4, size='xs') }} + {{ star_rating(rating=4, size='sm') }} + {{ star_rating(rating=4, size='md') }} + {{ star_rating(rating=4, size='lg') }} +
+
+
+
+ + +
+

Dynamic Rating (Alpine.js)

+
+
+ Adjust rating: + + +
+ {{ star_rating(rating_var='demoRating', show_value=true, show_count=true, count_var='demoReviewCount') }} +
+
+ + +
+

Compact Rating

+
+
+

Extra Small

+ {{ compact_rating(rating=4.5, count=127, size='xs') }} +
+
+

Small

+ {{ compact_rating(rating=4.5, count=127, size='sm') }} +
+
+

Medium

+ {{ compact_rating(rating=4.5, count=127, size='md') }} +
+
+
+ + +
+

Interactive Rating Input

+
+
+

Standard Input

+ {{ rating_input(model='demoUserRating', size='md') }} +
+
+

Large with Half Stars

+ {{ rating_input(model='demoUserRating', size='lg', allow_half=true) }} +
+
+
+ + +
+

Rating Summary

+
+ {{ rating_summary(rating_var='demoRating', count_var='demoReviewCount', distribution_var='demoRatingDistribution') }} +
+
+
+ + +
+
+ + +
+ {% from 'shared/macros/shop/reviews.html' import review_card, review_list, review_form, review_summary_section %} +
+

+ + Reviews +

+

+ Complete review system with cards, lists, forms, and summary sections. +

+ +
+ +
+

Review Card

+
+ +
+
+ + +
+

Review Summary Section

+
+ {{ review_summary_section( + rating_var='demoRating', + count_var='demoReviewCount', + distribution_var='demoRatingDistribution', + on_write='showReviewForm = true' + ) }} +
+
+ + +
+

Review Form

+
+ {{ review_form( + rating_model='demoNewReview.rating', + title_model='demoNewReview.title', + content_model='demoNewReview.content', + on_submit='demoSubmitReview()', + submitting_var='submittingReview' + ) }} +
+
+
+ + +
+
+ + +
+ {% from 'shared/macros/shop/trust-badges.html' import trust_badges, trust_banner, payment_icons, guarantee_badge, security_seals, checkout_trust_section %} +
+

+ + Trust Badges +

+

+ Trust signals and security indicators to build customer confidence. +

+ +
+ +
+

Trust Badges

+
+ {{ trust_badges(badges=['secure_payment', 'free_shipping', 'easy_returns', 'support_24_7'], layout='grid', size='md') }} +
+
+ + +
+

Trust Banner

+
+ {{ trust_banner(variant='detailed') }} +
+
+ + +
+

Payment Icons

+
+
+

All Methods

+ {{ payment_icons(methods=['visa', 'mastercard', 'paypal', 'apple_pay', 'google_pay', 'amex']) }} +
+
+

With Label

+ {{ payment_icons(methods=['visa', 'mastercard', 'paypal'], size='lg') }} +
+
+
+ + +
+

Guarantee Badges

+
+
+

Money Back

+ {{ guarantee_badge(type='money_back', days=30) }} +
+
+

Satisfaction

+ {{ guarantee_badge(type='satisfaction', variant='filled') }} +
+
+
+ + +
+

Security Seals

+
+ {{ security_seals(seals=['ssl', 'secure_checkout', 'verified']) }} +
+
+ + +
+

Checkout Trust Section

+
+ {{ checkout_trust_section() }} +
+
+
+ +
diff --git a/static/admin/js/components.js b/static/admin/js/components.js index 498dc133..8a351b85 100644 --- a/static/admin/js/components.js +++ b/static/admin/js/components.js @@ -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',