Add Product Card config Guideline
parent
410716276d
commit
ca4cdc0436
|
|
@ -0,0 +1,108 @@
|
||||||
|
# Using `VtFeaturedProducts`
|
||||||
|
|
||||||
|
- Renders product rails for one or more collections with customizable styles.
|
||||||
|
- Filters by collection `handle` or `title` via `config.title`.
|
||||||
|
- Auto-fetches collections and products using the page `region` and `countryCode` from context.
|
||||||
|
|
||||||
|
## JSON Config
|
||||||
|
|
||||||
|
- Place the component under a page key in your design JSON. Example from `config/nam.3bear.design.json`:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"pages": {
|
||||||
|
"Home": [
|
||||||
|
{
|
||||||
|
"VtFeaturedProducts": {
|
||||||
|
"config": {
|
||||||
|
"title": "best-seller",
|
||||||
|
"styles": {
|
||||||
|
"container": "content-container py-12 small:py-20",
|
||||||
|
"header": { "container": "hidden", "title": "hidden", "isShowViewAll": false },
|
||||||
|
"list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
|
||||||
|
"productCard": {
|
||||||
|
"badgeText": "Bestseller",
|
||||||
|
"card": "relative flex flex-col items-center bg-transparent shadow-none border-none p-0",
|
||||||
|
"badge": { "container": "absolute top-4 left-4", "text": "px-3 py-1 rounded-full bg-[#009b93] text-white text-[12px] font-semibold" },
|
||||||
|
"thumbnail": { "className": "rounded-2xl bg-white h-[320px] object-contain", "size": "full" },
|
||||||
|
"content": "flex flex-col items-center justify-start text-center p-0 mt-6",
|
||||||
|
"title": "text-[#003F31] text-[28px] font-semibold",
|
||||||
|
"description": "order-3 text-[#003f31b3]",
|
||||||
|
"price": "mt-2 text-[#0D382E] text-[24px] font-bold order-2 flex gap-2",
|
||||||
|
"reviews": { "container": "mt-3 flex items-center gap-2 order-1", "stars": "flex gap-1", "star": "text-[#F59E0B] text-xl leading-none", "emptyStar": "text-[#F59E0B] text-xl opacity-30 leading-none", "text": "text-[#003F31] text-[14px]", "rating": 4.5, "count": 38 },
|
||||||
|
"button": { "addToCart": "hidden", "moreInfo": "hidden", "isShowIcon": false }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Fields
|
||||||
|
|
||||||
|
- `config.title`
|
||||||
|
- Matches a collection by `handle` or `title` and limits rails to that match.
|
||||||
|
- Reference: `src/modules/home/components/vt-featured-products/index.tsx:`.
|
||||||
|
- `config.styles.container`
|
||||||
|
- Wrapper classes for the rail container.
|
||||||
|
- Default: `content-container py-12 px-[100px] small:py-24`.
|
||||||
|
- Reference: `src/modules/home/components/vt-featured-products/product-rail/index.tsx`.
|
||||||
|
- `config.styles.header`
|
||||||
|
- `container`: wrapper classes for title + view-all.
|
||||||
|
- `title`: classes for collection title text.
|
||||||
|
- `isShowViewAll`: show/hide the "View all" link.
|
||||||
|
- Defaults: `container: flex justify-between mb-8`, `title: txt-xlarge`, `isShowViewAll: true`.
|
||||||
|
- Reference: `src/modules/home/components/vt-featured-products/product-rail/index.tsx`.
|
||||||
|
- `config.styles.list`
|
||||||
|
- Grid classes for product cards.
|
||||||
|
- Default: `grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36`.
|
||||||
|
- Reference: `src/modules/home/components/vt-featured-products/product-rail/index.tsx`.
|
||||||
|
- `config.styles.productCard`
|
||||||
|
- Styles forwarded to the card component.
|
||||||
|
- Keys:
|
||||||
|
- `badgeText`: text for the badge above the thumbnail.
|
||||||
|
- `card`: outer card container classes.
|
||||||
|
- `badge.container`, `badge.text`: badge styling.
|
||||||
|
- `thumbnail.className`, `thumbnail.size`: image styling and size (`full` by default).
|
||||||
|
- `subtitle`, `content`, `title`, `price`, `description`: card text/layout classes.
|
||||||
|
- `reviews.container`, `reviews.stars`, `reviews.star`, `reviews.emptyStar`, `reviews.text`, `reviews.rating`, `reviews.count`.
|
||||||
|
- `button.addToCart`, `button.moreInfo`, `button.isShowIcon`.
|
||||||
|
- Defaults reference: `src/modules/products/components/vt-product-card/index.tsx`.
|
||||||
|
|
||||||
|
## Placement
|
||||||
|
|
||||||
|
- Add `VtFeaturedProducts` under the relevant page key to control visibility. Example:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"pages": {
|
||||||
|
"Home": [
|
||||||
|
{ "VtFeaturedProducts": { "config": { "title": "best-seller" } } }
|
||||||
|
],
|
||||||
|
"Product": [
|
||||||
|
{ "VtFeaturedProducts": { "config": { "title": "best-seller" } } }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- Rendering context supplies `region` and `countryCode` automatically. The component reads them from context and fetches collections/products as needed.
|
||||||
|
- Reference: `src/modules/home/components/vt-featured-products/index.tsx`.
|
||||||
|
- Component mapping: `src/vibentec/component-map.tsx`.
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- Use `config.title` to narrow to a single collection rail; omit to render rails for all collections.
|
||||||
|
- Tweak `styles.header.isShowViewAll` to hide the link when not needed.
|
||||||
|
- Provide `reviews.rating` and `reviews.count` to display review stars and count.
|
||||||
|
- Buttons can be customized or hidden via `styles.productCard.button`.
|
||||||
|
|
||||||
|
## References
|
||||||
|
|
||||||
|
- Config example: `config/nam.3bear.design.json`.
|
||||||
|
- Component: `src/modules/home/components/vt-featured-products/index.tsx`.
|
||||||
|
- Rail renderer: `src/modules/home/components/vt-featured-products/product-rail/index.tsx`.
|
||||||
|
- Card component: `src/modules/products/components/vt-product-card/index.tsx`.
|
||||||
Loading…
Reference in New Issue