mirror of
https://github.com/vercel/commerce.git
synced 2025-05-16 14:36:59 +00:00
Change card for all products page
This commit is contained in:
Daniele Pancottini
parent
dbc295d970
commit
59f6c63ce3
@ -24,7 +24,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
|
||||
onClose: onCloseDrawer,
|
||||
} = useDisclosure()
|
||||
|
||||
const { locale } = useRouter()
|
||||
const { locale, pathname } = useRouter()
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -44,7 +44,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
|
||||
<nav className={s.navMenu}>
|
||||
<Link href="/search">
|
||||
<a className={s.link}>
|
||||
{locale === 'it' ? 'Prodotti' : 'Products'}
|
||||
{locale === 'it' ? 'Vetrina' : 'Shop'}
|
||||
</a>
|
||||
</Link>
|
||||
{links?.map((l) => (
|
||||
@ -60,7 +60,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
{process.env.COMMERCE_SEARCH_ENABLED && (
|
||||
{process.env.COMMERCE_SEARCH_ENABLED && pathname.includes("search") && (
|
||||
<div className="justify-center flex-1 hidden lg:flex">
|
||||
<Searchbar />
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FC } from 'react'
|
||||
import { FC, useState } from 'react'
|
||||
import cn from 'clsx'
|
||||
import Link from 'next/link'
|
||||
import type { Product } from '@commerce/types/product'
|
||||
@ -7,6 +7,8 @@ import Image, { ImageProps } from 'next/image'
|
||||
import WishlistButton from '@components/wishlist/WishlistButton'
|
||||
import usePrice from '@framework/product/use-price'
|
||||
import ProductTag from '../ProductTag'
|
||||
import ProductCardExtended from '../ProductCardExtended/ProductCardExtended'
|
||||
import { Stack, Text, Heading, Box, useColorModeValue } from '@chakra-ui/react'
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
@ -37,10 +39,12 @@ const ProductCard: FC<Props> = ({
|
||||
className
|
||||
)
|
||||
|
||||
const [isHover, setIsHover] = useState(false)
|
||||
|
||||
return (
|
||||
<Link href={`/product/${product.slug}`}>
|
||||
<a className={rootClassName} aria-label={product.name}>
|
||||
{variant === 'slim' && (
|
||||
<a className={rootClassName} aria-label={product.name} onMouseLeave={() => setIsHover(false)} onMouseEnter={() => setIsHover(true)}>
|
||||
{variant === 'slim' && !isHover && (
|
||||
<>
|
||||
<div className={s.header}>
|
||||
<span>{product.name}</span>
|
||||
@ -61,7 +65,7 @@ const ProductCard: FC<Props> = ({
|
||||
</>
|
||||
)}
|
||||
|
||||
{variant === 'simple' && (
|
||||
{variant === 'simple' && !isHover && (
|
||||
<>
|
||||
{process.env.COMMERCE_WISHLIST_ENABLED && (
|
||||
<WishlistButton
|
||||
@ -70,16 +74,6 @@ const ProductCard: FC<Props> = ({
|
||||
variant={product.variants[0]}
|
||||
/>
|
||||
)}
|
||||
{!noNameTag && (
|
||||
<div className={s.header}>
|
||||
<h3 className={s.name}>
|
||||
<span>{product.name}</span>
|
||||
</h3>
|
||||
<div className={s.price}>
|
||||
{`${price} ${product.price?.currencyCode}`}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={s.imageContainer}>
|
||||
{product?.images && (
|
||||
<div>
|
||||
@ -99,7 +93,7 @@ const ProductCard: FC<Props> = ({
|
||||
</>
|
||||
)}
|
||||
|
||||
{variant === 'default' && (
|
||||
{variant === 'default' && !isHover && (
|
||||
<>
|
||||
{process.env.COMMERCE_WISHLIST_ENABLED && (
|
||||
<WishlistButton
|
||||
@ -108,10 +102,6 @@ const ProductCard: FC<Props> = ({
|
||||
variant={product.variants[0] as any}
|
||||
/>
|
||||
)}
|
||||
<ProductTag
|
||||
name={product.name}
|
||||
price={`${price} ${product.price?.currencyCode}`}
|
||||
/>
|
||||
<div className={s.imageContainer}>
|
||||
{product?.images && (
|
||||
<div>
|
||||
@ -130,6 +120,55 @@ const ProductCard: FC<Props> = ({
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isHover && (
|
||||
<>
|
||||
<Box
|
||||
role={'group'}
|
||||
p={6}
|
||||
w={'full'}
|
||||
bg={useColorModeValue('white', 'gray.800')}
|
||||
boxShadow={'2xl'}
|
||||
rounded={'lg'}
|
||||
pos={'relative'}
|
||||
zIndex={1}>
|
||||
{process.env.COMMERCE_WISHLIST_ENABLED && (
|
||||
<WishlistButton
|
||||
className={s.wishlistButton}
|
||||
productId={product.id}
|
||||
variant={product.variants[0] as any}
|
||||
/>
|
||||
)}
|
||||
<div className={s.imageContainer}>
|
||||
{product?.images && (
|
||||
<div>
|
||||
<Image
|
||||
alt={product.name || 'Product Image'}
|
||||
className={s.productImage}
|
||||
src={product.images[0]?.url || placeholderImg}
|
||||
height={540}
|
||||
width={540}
|
||||
quality="85"
|
||||
layout="responsive"
|
||||
{...imgProps}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Stack backgroundColor={"white"} pt={10} align={'center'}>
|
||||
<Heading fontSize={'lg'} fontFamily={'body'} fontWeight={500} textAlign={"center"}>
|
||||
{product.name}
|
||||
</Heading>
|
||||
<Stack direction={'row'} align={'center'}>
|
||||
<Text fontWeight={800} fontSize={'xl'}>
|
||||
{`${price} ${product.price?.currencyCode}`}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
|
||||
@ -0,0 +1,84 @@
|
||||
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;
|
||||
@ -168,107 +168,6 @@ export default function Search({ categories, brands }: SearchPropsType) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Designs */}
|
||||
<div className="relative inline-block w-full">
|
||||
<div className="lg:hidden mt-3">
|
||||
<span className="rounded-md shadow-sm">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => handleClick(e, 'brands')}
|
||||
className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-8 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
|
||||
id="options-menu"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true"
|
||||
>
|
||||
{activeBrand?.name
|
||||
? `Design: ${activeBrand?.name}`
|
||||
: 'All Designs'}
|
||||
<svg
|
||||
className="-mr-1 ml-2 h-5 w-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`origin-top-left absolute lg:relative left-0 mt-2 w-full rounded-md shadow-lg lg:shadow-none z-10 mb-10 lg:block ${
|
||||
activeFilter !== 'brands' || toggleFilter !== true
|
||||
? 'hidden'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
|
||||
<div
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="options-menu"
|
||||
>
|
||||
<ul>
|
||||
<li
|
||||
className={cn(
|
||||
'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
|
||||
{
|
||||
underline: !activeBrand?.name,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
href={{
|
||||
pathname: getDesignerPath('', category),
|
||||
query,
|
||||
}}
|
||||
>
|
||||
<a
|
||||
onClick={(e) => handleClick(e, 'brands')}
|
||||
className={
|
||||
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
|
||||
}
|
||||
>
|
||||
All Designers
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
{brands.map(({ path, name, id }: Brand) => (
|
||||
<li
|
||||
key={path}
|
||||
className={cn(
|
||||
'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
|
||||
{
|
||||
underline: activeBrand?.id === id,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
href={{
|
||||
pathname: getDesignerPath(path, category),
|
||||
query,
|
||||
}}
|
||||
>
|
||||
<a
|
||||
onClick={(e) => handleClick(e, 'brands')}
|
||||
className={
|
||||
'block lg:inline-block px-4 py-2 lg:p-0 lg:my-2 lg:mx-4'
|
||||
}
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Products */}
|
||||
<div className="col-span-8 order-3 lg:order-none">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user