Merge branch 'master' of https://github.com/okbel/e-comm-example

components/product/ProductCard/ProductCard.module.css

@@ -1,5 +1,6 @@
 .root {
-  @apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
+  @apply relative max-h-full w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
+  height: 100% !important;
 
   &:hover {
     & .squareBg:before {
@@ -119,17 +120,19 @@
 }
 
 .wishlistButton {
-  @apply w-10 h-10 flex ml-auto flex items-center justify-center bg-primary text-primary font-semibold  text-xs leading-6 cursor-pointer z-10;
+  @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold  text-xs leading-6 cursor-pointer;
 }
 
 .imageContainer {
-  @apply absolute z-10 inset-0 flex items-center justify-center;
-
   & > div {
-    @apply h-full;
     & > div {
-      @apply h-full;
-      padding-bottom: 0 !important;
+      height: 100%;
+      margin: 0 auto;
     }
   }
 }
+
+.product-image {
+  height: 120% !important;
+  top: -10% !important;
+}

components/product/ProductCard/ProductCard.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
-import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
-import usePrice from '@lib/bigcommerce/use-price'
+import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
+import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
 import { EnhancedImage } from '@components/core'
 import s from './ProductCard.module.css'
 import WishlistButton from '@components/wishlist/WishlistButton'
@@ -31,56 +31,56 @@ const ProductCard: FC<Props> = ({
     currencyCode: p.prices?.price?.currencyCode!,
   })
 
-  if (variant === 'slim') {
-    return (
-      <div className="relative overflow-hidden box-border">
-        <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
-          <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
-            {p.name}
-          </span>
-        </div>
-        <EnhancedImage
-          src={p.images.edges?.[0]?.node.urlOriginal!}
-          alt={p.images.edges?.[0]?.node.altText || 'Product Image'}
-          width={imgWidth}
-          height={imgHeight}
-          priority={priority}
-          quality="90"
-        />
-      </div>
-    )
-  }
-
   return (
     <Link href={`/product${p.path}`}>
       <a
         className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
       >
-        <div className={s.squareBg} />
-        <div className="flex flex-row justify-between box-border w-full z-20 absolute">
-          <div className="absolute top-0 left-0 pr-16 max-w-full">
-            <h3 className={s.productTitle}>
-              <span>{p.name}</span>
-            </h3>
-            <span className={s.productPrice}>{price}</span>
+        {variant === 'slim' ? (
+          <div className="relative overflow-hidden box-border">
+            <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
+              <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
+                {p.name}
+              </span>
+            </div>
+            <EnhancedImage
+              src={p.images.edges?.[0]?.node.urlOriginal!}
+              alt={p.images.edges?.[0]?.node.altText || 'Product Image'}
+              width={imgWidth}
+              height={imgHeight}
+              priority={priority}
+              quality="90"
+            />
           </div>
-          <WishlistButton
-            className={s.wishlistButton}
-            productId={p.entityId}
-            variant={p.variants.edges?.[0]!}
-          />
-        </div>
-        <div className={cn(s.imageContainer)}>
-          <EnhancedImage
-            alt={p.name}
-            className={cn('w-full object-cover', s['product-image'])}
-            src={src}
-            width={imgWidth}
-            height={imgHeight}
-            priority={priority}
-            quality="90"
-          />
-        </div>
+        ) : (
+          <>
+            <div className={s.squareBg} />
+            <div className="flex flex-row justify-between box-border w-full z-20 absolute">
+              <div className="absolute top-0 left-0 pr-16 max-w-full">
+                <h3 className={s.productTitle}>
+                  <span>{p.name}</span>
+                </h3>
+                <span className={s.productPrice}>{price}</span>
+              </div>
+              <WishlistButton
+                className={s.wishlistButton}
+                productId={p.entityId}
+                variant={p.variants.edges?.[0]!}
+              />
+            </div>
+            <div className={s.imageContainer}>
+              <EnhancedImage
+                alt={p.name}
+                className={cn('w-full object-cover', s['product-image'])}
+                src={src}
+                width={imgWidth}
+                height={imgHeight}
+                priority={priority}
+                quality="90"
+              />
+            </div>
+          </>
+        )}
       </a>
     </Link>
   )

components/product/ProductView/ProductView.tsx

@@ -9,8 +9,8 @@ import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container } from '@components/ui'
 import { HTMLContent } from '@components/core'
 
-import useAddItem from '@lib/bigcommerce/cart/use-add-item'
-import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
+import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
+import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-product'
 import {
   getCurrentVariant,
   getProductOptions,

components/product/helpers.ts

@@ -1,4 +1,4 @@
-import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
+import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-product'
 
 export type SelectedOptions = {
   size: string | null