product card is now pengui ui

This commit is contained in:
Priec
2026-06-17 21:16:28 +02:00
parent c401acb1cc
commit 126b1eeb7e
4 changed files with 78 additions and 21 deletions

View File

@@ -127,18 +127,15 @@ and then use it (instead of hand-rolling):
---
## 6. Product Card
## 6. Product Card — ✅ DONE
**Penguin UI: `card/ecommerce-product-card.html`**
| # | Location | What it is | Size |
|---|----------|------------|------|
| 11 | `assets/views/shop/_card.html:1-30` | E-commerce product card: image, name, price, stock, add-to-cart button | ~30 lines |
**Details:**
- `aspect-square` image container with `group-hover:scale-105` zoom effect
- Product name + price in a flex column
- Bottom section: conditional stock text OR out-of-stock badge + `<form>` with htmx `hx-post` add-to-cart
- Inline toast call on successful add: `hx-on::after-request="... toast()"` (toast excluded per scope)
- Exact upstream mirror at `assets/views/penguinui/card/ecommerce-product-card.html` (reference only)
- Adapted/rendered copy is `assets/views/shop/_card.html`: `<article>` shell + Penguin
image/title/price layout and the cart-icon add-to-cart button, wired to our product
data + i18n + htmx `hx-post` add-to-cart + `toast()`. Demo-only rating stars,
hardcoded content and `max-w-sm` (fights the shop grid) were dropped; whole card
links to the product page; out-of-stock badge kept.
---