{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "frequently-bought-together", "title": "Frequently Bought Together", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/frequently-bought-together/frequently-bought-together.component.ts", "content": "// Edit this file to change the bundle items and copy. State is local -- wire the cart button\n// to your own cart API.\nimport { Component, computed, signal, ChangeDetectionStrategy } from '@angular/core'\nimport { LucideAngularModule, Plus, ShoppingBag, Truck } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\nimport { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'\n\nexport interface FrequentlyBoughtTogetherItem {\n id: string\n name: string\n subtitle: string\n price: number\n image: string\n isMain?: boolean\n}\n\nconst items: FrequentlyBoughtTogetherItem[] = [\n {\n id: 'headphones',\n name: 'Pro Studio Headphones',\n subtitle: 'Space Black ยท Over-Ear Wireless ANC',\n price: 299.0,\n image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&auto=format&fit=crop&q=80',\n isMain: true,\n },\n {\n id: 'case',\n name: 'Premium Hard Shell Case',\n subtitle: 'Weather-resistant EVA shell with plush velvet lining',\n price: 45.0,\n image: 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=500&auto=format&fit=crop&q=80',\n },\n {\n id: 'cable',\n name: 'Braided 3.5mm Audiophile Cable',\n subtitle: '1.5m Silver-plated OFC copper with gold-plated jacks',\n price: 25.0,\n image: 'https://images.unsplash.com/photo-1546435770-a3e426bf472b?w=500&auto=format&fit=crop&q=80',\n },\n]\n\nfunction formatCurrency(val: number): string {\n return '$' + val.toFixed(2)\n}\n\n/**\n * FrequentlyBoughtTogether -- the React block, 1:1: a bundle builder card with a product\n * preview row (deselected items fade to grayscale), a checkbox list of the items, and a\n * summary box with a live 15% bundle discount (two or more items), the delivery note and\n * an \"Add to Cart\" button whose label follows the selection.\n *\n * lucide-angular wraps each in a host, so the Button's `has-[>svg]:px-4`\n * never matches: the cart button carries the `px-4` React's size=\"lg\" resolves to.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-frequently-bought-together, [ui-frequently-bought-together]',\n standalone: true,\n // React renders the Card itself: the host stays out of layout.\n host: { class: 'contents' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCheckboxComponent],\n template: `\n
\n \n
\n

Frequently Bought Together

\n

\n Pair with these recommended essentials for maximum performance and save 15% on the bundle\n

\n
\n\n \n
\n @for (item of items; track item.id; let index = $index) {\n
\n \n \n @if (item.isMain) {\n \n This item\n \n }\n
\n \n {{ item.name }}\n \n \n {{ formatCurrency(item.price) }}\n \n
\n\n @if (index < items.length - 1) {\n \n \n
\n }\n }\n \n\n \n
\n @for (item of items; track item.id) {\n \n
\n \n
\n
\n \n @if (item.isMain) {\n This item: \n }\n {{ item.name }}\n \n @if (item.isMain) {\n Main Item\n }\n
\n

{{ item.subtitle }}

\n
\n
\n \n {{ formatCurrency(item.price) }}\n \n
\n }\n \n\n \n \n
\n
\n {{ selectedCount() >= 2 ? 'Bundle Price' : 'Total Price' }}\n
\n
\n \n {{ formatCurrency(finalPrice()) }}\n \n @if (hasDiscount()) {\n \n {{ formatCurrency(originalTotal()) }}\n \n }\n @if (hasDiscount()) {\n \n Save {{ formatCurrency(discountAmount()) }} (15% Bundle Discount)\n \n }\n
\n
\n \n {{ deliveryNote() }}\n
\n
\n\n \n \n {{ buttonText() }}\n \n \n \n `,\n})\nexport class UiFrequentlyBoughtTogetherComponent {\n protected readonly Plus = Plus\n protected readonly ShoppingBag = ShoppingBag\n protected readonly Truck = Truck\n protected readonly items = items\n protected readonly formatCurrency = formatCurrency\n\n readonly selectedIds = signal(['headphones', 'case', 'cable'])\n\n readonly selectedItems = computed(() => items.filter((item) => this.selectedIds().includes(item.id)))\n readonly selectedCount = computed(() => this.selectedItems().length)\n readonly originalTotal = computed(() => this.selectedItems().reduce((sum, item) => sum + item.price, 0))\n readonly discountRate = computed(() => (this.selectedCount() >= 2 ? 0.15 : 0))\n readonly discountAmount = computed(() => this.originalTotal() * this.discountRate())\n readonly finalPrice = computed(() => this.originalTotal() - this.discountAmount())\n readonly hasDiscount = computed(() => this.discountRate() > 0)\n\n readonly buttonText = computed(() => {\n const count = this.selectedCount()\n if (count === items.length) return `Add all ${items.length} to Cart`\n if (count > 1) return `Add ${count} selected to Cart`\n if (count === 1) return 'Add 1 selected to Cart'\n return 'Select items to add'\n })\n\n readonly deliveryNote = computed(() => {\n const count = this.selectedCount()\n if (count >= 2) return 'Free express delivery included with this bundle'\n if (count === 1) return 'Standard delivery included'\n return 'Select items to view delivery options'\n })\n\n isSelected(id: string): boolean {\n return this.selectedIds().includes(id)\n }\n\n toggleItem(id: string): void {\n this.selectedIds.update((prev) => (prev.includes(id) ? prev.filter((itemId) => itemId !== id) : [...prev, id]))\n }\n\n onRowKeydown(event: KeyboardEvent, id: string): void {\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault()\n this.toggleItem(id)\n }\n }\n\n previewClass(id: string): string {\n return cn(\n 'border-border bg-muted/20 relative flex flex-col rounded-xl border p-3 text-left transition-colors duration-200 sm:p-4',\n this.isSelected(id) ? 'opacity-100' : 'opacity-40 grayscale',\n )\n }\n\n rowClass(id: string): string {\n return cn(\n 'border-border focus-visible:ring-ring flex cursor-pointer items-start justify-between gap-3 rounded-lg border p-3.5 transition-colors select-none focus-visible:ring-2 focus-visible:outline-none sm:items-center',\n this.isSelected(id)\n ? 'bg-card hover:border-primary/40'\n : 'border-border/60 bg-muted/10 opacity-60 hover:opacity-80',\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/frequently-bought-together/frequently-bought-together.component.ts" }, { "path": "packages/registry-angular/blocks/frequently-bought-together/index.ts", "content": "export {\n UiFrequentlyBoughtTogetherComponent,\n type FrequentlyBoughtTogetherItem,\n} from './frequently-bought-together.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/frequently-bought-together/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/checkbox.json" ], "description": "E-commerce frequently bought together bundle builder with interactive product preview cards, checkbox selection, dynamic bundle discount calculation, and one-click cart checkout.", "categories": [ "commerce", "ecommerce" ] }