product card is now pengui ui
This commit is contained in:
@@ -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.
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user