## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/upsell-suggestions.json ``` ## Usage ```tsx import { UpsellSuggestions } from "@/components/restaurant/menu/upsell-suggestions"; export function CartUpsell() { return ( console.log("Added:", item)} /> ); } ``` ## Features - **Smart Recommendations**: AI-powered suggestions based on cart contents - **Multiple Strategies**: Complementary items, upgrades, bundles, and popular additions - **Contextual Messaging**: Personalized reasons for each suggestion - **Visual Appeal**: Image-based suggestions with pricing - **Quick Add**: One-click addition to cart - **Responsive Design**: Adapts to different screen sizes - **A/B Testing Ready**: Track conversion metrics ## Examples ### Basic Suggestions ```tsx ``` ### With Categories ```tsx ``` ### Combo Upgrades ```tsx ``` ### Smart Bundle Suggestions ```tsx ``` ### Time-Based Suggestions ```tsx ``` ### Checkout Upsells ```tsx ``` ## API Reference ### UpsellSuggestions Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `suggestions` | `UpsellItem[]` | `[]` | Array of suggested items | | `categories` | `UpsellCategory[]` | - | Grouped suggestions by category | | `currentItems` | `CartItem[]` | `[]` | Current cart items for context | | `variant` | `"inline" \| "modal" \| "checkout" \| "upgrade" \| "bundle"` | `"inline"` | Display variant | | `onAddItem` | `(item: UpsellItem) => void` | - | Callback when item is added | | `onDismiss` | `() => void` | - | Callback when suggestions are dismissed | | `maxSuggestions` | `number` | `3` | Maximum number of suggestions to show | | `title` | `string` | `"You might also like"` | Section title | | `showReasons` | `boolean` | `true` | Whether to show recommendation reasons | | `layout` | `"horizontal" \| "vertical" \| "grid"` | `"horizontal"` | Layout style | | `autoRotate` | `boolean` | `false` | Auto-rotate through suggestions | | `className` | `string` | - | Additional CSS classes | ### UpsellItem Interface ```tsx interface UpsellItem { id: string; name: string; description?: string; price: number; originalPrice?: number; image: string; reason?: string; tag?: string; // "Popular", "Limited Time", etc. category?: string; nutritionInfo?: NutritionInfo; modifiers?: ModifierGroup[]; } ``` ### UpsellCategory Interface ```tsx interface UpsellCategory { id: string; title: string; description?: string; items: UpsellItem[]; maxItems?: number; icon?: ReactNode; } ``` ## Styling ### Custom Themes ```tsx ``` ### Dark Mode Support The component automatically adapts to dark mode: ```tsx ``` ## Best Practices ### Recommendation Strategies 1. **Complementary Items**: Suggest items that go well together 2. **Popular Pairings**: Show what others frequently order 3. **Meal Completion**: Fill gaps in the order (drink, side, dessert) 4. **Upgrades**: Offer larger sizes or premium versions 5. **Bundles**: Create value through combination deals ### Timing and Placement ```tsx // Add to cart moment // Pre-checkout // Post-order ``` ### Performance Optimization ```tsx // Lazy load suggestions const { data: suggestions } = useSWR( `/api/upsell/${cartId}`, fetcher, { revalidateOnFocus: false, dedupingInterval: 60000 // 1 minute } ); ``` ## Analytics Integration ```tsx { // Track conversion analytics.track('Upsell Accepted', { item_id: item.id, item_name: item.name, item_price: item.price, suggestion_position: item.position, suggestion_reason: item.reason }); handleAddToCart(item); }} onDismiss={() => { // Track dismissal analytics.track('Upsell Dismissed', { suggestions_shown: suggestions.length }); }} onView={(item) => { // Track impression analytics.track('Upsell Viewed', { item_id: item.id, position: item.position }); }} /> ``` ## Accessibility - **Keyboard Navigation**: Arrow keys to navigate suggestions - **Screen Reader Support**: Descriptive labels and announcements - **Focus Management**: Clear focus indicators - **Skip Option**: Easy way to dismiss suggestions - **High Contrast**: Proper color contrast ratios ## Related Components - [Menu Item Card](/docs/components/menu/menu-item-card) - Display individual items - [Product Bundle](/docs/components/product/product-bundle) - Bundle configurations - [Promo Banner](/docs/components/marketing/promo-banner) - Promotional messaging - [Cart](/docs/components/cart/cart) - Shopping cart integration

Upsell Suggestions