cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Added Image Component to ProductView

Browse Source
This commit is contained in:
Luis Alvarez 2020-10-21 22:25:14 -05:00
parent 509ba95bc9
commit b3cf225275
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/product/ProductView/ProductView.tsx
View File

@ -1,5 +1,6 @@
import { FC, useState, useEffect } from 'react' import { FC, useState, useEffect } from 'react'
import cn from 'classnames' import cn from 'classnames'
import Image from 'next/image'
import { NextSeo } from 'next-seo' import { NextSeo } from 'next-seo'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product' import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
import useAddItem from '@lib/bigcommerce/cart/use-add-item' import useAddItem from '@lib/bigcommerce/cart/use-add-item'
@ -86,11 +87,12 @@ const ProductView: FC<Props> = ({ product, className }) => {
<ProductSlider> <ProductSlider>
{/** TODO: Change with Image Component **/} {/** TODO: Change with Image Component **/}
{product.images.edges?.map((image, i) => ( {product.images.edges?.map((image, i) => (
<img <Image
key={image?.node.urlSmall} key={image?.node.urlOriginal}
className={s.img} src={getPathname(image?.node.urlOriginal!)}
src={image?.node.urlXL} width={1200}
loading={i === 0 ? 'eager' : 'lazy'} height={1200}
priority={i === 0}
/> />
))} ))}
</ProductSlider> </ProductSlider>