Change card for all products page

site/components/common/Navbar/Navbar.tsx

@@ -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>

site/components/product/ProductCard/ProductCard.tsx

@@ -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}>
+      <a className={rootClassName} aria-label={product.name} onMouseLeave={() => setIsHover(false)} onMouseEnter={() => setIsHover(true)}>
-        {variant === 'slim' && (
+        {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>
   )

site/components/product/ProductCardExtended/ProductCardExtended.tsx

@@ -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;

site/components/search.tsx

@@ -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">