4
0
forked from crowetic/commerce
This commit is contained in:
Belen Curcio 2021-01-11 14:13:29 -03:00
parent 8f9bbe19ca
commit dccc5ef430
4 changed files with 34 additions and 20 deletions

View File

@ -57,11 +57,11 @@ const ProductCard: FC<Props> = ({
{product.price.currencyCode} {product.price.currencyCode}
</span> </span>
</div> </div>
{/* <WishlistButton <WishlistButton
className={s.wishlistButton} className={s.wishlistButton}
productId={product.id} productId={product.id}
variant={product.variant[0]!} variant={product.variants[0]}
/> */} />
</div> </div>
<div className={s.imageContainer}> <div className={s.imageContainer}>
{product?.images && ( {product?.images && (

View File

@ -25,21 +25,26 @@ interface Props {
} }
const ProductView: FC<Props> = ({ product }) => { const ProductView: FC<Props> = ({ product }) => {
console.log(product)
const addItem = useAddItem() const addItem = useAddItem()
const { price } = usePrice({ const { price } = usePrice({
amount: product.price.value, amount: product.price.value,
baseAmount: product.price.retailValue, baseAmount: product.price.retailValue,
currencyCode: product.price.currencyCode!, currencyCode: product.price.currencyCode!,
}) })
const { openSidebar } = useUI() const { openSidebar } = useUI()
const options = getProductOptions(product)
// const options = getProductOptions(product)
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [choices, setChoices] = useState<SelectedOptions>({ const [choices, setChoices] = useState<SelectedOptions>({
size: null, size: null,
color: null, color: null,
}) })
const variant = getCurrentVariant(product, choices) || product.variants[0] // const variant = getCurrentVariant(product, choices) || product.variants[0]
const addToCart = async () => { const addToCart = async () => {
setLoading(true) setLoading(true)
@ -106,7 +111,7 @@ const ProductView: FC<Props> = ({ product }) => {
<div className={s.sidebar}> <div className={s.sidebar}>
<section> <section>
{options?.map((opt: any) => ( {/* {options?.map((opt: any) => (
<div className="pb-4" key={opt.displayName}> <div className="pb-4" key={opt.displayName}>
<h2 className="uppercase font-medium">{opt.displayName}</h2> <h2 className="uppercase font-medium">{opt.displayName}</h2>
<div className="flex flex-row py-4"> <div className="flex flex-row py-4">
@ -133,7 +138,7 @@ const ProductView: FC<Props> = ({ product }) => {
})} })}
</div> </div>
</div> </div>
))} ))} */}
<div className="pb-14 break-words w-full max-w-xl"> <div className="pb-14 break-words w-full max-w-xl">
<Text html={product.description} /> <Text html={product.description} />
@ -146,7 +151,7 @@ const ProductView: FC<Props> = ({ product }) => {
className={s.button} className={s.button}
onClick={addToCart} onClick={addToCart}
loading={loading} loading={loading}
disabled={!variant} // disabled={!variant}
> >
Add to Cart Add to Cart
</Button> </Button>

View File

@ -13,16 +13,25 @@ export function normalizeProduct(productNode: BCProduct): Product {
return { return {
path, path,
slug: path?.slice(1, -1), slug: path?.replace(/^\/+|\/+$/g, ''),
images: images?.edges?.map( images: images.edges
({ node: { urlOriginal, altText, ...rest } }: any) => ({ ? images.edges.map(
url: urlOriginal, ({ node: { urlOriginal, altText, ...rest } }: any) => ({
alt: altText, url: urlOriginal,
...rest, alt: altText,
}) ...rest,
), })
variants: variants?.edges?.map(({ node }: any) => node), )
productOptions: productOptions?.edges?.map(({ node }: any) => node), : [],
variants: variants.edges
? variants.edges.map(({ node: { entityId, ...rest } }: any) => ({
id: entityId,
...rest,
}))
: [],
productOptions: productOptions.edges
? productOptions.edges.map(({ node }: any) => node)
: [],
price: { price: {
value: prices?.price.value, value: prices?.price.value,
currencyCode: prices?.price.currencyCode, currencyCode: prices?.price.currencyCode,

View File

@ -8,8 +8,8 @@ interface Product extends Entity {
description: string description: string
slug: string slug: string
path?: string path?: string
images: ProductImage[] | any[] | undefined images: ProductImage[]
variants: ProductVariant[] | any[] | null | undefined variants: ProductVariant[]
price: ProductPrice price: ProductPrice
} }
interface ProductImage { interface ProductImage {