docs: update UI components reference with Priority 4 and 5
Add documentation for all new e-commerce macros: Priority 4 - Navigation & Discovery: - Category Navigation: category_nav, mega_menu, mobile_category_drawer - Breadcrumbs: breadcrumbs with variants and schema.org markup - Search Bar: search_bar, search_autocomplete, mobile_search - Filter Sidebar: filter_sidebar, price_filter, rating_filter, sort_dropdown Priority 5 - Social Proof & Trust: - Star Rating: star_rating, rating_input, rating_summary, compact_rating - Reviews: review_card, review_list, review_form, review_summary_section - Trust Badges: trust_badges, trust_banner, payment_icons, guarantee_badge, security_seals, checkout_trust_section Also adds Alpine.js state variables for reviews and ratings. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -484,6 +484,141 @@ Reusable macros for shop/storefront functionality. Located in `app/templates/sha
|
||||
|
||||
**Tab options:** `description`, `specifications`, `reviews`, `shipping`, `warranty`
|
||||
|
||||
### 📂 Category Navigation (Priority 4)
|
||||
```html
|
||||
{% from 'shared/macros/shop/category-nav.html' import category_nav, category_tree, category_menu %}
|
||||
|
||||
{# Sidebar with nested categories #}
|
||||
{{ category_nav(categories_var='categories', current_var='currentCategory', show_count=true) }}
|
||||
|
||||
{# Horizontal pills #}
|
||||
{{ category_tree(categories_var='categories', layout='horizontal') }}
|
||||
|
||||
{# Header dropdown menu #}
|
||||
{{ category_menu(categories_var='mainCategories') }}
|
||||
```
|
||||
|
||||
**Macros:** `category_nav()`, `category_tree()`, `category_menu()`, `category_drawer()`
|
||||
|
||||
### 🍞 Breadcrumbs (Priority 4)
|
||||
```html
|
||||
{% from 'shared/macros/shop/breadcrumbs.html' import shop_breadcrumbs, compact_breadcrumbs %}
|
||||
|
||||
{# Static breadcrumbs #}
|
||||
{{ shop_breadcrumbs(items=[
|
||||
{'label': 'Electronics', 'url': '/electronics'},
|
||||
{'label': 'Audio', 'url': '/audio'},
|
||||
{'label': 'Headphones'}
|
||||
]) }}
|
||||
|
||||
{# Mobile-friendly compact #}
|
||||
{{ compact_breadcrumbs(parent={'label': 'Audio', 'url': '/audio'}, current='Headphones') }}
|
||||
```
|
||||
|
||||
**Macros:** `shop_breadcrumbs()`, `auto_breadcrumbs()`, `compact_breadcrumbs()`
|
||||
|
||||
### 🔍 Search Bar (Priority 4)
|
||||
```html
|
||||
{% from 'shared/macros/shop/search-bar.html' import search_bar, search_autocomplete %}
|
||||
|
||||
{# Basic search #}
|
||||
{{ search_bar(placeholder='Search products...') }}
|
||||
|
||||
{# With search button #}
|
||||
{{ search_bar(placeholder='Search...', show_button=true, size='lg') }}
|
||||
|
||||
{# Autocomplete with suggestions #}
|
||||
{{ search_autocomplete(search_endpoint='/api/search', show_recent=true, show_popular=true) }}
|
||||
```
|
||||
|
||||
**Macros:** `search_bar()`, `search_autocomplete()`, `mobile_search()`, `search_trigger()`
|
||||
|
||||
### 🎛️ Filter Sidebar (Priority 4)
|
||||
```html
|
||||
{% from 'shared/macros/shop/filter-sidebar.html' import filter_sidebar, price_filter, sort_dropdown %}
|
||||
|
||||
{# Complete filter panel #}
|
||||
{{ filter_sidebar(filters_var='filters', active_filters_var='activeFilters', on_change='filterProducts()') }}
|
||||
|
||||
{# Standalone price filter #}
|
||||
{{ price_filter(min=0, max=500, on_change='updateFilters()') }}
|
||||
|
||||
{# Sort dropdown #}
|
||||
{{ sort_dropdown(value_var='sortBy', on_change='sortProducts()') }}
|
||||
```
|
||||
|
||||
**Macros:** `filter_sidebar()`, `price_filter()`, `rating_filter()`, `sort_dropdown()`, `mobile_filter_drawer()`
|
||||
|
||||
### ⭐ Star Rating (Priority 5)
|
||||
```html
|
||||
{% from 'shared/macros/shop/star-rating.html' import star_rating, rating_input, rating_summary, compact_rating %}
|
||||
|
||||
{# Static star rating with half-star support #}
|
||||
{{ star_rating(rating=4.5, show_value=true, show_count=true, count=127) }}
|
||||
|
||||
{# Dynamic rating from Alpine.js #}
|
||||
{{ star_rating(rating_var='product.rating', show_count=true, count_var='product.review_count') }}
|
||||
|
||||
{# Interactive rating input #}
|
||||
{{ rating_input(model='userRating', size='lg', allow_half=true) }}
|
||||
|
||||
{# Rating summary with distribution bars #}
|
||||
{{ rating_summary(rating_var='rating', count_var='reviewCount', distribution_var='ratingDistribution') }}
|
||||
|
||||
{# Compact rating for lists/cards #}
|
||||
{{ compact_rating(rating=4.5, count=127, size='sm') }}
|
||||
```
|
||||
|
||||
**Macros:** `star_rating()`, `rating_input()`, `rating_summary()`, `compact_rating()`
|
||||
|
||||
### 💬 Reviews (Priority 5)
|
||||
```html
|
||||
{% from 'shared/macros/shop/reviews.html' import review_card, review_list, review_form, review_summary_section %}
|
||||
|
||||
{# Single review card with helpful buttons #}
|
||||
{{ review_card(review_var='review', on_helpful='markHelpful(review.id)') }}
|
||||
|
||||
{# Review list with sorting #}
|
||||
{{ review_list(reviews_var='reviews', sort_var='reviewSort', on_helpful='markHelpful') }}
|
||||
|
||||
{# Review submission form #}
|
||||
{{ review_form(rating_model='rating', title_model='title', content_model='content', on_submit='submitReview()') }}
|
||||
|
||||
{# Complete review summary section #}
|
||||
{{ review_summary_section(rating_var='rating', count_var='count', distribution_var='dist', on_write='openForm()') }}
|
||||
```
|
||||
|
||||
**Macros:** `review_card()`, `review_list()`, `review_form()`, `review_summary_section()`
|
||||
|
||||
### 🛡️ Trust Badges (Priority 5)
|
||||
```html
|
||||
{% from 'shared/macros/shop/trust-badges.html' import trust_badges, trust_banner, payment_icons, guarantee_badge, security_seals, checkout_trust_section %}
|
||||
|
||||
{# Trust badges grid #}
|
||||
{{ trust_badges(badges=['secure_payment', 'free_shipping', 'easy_returns', 'support_24_7'], layout='grid') }}
|
||||
|
||||
{# Trust banner variants #}
|
||||
{{ trust_banner() }}
|
||||
{{ trust_banner(variant='compact') }}
|
||||
{{ trust_banner(variant='detailed') }}
|
||||
|
||||
{# Payment method icons #}
|
||||
{{ payment_icons(methods=['visa', 'mastercard', 'paypal', 'apple_pay']) }}
|
||||
{{ payment_icons(methods=['visa', 'mastercard'], size='lg') }}
|
||||
|
||||
{# Guarantee badges #}
|
||||
{{ guarantee_badge(type='money_back', days=30) }}
|
||||
{{ guarantee_badge(type='satisfaction', variant='filled') }}
|
||||
|
||||
{# Security seals #}
|
||||
{{ security_seals(seals=['ssl', 'verified']) }}
|
||||
|
||||
{# Complete checkout trust section #}
|
||||
{{ checkout_trust_section() }}
|
||||
```
|
||||
|
||||
**Macros:** `trust_badges()`, `trust_banner()`, `payment_icons()`, `guarantee_badge()`, `security_seals()`, `checkout_trust_section()`
|
||||
|
||||
### E-commerce Alpine.js State
|
||||
```javascript
|
||||
// Required state variables for e-commerce components
|
||||
@@ -512,6 +647,44 @@ Reusable macros for shop/storefront functionality. Located in `app/templates/sha
|
||||
selectedColor: null,
|
||||
activeProductTab: 'description',
|
||||
|
||||
// Navigation & Discovery (Priority 4)
|
||||
categories: [],
|
||||
currentCategory: null,
|
||||
breadcrumbs: [],
|
||||
|
||||
// Filters (Priority 4)
|
||||
filters: {
|
||||
categories: [],
|
||||
brands: [],
|
||||
priceRange: { min: 0, max: 1000 },
|
||||
attributes: {},
|
||||
ratings: []
|
||||
},
|
||||
activeFilters: {
|
||||
categories: [],
|
||||
brands: [],
|
||||
priceMin: undefined,
|
||||
priceMax: undefined,
|
||||
rating: undefined,
|
||||
attributes: {},
|
||||
inStock: false
|
||||
},
|
||||
sortBy: 'relevance',
|
||||
|
||||
// Mobile UI (Priority 4)
|
||||
showMobileSearch: false,
|
||||
showMobileFilters: false,
|
||||
showCategoryDrawer: false,
|
||||
|
||||
// Reviews & Ratings (Priority 5)
|
||||
reviews: [],
|
||||
reviewSort: 'newest',
|
||||
userRating: 0,
|
||||
ratingDistribution: { 5: 0, 4: 0, 3: 0, 2: 0, 1: 0 },
|
||||
newReview: { rating: 0, title: '', content: '' },
|
||||
submittingReview: false,
|
||||
showReviewForm: false,
|
||||
|
||||
// Wishlist
|
||||
toggleWishlist(product) {
|
||||
product.in_wishlist = !product.in_wishlist;
|
||||
@@ -524,6 +697,23 @@ Reusable macros for shop/storefront functionality. Located in `app/templates/sha
|
||||
},
|
||||
removeFromCart(itemId) {
|
||||
this.cart.items = this.cart.items.filter(i => i.id !== itemId);
|
||||
},
|
||||
|
||||
// Filter actions (Priority 4)
|
||||
filterProducts() {
|
||||
// Apply filters and update products...
|
||||
},
|
||||
sortProducts() {
|
||||
// Sort products by sortBy value...
|
||||
},
|
||||
|
||||
// Review actions (Priority 5)
|
||||
submitReview() {
|
||||
this.submittingReview = true;
|
||||
// API call to submit review...
|
||||
},
|
||||
markHelpful(reviewId, helpful) {
|
||||
// Mark review as helpful/not helpful...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user