Shop
/
Shop-Storefront
4
0
Fork 0
Code Issues 25 Pull Requests Packages Projects 1 Releases Wiki Activity

update: style of show button icon product card

This commit is contained in:
Nam Doan 2025-12-22 15:01:18 +07:00
parent 6912f2605c
commit 2067a23756
3 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
config/nam.mds-starter-design.json
View File

@ -142,6 +142,13 @@
} }
} }
}, },
{
"VtFeaturedProducts": {
"config": {
"title": "best-seller"
}
}
},
{ {
"CartMismatchBanner": { "CartMismatchBanner": {
"config": { "config": {

5
config/nam.vibentec.design.json
View File

@ -237,15 +237,14 @@
"title": "text-ui-fg-subtle text-[18px]", "title": "text-ui-fg-subtle text-[18px]",
"price": "flex items-center gap-x-1 text-[#285A86] font-bold", "price": "flex items-center gap-x-1 text-[#285A86] font-bold",
"button": { "button": {
"addToCart": "w-full h-[40px] bg-black text-white rounded-md", "addToCart": "w-fit h-[40px] bg-black text-white rounded-md",
"moreInfo": "w-full h-[40px] border border-[#285A86] text-[#285A86] rounded-md" "moreInfo": "w-fit h-[40px] border border-[#285A86] text-[#285A86] rounded-md"
} }
} }
} }
} }
} }
}, },
{ {
"CartMismatchBanner": { "CartMismatchBanner": {
"config": { "config": {

11
src/modules/products/components/vt-product-card/index.tsx
View File

@ -6,7 +6,7 @@ import PreviewPrice from "@modules/products/components/product-preview/price"
import { getProductPrice } from "@lib/util/get-product-price" import { getProductPrice } from "@lib/util/get-product-price"
import { addToCart } from "@lib/data/cart" import { addToCart } from "@lib/data/cart"
import VtThumbnail from "../vt-thumbnail" import VtThumbnail from "../vt-thumbnail"
import { Plus, ChevronRight } from "@medusajs/icons"
type ProductCardProps = { type ProductCardProps = {
product: HttpTypes.StoreProduct product: HttpTypes.StoreProduct
badgeText?: string badgeText?: string
@ -67,6 +67,7 @@ export default function ProductCard({
button: { button: {
addToCart: styles?.button?.addToCart || "flex-1", addToCart: styles?.button?.addToCart || "flex-1",
moreInfo: styles?.button?.moreInfo || "w-full", moreInfo: styles?.button?.moreInfo || "w-full",
isShowIcon: styles?.button?.isShowIcon || true,
}, },
} }
@ -123,7 +124,7 @@ export default function ProductCard({
</div> </div>
<Text className="txt-small text-ui-fg-subtle">{description}</Text> <Text className="txt-small text-ui-fg-subtle">{description}</Text>
<Text className="mt-1 txt-small text-ui-fg-muted"> <Text className="my-3 txt-small text-ui-fg-muted">
Lieferzeit: {deliveryTime} Lieferzeit: {deliveryTime}
</Text> </Text>
@ -133,9 +134,8 @@ export default function ProductCard({
disabled={!inStock} disabled={!inStock}
variant="primary" variant="primary"
className={classes.button.addToCart} className={classes.button.addToCart}
data-testid="product-card-add-to-cart"
> >
Add to cart Add to cart {classes.button.isShowIcon && <Plus />}
</Button> </Button>
<LocalizedClientLink <LocalizedClientLink
href={`/products/${product.handle}`} href={`/products/${product.handle}`}
@ -144,9 +144,8 @@ export default function ProductCard({
<Button <Button
variant="secondary" variant="secondary"
className={classes.button.moreInfo} className={classes.button.moreInfo}
data-testid="product-card-more-info"
> >
More Info More Info {classes.button.isShowIcon && <ChevronRight />}
</Button> </Button>
</LocalizedClientLink> </LocalizedClientLink>
</div> </div>