feat: add e-commerce section to components showcase page

- Add E-commerce section with live demos for all shop macros
- Add demo products and cart state to components.js
- Add demo methods: demoAddToCart, demoToggleWishlist, demoRemoveFromCart
- Showcase product cards, mini cart, add-to-cart functionality
- Add Macros section navigation

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

static/admin/js/components.js

@@ -21,8 +21,10 @@ function adminComponents() {
 
         // Component sections
         sections: [
+            { id: 'ecommerce', name: 'E-commerce', icon: 'shopping-cart' },
             { id: 'macros', name: 'Macros', icon: 'template' },
             { id: 'pagination', name: 'Pagination', icon: 'dots-horizontal' },
+            { id: 'tabs', name: 'Tabs', icon: 'view-boards' },
             { id: 'forms', name: 'Forms', icon: 'clipboard-list' },
             { id: 'buttons', name: 'Buttons', icon: 'cursor-click' },
             { id: 'cards', name: 'Cards', icon: 'collection' },
@@ -33,6 +35,120 @@ function adminComponents() {
             { id: 'charts', name: 'Charts', icon: 'chart-pie' }
         ],
 
+        // Tab demo state
+        demoActiveTab: 'tab1',
+
+        // Number stepper demo state
+        demoQuantitySm: 3,
+        demoQuantityMd: 5,
+        demoQuantityLg: 500,
+
+        // E-commerce demo state
+        demoProducts: [
+            {
+                id: 1,
+                name: 'Premium Wireless Headphones',
+                url: '#',
+                image_url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300&h=300&fit=crop',
+                price: 149.99,
+                sale_price: 119.99,
+                rating: 4.5,
+                review_count: 127,
+                stock: 15,
+                is_new: false,
+                in_wishlist: false
+            },
+            {
+                id: 2,
+                name: 'Smart Watch Pro',
+                url: '#',
+                image_url: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=300&h=300&fit=crop',
+                price: 299.99,
+                sale_price: null,
+                rating: 4.8,
+                review_count: 89,
+                stock: 8,
+                is_new: true,
+                in_wishlist: true
+            },
+            {
+                id: 3,
+                name: 'Portable Bluetooth Speaker',
+                url: '#',
+                image_url: 'https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?w=300&h=300&fit=crop',
+                price: 79.99,
+                sale_price: null,
+                rating: 4.2,
+                review_count: 45,
+                stock: 0,
+                is_new: false,
+                in_wishlist: false
+            }
+        ],
+        demoCart: {
+            items: [
+                {
+                    id: 1,
+                    product_id: 1,
+                    name: 'Premium Wireless Headphones',
+                    url: '#',
+                    image_url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300&h=300&fit=crop',
+                    price: 119.99,
+                    quantity: 1,
+                    variant_name: 'Black',
+                    max_quantity: 15
+                },
+                {
+                    id: 2,
+                    product_id: 2,
+                    name: 'Smart Watch Pro',
+                    url: '#',
+                    image_url: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=300&h=300&fit=crop',
+                    price: 299.99,
+                    quantity: 2,
+                    variant_name: 'Silver',
+                    max_quantity: 8
+                }
+            ],
+            item_count: 3,
+            subtotal: 719.97,
+            discount: 0,
+            shipping: 0,
+            tax: 0,
+            total: 719.97,
+            promo_code: null
+        },
+        showDemoCart: false,
+        demoQuantity: 1,
+        addingToCart: false,
+        addedToCart: false,
+
+        // E-commerce demo methods
+        demoAddToCart(product) {
+            this.addingToCart = true;
+            setTimeout(() => {
+                this.addingToCart = false;
+                this.addedToCart = true;
+                setTimeout(() => { this.addedToCart = false; }, 2000);
+                if (typeof Utils !== 'undefined' && Utils.showToast) {
+                    Utils.showToast('Added to cart!', 'success');
+                }
+            }, 800);
+        },
+        demoToggleWishlist(product) {
+            product.in_wishlist = !product.in_wishlist;
+            const action = product.in_wishlist ? 'Added to' : 'Removed from';
+            if (typeof Utils !== 'undefined' && Utils.showToast) {
+                Utils.showToast(`${action} wishlist`, 'success');
+            }
+        },
+        demoRemoveFromCart(itemId) {
+            this.demoCart.items = this.demoCart.items.filter(i => i.id !== itemId);
+            this.demoCart.item_count = this.demoCart.items.reduce((sum, i) => sum + i.quantity, 0);
+            this.demoCart.subtotal = this.demoCart.items.reduce((sum, i) => sum + (i.price * i.quantity), 0);
+            this.demoCart.total = this.demoCart.subtotal;
+        },
+
         // Sample form data for examples
         exampleForm: {
             textInput: 'Sample text',