dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Misc fixes: Storefront shop layout, product filter UI improvements, and cart badge styling

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-06-02 19:37:50 +07:00
parent dcdd6d8cac
commit fd8eb38512
10 changed files with 402 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
customer-spa/src/components/ProductCard.tsx
View File

@@ -70,9 +70,9 @@ export function ProductCard({ product, onAddToCart }: ProductCardProps) {
if (isLoading) {
return (
<div className="animate-pulse">
<div className="bg-gray-200 aspect-square rounded-lg mb-4" />
<div className="h-4 bg-gray-200 rounded mb-2" />
<div className="h-4 bg-gray-200 rounded w-2/3" />
<div className="bg-muted aspect-square rounded-lg mb-4" />
<div className="h-4 bg-muted rounded mb-2" />
<div className="h-4 bg-muted rounded w-2/3" />
</div>
);
}
@@ -91,17 +91,17 @@ export function ProductCard({ product, onAddToCart }: ProductCardProps) {
if (cardStyle === 'minimal') {
return gridCols >= 4
? 'overflow-hidden hover:opacity-90 transition-opacity'
: 'overflow-hidden hover:opacity-80 transition-opacity border-b border-gray-100 pb-4';
: 'overflow-hidden hover:opacity-80 transition-opacity border-b border-border pb-4';
}
if (cardStyle === 'overlay') {
return gridCols >= 4
? 'relative overflow-hidden group-hover:shadow-lg transition-all rounded-md'
: 'relative overflow-hidden group-hover:shadow-xl transition-all rounded-lg bg-white';
: 'relative overflow-hidden group-hover:shadow-xl transition-all rounded-lg bg-card';
}
// Default 'card' style
return gridCols >= 4
? 'border border-gray-200 rounded-md overflow-hidden hover:shadow-md transition-shadow bg-white'
: 'border rounded-lg overflow-hidden hover:shadow-lg transition-shadow bg-white';
? 'border border-border rounded-md overflow-hidden hover:shadow-md transition-shadow bg-card'
: 'border border-border rounded-lg overflow-hidden hover:shadow-lg transition-shadow bg-card';
};
const cardClasses = getCardClasses();
@@ -118,7 +118,7 @@ export function ProductCard({ product, onAddToCart }: ProductCardProps) {
<Link to={`/product/${product.slug}`} className="group h-full">
<div className={`${cardClasses} h-full flex flex-col`}>
{/* Image */}
<div className={`relative w-full overflow-hidden bg-gray-100 ${aspectRatioClass}`}>
<div className={`relative w-full overflow-hidden bg-muted ${aspectRatioClass}`}>
{product.image ? (
<img
src={product.image}
@@ -126,7 +126,7 @@ export function ProductCard({ product, onAddToCart }: ProductCardProps) {
className="absolute inset-0 w-full !h-full object-cover object-center group-hover:scale-105 transition-transform duration-300"
/>
) : (
<div className="absolute inset-0 flex items-center justify-center text-gray-400">
<div className="absolute inset-0 flex items-center justify-center text-muted-foreground">
No Image
</div>
)}
@@ -146,12 +146,14 @@ export function ProductCard({ product, onAddToCart }: ProductCardProps) {
<div className="absolute top-2 left-2 z-10">
<button
onClick={handleWishlistClick}
className={`font-[inherit] p-2 rounded-full shadow-md hover:bg-gray-50 flex items-center justify-center transition-all ${inWishlist ? 'bg-red-50' : 'bg-white'
}`}
className={`font-[inherit] p-2 rounded-full shadow-md border flex items-center justify-center transition-all ${
inWishlist
? 'bg-red-50 border-red-100 dark:bg-red-950 dark:border-red-900'
: 'bg-background border-border hover:bg-muted text-foreground'
}`}
title={inWishlist ? 'Remove from wishlist' : 'Add to wishlist'}
>
<Heart className={`w-4 h-4 block transition-all ${inWishlist ? 'fill-red-500 text-red-500' : ''
}`} />
<Heart className={`w-4 h-4 block transition-all ${inWishlist ? 'fill-red-500 text-red-500' : ''}`} />
</button>
</div>
)}
@@ -174,7 +176,7 @@ export function ProductCard({ product, onAddToCart }: ProductCardProps) {
{/* Content */}
<div className={`p-4 flex-1 flex flex-col ${textAlignClass}`}>
<h3 className="text-sm font-medium text-gray-900 mb-2 line-clamp-2 leading-snug group-hover:text-primary transition-colors">
<h3 className="text-sm font-medium text-foreground mb-2 line-clamp-2 leading-snug group-hover:text-primary transition-colors">
{product.name}
</h3>
@@ -182,15 +184,15 @@ export function ProductCard({ product, onAddToCart }: ProductCardProps) {
<div className={`flex items-center gap-2 mb-3 ${(layout.card_text_align || 'left') === 'center' ? 'justify-center' : (layout.card_text_align || 'left') === 'right' ? 'justify-end' : ''}`}>
{product.on_sale && product.regular_price ? (
<>
<span className="text-base font-bold" style={{ color: 'var(--color-primary)' }}>
<span className="text-base font-bold text-primary">
{formatPrice(product.sale_price || product.price)}
</span>
<span className="text-xs text-gray-500 line-through">
<span className="text-xs text-muted-foreground line-through">
{formatPrice(product.regular_price)}
</span>
</>
) : (
<span className="text-base font-bold text-gray-900">
<span className="text-base font-bold text-foreground">
{formatPrice(product.price)}
</span>
)}