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

Changes

Browse Source
This commit is contained in:
Belen Curcio 2021-01-10 15:55:11 -03:00
parent 92a2388bd1
commit 0a05182f3b
6 changed files with 43 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
View File

@ -8,10 +8,10 @@ import { getCategoryPath, getDesignerPath } from '@lib/search'
interface Props {
categories?: any
brands?: any
newestProducts?: any
products?: Product[]
}
const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
const Head: FC<Props> = ({ categories, brands, products = [] }) => {
return (
<div className={s.root}>
<div className={s.asideWrapper}>
@ -48,10 +48,10 @@ const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
</div>
<div className="flex-1">
<Grid layout="normal">
{newestProducts.map(({ node }: any) => (
{products.map((product) => (
<ProductCard
key={node.path}
product={node}
key={product.path}
product={product}
variant="simple"
imgProps={{
width: 480,

4
components/product/ProductCard/ProductCard.tsx
View File

@ -46,9 +46,9 @@ const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
<span>{product.name}</span>
</h3>
<span className={s.productPrice}>
{product.prices[0].value}
{product.price.value}
&nbsp;
{product.prices[0].currencyCode}
{product.price.currencyCode}
</span>
</div>
<WishlistButton

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

@ -1,16 +1,16 @@
import { FC, useState } from 'react'
import cn from 'classnames'
import Image from 'next/image'
import { NextSeo } from 'next-seo'
import { FC, useState } from 'react'
import s from './ProductView.module.css'
import { useUI } from '@components/ui/context'
import { useUI } from '@components/ui'
import { Swatch, ProductSlider } from '@components/product'
import { Button, Container, Text } from '@components/ui'
import usePrice from '@framework/product/use-price'
import useAddItem from '@framework/cart/use-add-item'
import type { ProductNode } from '@framework/api/operations/get-product'
import { usePrice } from '@framework/product'
import { useAddItem } from '@framework/cart'
import {
getCurrentVariant,
getProductOptions,
@ -21,15 +21,15 @@ import WishlistButton from '@components/wishlist/WishlistButton'
interface Props {
className?: string
children?: any
product: ProductNode
product: Product
}
const ProductView: FC<Props> = ({ product }) => {
const addItem = useAddItem()
const { price } = usePrice({
amount: product.prices?.price?.value,
baseAmount: product.prices?.retailPrice?.value,
currencyCode: product.prices?.price?.currencyCode!,
amount: product.price.value,
baseAmount: product.price.retailValue,
currencyCode: product.price.currencyCode!,
})
const { openSidebar } = useUI()
const options = getProductOptions(product)
@ -38,15 +38,15 @@ const ProductView: FC<Props> = ({ product }) => {
size: null,
color: null,
})
const variant =
getCurrentVariant(product, choices) || product.variants.edges?.[0]
const variant = getCurrentVariant(product, choices) || product.variants[0]
const addToCart = async () => {
setLoading(true)
try {
await addItem({
productId: product.entityId,
variantId: product.variants.edges?.[0]?.node.entityId!,
productId: Number(product.id),
variantId: Number(product.variants[0].id),
})
openSidebar()
setLoading(false)
@ -66,7 +66,7 @@ const ProductView: FC<Props> = ({ product }) => {
description: product.description,
images: [
{
url: product.images.edges?.[0]?.node.urlOriginal!,
url: product.images[0]?.url!,
width: 800,
height: 600,
alt: product.name,
@ -81,18 +81,18 @@ const ProductView: FC<Props> = ({ product }) => {
<div className={s.price}>
{price}
{` `}
{product.prices?.price.currencyCode}
{product.price?.currencyCode}
</div>
</div>
<div className={s.sliderContainer}>
<ProductSlider key={product.entityId}>
{product.images.edges?.map((image, i) => (
<div key={image?.node.urlOriginal} className={s.imageContainer}>
<ProductSlider key={product.id}>
{product.images.map((image, i) => (
<div key={image.url} className={s.imageContainer}>
<Image
className={s.img}
src={image?.node.urlOriginal!}
alt={image?.node.altText || 'Product Image'}
src={image.url!}
alt={image.alt || 'Product Image'}
width={1050}
height={1050}
priority={i === 0}
@ -152,11 +152,10 @@ const ProductView: FC<Props> = ({ product }) => {
</Button>
</div>
</div>
<WishlistButton
className={s.wishlistButton}
productId={product.entityId}
variant={product.variants.edges?.[0]!}
productId={product.id}
variant={product.variants[0]!}
/>
</div>
</Container>

10
framework/bigcommerce/api/operations/get-all-products.ts
View File

@ -34,12 +34,10 @@ function productsNormalizer(arr: any[]): Product[] {
),
variants: variants.edges.map(({ node }: any) => node),
productOptions: productOptions.edges.map(({ node }: any) => node),
prices: [
{
value: prices.price.value,
currencyCode: prices.price.currencyCode,
},
],
price: {
value: prices.price.value,
currencyCode: prices.price.currencyCode,
},
...rest,
})
)

7
framework/types.d.ts vendored
View File

@ -6,7 +6,7 @@ interface Product {
path?: string
images: ProductImage[]
variants: ProductVariant[]
prices: ProductPrice[]
price: ProductPrice
}
interface ProductImage {
url: string
@ -18,9 +18,10 @@ interface ProductVariant {
}
interface ProductPrice {
value: number | string
value: number
currencyCode: 'USD' | 'ARS'
type?: 'price' | 'retail' | 'sale' | string
retailValue?: number
saleValue?: number
}
interface Cart {

10
pages/index.tsx
View File

@ -41,7 +41,7 @@ export default function Home({
categories,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return (
<div>
<>
<Grid>
{products.slice(0, 3).map((product, i) => (
<ProductCard
@ -102,12 +102,12 @@ export default function Home({
/>
))}
</Marquee>
{/* <HomeAllProductsGrid
newestProducts={newestProducts}
<HomeAllProductsGrid
newestProducts={products}
categories={categories}
brands={brands}
/> */}
</div>
/>
</>
)
}