crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add categories into all products page and complete translation of that page

Browse Source
This commit is contained in:
Daniele Pancottini
2023-02-05 13:07:25 +01:00
parent 59f6c63ce3
commit c211bff2ad
7 changed files with 115 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
site/components/product/ProductCard/ProductCard.tsx
View File

@@ -43,7 +43,7 @@ const ProductCard: FC<Props> = ({
return (
<Link href={`/product/${product.slug}`}>
<a className={rootClassName} aria-label={product.name} onMouseLeave={() => setIsHover(false)} onMouseEnter={() => setIsHover(true)}>
<a className={rootClassName} aria-label={product.name} onMouseOut={() => setIsHover(false)} onMouseOver={() => setIsHover(true)}>
{variant === 'slim' && !isHover && (
<>
<div className={s.header}>
@@ -128,9 +128,6 @@ const ProductCard: FC<Props> = ({
p={6}
w={'full'}
bg={useColorModeValue('white', 'gray.800')}
boxShadow={'2xl'}
rounded={'lg'}
pos={'relative'}
zIndex={1}>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton

84
site/components/product/ProductCardExtended/ProductCardExtended.tsx
View File

@@ -1,84 +0,0 @@
import {
Flex,
Box,
Image,
useColorModeValue,
Stack,
Heading,
Text,
Center
} from '@chakra-ui/react';
import usePrice from '@framework/product/use-price'
import type { Product } from '@commerce/types/product'
import { ImageProps } from 'next/image'
import ProductTag from '../ProductTag'
import { FC } from 'react';
interface Props {
product: Product
imgProps?: Omit<ImageProps, 'src' | 'layout' | 'placeholder' | 'blurDataURL'>
}
const ProductCardExtended: FC<Props> =({
product,
imgProps
}) => {
const { price } = usePrice({
amount: product.price.value,
baseAmount: product.price.retailPrice,
currencyCode: product.price.currencyCode!,
})
const placeholderImg = '/product-img-placeholder.svg';
const IMAGE = product.images[0]?.url || placeholderImg
return (
<Center>
<Box
role={'group'}
p={6}
maxW={'330px'}
w={'full'}
bg={useColorModeValue('white', 'gray.800')}
boxShadow={'2xl'}
rounded={'lg'}
pos={'relative'}
zIndex={1}>
<Box
rounded={'lg'}
mt={-12}
pos={'relative'}
height={'230px'}
>
<Image
rounded={'lg'}
height={230}
width={282}
objectFit={'cover'}
src={IMAGE}
/>
</Box>
<Stack pt={10} align={'center'}>
<Text color={'gray.500'} fontSize={'sm'} textTransform={'uppercase'}>
Brand
</Text>
<Heading fontSize={'2xl'} fontFamily={'body'} fontWeight={500}>
Nice Chair, pink
</Heading>
<Stack direction={'row'} align={'center'}>
<Text fontWeight={800} fontSize={'xl'}>
$57
</Text>
<Text textDecoration={'line-through'} color={'gray.600'}>
$199
</Text>
</Stack>
</Stack>
</Box>
</Center>
);
}
export default ProductCardExtended;