●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Product listing (cards) grid with images, descriptions and price badges.
- Slide-in cart sidebar with item list, quantity controls, remove action and total calculation.
- Hero section, feature/why-us and testimonials UI blocks.
- Checkout page with an EditForm using DataAnnotations validation and order summary.
- Navigation bar and responsive footer.
## Key components
- Razor UI: nav, card, list-group, buttons and grid (Bootstrap classes).
- Blazor forms: `EditForm`, `DataAnnotationsValidator`, `InputText`, `ValidationMessage`.
- Client code: @bind-Value bindings, event handlers (`AddToCart`, `RemoveFromCart`, `UpdateQuantity`, `Checkout`), lifecycle `OnInitialized`.
- Models: `ProductModel`, `CartItemModel`, `CheckoutModel`, `TestimonialModel`.
## How it works
- Data initialization happens in `OnInitialized` with sample `products` and `testimonials`.
- Product add uses `AddToCart` which updates the in-memory `cartItems` list; UI reads `cartItems` and re-renders via Blazor change detection.
- Cart controls call `UpdateQuantity` and `RemoveFromCart` to modify list items; totals use LINQ sums.
- Checkout uses an `EditForm` bound to `CheckoutModel` and `OnValidSubmit` (`HandleValidSubmit`) to simulate order processing and navigate via `NavigationManager`.
- Validation uses data annotations on `CheckoutModel` and `DataAnnotationsValidator` with `ValidationMessage` components.
## Styling
- Layout uses Bootstrap utility classes (`container`, `row`, `col-*`, `btn`, `card`, `navbar`).
- Local component CSS defines CSS variables (coffee palette), hero background overlay, product card hover transform, and a slide-in cart sidebar (`cart-sidebar`, `cart-open`).
- Responsive behavior relies on Bootstrap grid breakpoints; hero uses a fixed-height background image with an overlay for text readability.
## Reuse steps
1. Add Bootstrap to the project (e.g., CDN link or bundle) and include Font Awesome (icons) in _Host/_Layout.
2. Add the Razor files and model classes (`ProductModel`, `CartItemModel`, `CheckoutModel`, `TestimonialModel`).
3. Copy the component-scoped CSS files or merge CSS variables into a shared stylesheet.
4. Provide a shared cart state or service (singleton/Scoped) if cart must persist across pages instead of local lists.
5. Wire real data and payment integration: replace sample data in `OnInitialized`, implement persistence and secure payment handling in the checkout submit handler.
## Limitations & next steps
- Page is a single-page demo; cart state is in-memory and not persisted or shared across users or sessions.
- No authentication, backend API, inventory checks, or payment gateway integration is included.
- Accessibility enhancements and ARIA attributes for dynamic cart and validation states are not implemented.
- Next steps: extract a shared CartService, add API endpoints for products/orders, integrate a payment provider, and add unit/interaction tests.