4
0
forked from crowetic/commerce

Removed Futures

This commit is contained in:
Belen Curcio 2021-01-07 17:10:27 -03:00
parent 27dd4bfb69
commit 4259136983
3 changed files with 39 additions and 142 deletions

View File

@ -1,81 +0,0 @@
import { FC } from 'react'
import cn from 'classnames'
import Link from 'next/link'
import s from './ProductCard.module.css'
import Image, { ImageProps } from 'next/image'
import WishlistButton from '@components/wishlist/WishlistButton'
interface Props {
className?: string
product: Product
variant?: 'slim' | 'simple'
imgProps?: Omit<ImageProps, 'src'>
}
const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
return (
<Link href={`product/${product.slug}`}>
<a
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
>
{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">
{product.name}
</span>
</div>
{product.images[0] && (
<Image
quality="85"
alt={product.name}
src={product.images[0].url}
height={320}
width={320}
layout="fixed"
{...imgProps}
/>
)}
</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>{product.name}</span>
</h3>
<span className={s.productPrice}>
{product.prices[0].value}
&nbsp;
{product.prices[0].currencyCode}
</span>
</div>
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0]!}
/>
</div>
<div className={s.imageContainer}>
{product.images[0] && (
<Image
alt={product.name}
className={s.productImage}
src={product.images[0].url}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
)}
</div>
</>
)}
</a>
</Link>
)
}
export default ProductCard

View File

@ -1,45 +1,20 @@
import { FC } from 'react'
import cn from 'classnames' import cn from 'classnames'
import Link from 'next/link' import Link from 'next/link'
import Image from 'next/image'
import type { FC } from 'react'
import s from './ProductCard.module.css' import s from './ProductCard.module.css'
import Image, { ImageProps } from 'next/image'
import WishlistButton from '@components/wishlist/WishlistButton' import WishlistButton from '@components/wishlist/WishlistButton'
import usePrice from '@framework/product/use-price'
import type { ProductNode } from '@framework/api/operations/get-all-products'
interface Props { interface Props {
className?: string className?: string
product: ProductNode product: Product
variant?: 'slim' | 'simple' variant?: 'slim' | 'simple'
imgWidth: number | string imgProps?: Omit<ImageProps, 'src'>
imgHeight: number | string
imgLayout?: 'fixed' | 'intrinsic' | 'responsive' | undefined
imgPriority?: boolean
imgLoading?: 'eager' | 'lazy'
imgSizes?: string
} }
const ProductCard: FC<Props> = ({ const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
className,
product: p,
variant,
imgWidth,
imgHeight,
imgPriority,
imgLoading,
imgSizes,
imgLayout = 'responsive',
}) => {
const src = p.images.edges?.[0]?.node?.urlOriginal!
const { price } = usePrice({
amount: p.prices?.price?.value,
baseAmount: p.prices?.retailPrice?.value,
currencyCode: p.prices?.price?.currencyCode!,
})
return ( return (
<Link href={`/product${p.path}`}> <Link href={`product/${product.slug}`}>
<a <a
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)} className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
> >
@ -47,20 +22,20 @@ const ProductCard: FC<Props> = ({
<div className="relative overflow-hidden box-border"> <div className="relative overflow-hidden box-border">
<div className="absolute inset-0 flex items-center justify-end mr-8 z-20"> <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"> <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
{p.name} {product.name}
</span> </span>
</div> </div>
<Image {product.images[0] && (
quality="85" <Image
width={imgWidth} quality="85"
sizes={imgSizes} alt={product.name}
height={imgHeight} src={product.images[0].url}
layout={imgLayout} height={320}
loading={imgLoading} width={320}
priority={imgPriority} layout="fixed"
src={p.images.edges?.[0]?.node.urlOriginal!} {...imgProps}
alt={p.images.edges?.[0]?.node.altText || 'Product Image'} />
/> )}
</div> </div>
) : ( ) : (
<> <>
@ -68,29 +43,33 @@ const ProductCard: FC<Props> = ({
<div className="flex flex-row justify-between box-border w-full z-20 absolute"> <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"> <div className="absolute top-0 left-0 pr-16 max-w-full">
<h3 className={s.productTitle}> <h3 className={s.productTitle}>
<span>{p.name}</span> <span>{product.name}</span>
</h3> </h3>
<span className={s.productPrice}>{price}</span> <span className={s.productPrice}>
{product.prices[0].value}
&nbsp;
{product.prices[0].currencyCode}
</span>
</div> </div>
<WishlistButton <WishlistButton
className={s.wishlistButton} className={s.wishlistButton}
productId={p.entityId} productId={product.id}
variant={p.variants.edges?.[0]!} variant={product.variants[0]!}
/> />
</div> </div>
<div className={s.imageContainer}> <div className={s.imageContainer}>
<Image {product.images[0] && (
quality="85" <Image
src={src} alt={product.name}
alt={p.name} className={s.productImage}
className={s.productImage} src={product.images[0].url}
width={imgWidth} height={540}
sizes={imgSizes} width={540}
height={imgHeight} quality="85"
layout={imgLayout} layout="responsive"
loading={imgLoading} {...imgProps}
priority={imgPriority} />
/> )}
</div> </div>
</> </>
)} )}

View File

@ -1,7 +1,6 @@
import rangeMap from '@lib/range-map'
import { Layout } from '@components/common' import { Layout } from '@components/common'
import ProductCard from '@components/product/ProductCard/FUTURE_ProductCard'
import { Grid, Marquee, Hero } from '@components/ui' import { Grid, Marquee, Hero } from '@components/ui'
import { ProductCard } from '@components/product'
import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid' import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next' import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'