Shopping Cart (${cartItems.reduce((sum, item) => sum + item.quantity, 0)} ${cartItems.reduce((sum, item) => sum + item.quantity, 0) === 1 ? 'item' : 'items'})

🛒

Your cart is empty

Add some products to get started!

${item.name}

${item.price | currency:'USD'} each

(max)

${(item.price * item.quantity) | currency:'USD'}

Order Summary

Subtotal: ${cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0) | currency:'USD'}

Tax (8%): ${cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0) * 0.08 | currency:'USD'}

Shipping: ${cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0) >= 50 ? 'FREE' : (5.99 | currency:'USD')}

💡 Add ${(50 - cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0)) | currency:'USD'} more for free shipping!

Total: ${(cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0) + cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0) * 0.08 + (cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0) >= 50 ? 0 : 5.99)) | currency:'USD'}

``` When items are removed or reordered, Aurelia reuses DOM elements. ### 5. Quantity Validation Multiple ways to update quantity with validation: ```typescript updateQuantity(item: CartItem, newQuantity: number) { if (newQuantity <= 0) { this.removeItem(item); } else if (newQuantity <= item.maxQuantity) { item.quantity = newQuantity; } else { item.quantity = item.maxQuantity; alert(`Maximum quantity is ${item.maxQuantity}`); } } ``` ### 6. Conditional Rendering Show different UI based on cart state: ```html

``` Lambda expressions work seamlessly with conditionals: `if.bind="cartItems.length"` or `if.bind="!cartItems.length"`. ### 7. Currency Formatting with Value Converter The currency value converter formats prices consistently: ```html ${product.price | currency:'USD'} ``` The converter uses `Intl.NumberFormat` for proper currency formatting including the currency symbol, decimal places, and thousands separators. This keeps formatting logic out of the view model. ### 8. When to Use Lambda Expressions vs Computed Properties **Use lambda expressions in templates when:** * The calculation is only needed in the view * The logic is straightforward and readable inline * You want to reduce view model boilerplate **Use computed properties in the view model when:** * The calculation is complex and would make the template hard to read * The value is used in multiple places (template and view model logic) * You need to unit test the calculation logic * The calculation is expensive and you want explicit memoization For this shopping cart example, the calculations are simple arithmetic operations that are only displayed to the user, making lambda expressions a great fit. They eliminate boilerplate while keeping the template clear and maintainable. ## Variations ### Persist Cart to LocalStorage ```typescript export class ShoppingCart { cartItems: CartItem[] = []; constructor() { this.loadCart(); } private loadCart() { const saved = localStorage.getItem('cart'); if (saved) { this.cartItems = JSON.parse(saved); } } private saveCart() { localStorage.setItem('cart', JSON.stringify(this.cartItems)); } addToCart(product: any) { // ... existing logic this.saveCart(); } removeItem(item: CartItem) { // ... existing logic this.saveCart(); } } ``` ### Add Discount Codes ```typescript export class ShoppingCart { discountCode = ''; discountPercentage = 0; applyDiscount() { const codes: Record = { 'SAVE10': 10, 'SAVE20': 20, 'FREESHIP': 0 // Handle free shipping separately }; if (codes[this.discountCode.toUpperCase()]) { this.discountPercentage = codes[this.discountCode.toUpperCase()]; } else { alert('Invalid discount code'); } } } ``` ```html

Discount (${discountPercentage}%): -${cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0) * (discountPercentage / 100) | currency:'USD'}

Total: ${(cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0) * (1 - discountPercentage / 100) + cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0) * 0.08 + (cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0) >= 50 ? 0 : 5.99)) | currency:'USD'}

``` ### Cart as a Service Make the cart available throughout the app: ```typescript // cart.service.ts import { DI } from 'aurelia'; export const ICartService = DI.createInterface( 'ICartService', x => x.singleton(CartService) ); export interface ICartService extends CartService {} export class CartService { cartItems: CartItem[] = []; // ... all cart methods } // Use in components import { resolve } from 'aurelia'; import { ICartService } from './cart.service'; export class ProductList { private readonly cart = resolve(ICartService); addToCart(product: Product) { this.cart.addToCart(product); } } ``` ## Related * [Product Catalog Recipe](https://docs.aurelia.io/templates/real-world-recipes/product-catalog) * [Lambda Expressions Guide](https://docs.aurelia.io/templates/lambda-expressions) * [List Rendering Guide](https://docs.aurelia.io/templates/repeats-and-list-rendering) * [Computed Properties](https://docs.aurelia.io/introduction/essentials/reactivity) * [Value Converters](https://docs.aurelia.io/templates/value-converters)