forked from crowetic/commerce
Changes
This commit is contained in:
parent
92a2388bd1
commit
0a05182f3b
@ -8,10 +8,10 @@ import { getCategoryPath, getDesignerPath } from '@lib/search'
|
|||||||
interface Props {
|
interface Props {
|
||||||
categories?: any
|
categories?: any
|
||||||
brands?: any
|
brands?: any
|
||||||
newestProducts?: any
|
products?: Product[]
|
||||||
}
|
}
|
||||||
|
|
||||||
const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
|
const Head: FC<Props> = ({ categories, brands, products = [] }) => {
|
||||||
return (
|
return (
|
||||||
<div className={s.root}>
|
<div className={s.root}>
|
||||||
<div className={s.asideWrapper}>
|
<div className={s.asideWrapper}>
|
||||||
@ -48,10 +48,10 @@ const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<Grid layout="normal">
|
<Grid layout="normal">
|
||||||
{newestProducts.map(({ node }: any) => (
|
{products.map((product) => (
|
||||||
<ProductCard
|
<ProductCard
|
||||||
key={node.path}
|
key={product.path}
|
||||||
product={node}
|
product={product}
|
||||||
variant="simple"
|
variant="simple"
|
||||||
imgProps={{
|
imgProps={{
|
||||||
width: 480,
|
width: 480,
|
||||||
|
@ -46,9 +46,9 @@ const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
|
|||||||
<span>{product.name}</span>
|
<span>{product.name}</span>
|
||||||
</h3>
|
</h3>
|
||||||
<span className={s.productPrice}>
|
<span className={s.productPrice}>
|
||||||
{product.prices[0].value}
|
{product.price.value}
|
||||||
|
|
||||||
{product.prices[0].currencyCode}
|
{product.price.currencyCode}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<WishlistButton
|
<WishlistButton
|
||||||
|
@ -1,16 +1,16 @@
|
|||||||
import { FC, useState } from 'react'
|
|
||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
import { NextSeo } from 'next-seo'
|
import { NextSeo } from 'next-seo'
|
||||||
|
import { FC, useState } from 'react'
|
||||||
import s from './ProductView.module.css'
|
import s from './ProductView.module.css'
|
||||||
import { useUI } from '@components/ui/context'
|
|
||||||
|
import { useUI } from '@components/ui'
|
||||||
import { Swatch, ProductSlider } from '@components/product'
|
import { Swatch, ProductSlider } from '@components/product'
|
||||||
import { Button, Container, Text } from '@components/ui'
|
import { Button, Container, Text } from '@components/ui'
|
||||||
|
|
||||||
import usePrice from '@framework/product/use-price'
|
import { usePrice } from '@framework/product'
|
||||||
import useAddItem from '@framework/cart/use-add-item'
|
import { useAddItem } from '@framework/cart'
|
||||||
import type { ProductNode } from '@framework/api/operations/get-product'
|
|
||||||
import {
|
import {
|
||||||
getCurrentVariant,
|
getCurrentVariant,
|
||||||
getProductOptions,
|
getProductOptions,
|
||||||
@ -21,15 +21,15 @@ import WishlistButton from '@components/wishlist/WishlistButton'
|
|||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
children?: any
|
children?: any
|
||||||
product: ProductNode
|
product: Product
|
||||||
}
|
}
|
||||||
|
|
||||||
const ProductView: FC<Props> = ({ product }) => {
|
const ProductView: FC<Props> = ({ product }) => {
|
||||||
const addItem = useAddItem()
|
const addItem = useAddItem()
|
||||||
const { price } = usePrice({
|
const { price } = usePrice({
|
||||||
amount: product.prices?.price?.value,
|
amount: product.price.value,
|
||||||
baseAmount: product.prices?.retailPrice?.value,
|
baseAmount: product.price.retailValue,
|
||||||
currencyCode: product.prices?.price?.currencyCode!,
|
currencyCode: product.price.currencyCode!,
|
||||||
})
|
})
|
||||||
const { openSidebar } = useUI()
|
const { openSidebar } = useUI()
|
||||||
const options = getProductOptions(product)
|
const options = getProductOptions(product)
|
||||||
@ -38,15 +38,15 @@ const ProductView: FC<Props> = ({ product }) => {
|
|||||||
size: null,
|
size: null,
|
||||||
color: null,
|
color: null,
|
||||||
})
|
})
|
||||||
const variant =
|
|
||||||
getCurrentVariant(product, choices) || product.variants.edges?.[0]
|
const variant = getCurrentVariant(product, choices) || product.variants[0]
|
||||||
|
|
||||||
const addToCart = async () => {
|
const addToCart = async () => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
try {
|
try {
|
||||||
await addItem({
|
await addItem({
|
||||||
productId: product.entityId,
|
productId: Number(product.id),
|
||||||
variantId: product.variants.edges?.[0]?.node.entityId!,
|
variantId: Number(product.variants[0].id),
|
||||||
})
|
})
|
||||||
openSidebar()
|
openSidebar()
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
@ -66,7 +66,7 @@ const ProductView: FC<Props> = ({ product }) => {
|
|||||||
description: product.description,
|
description: product.description,
|
||||||
images: [
|
images: [
|
||||||
{
|
{
|
||||||
url: product.images.edges?.[0]?.node.urlOriginal!,
|
url: product.images[0]?.url!,
|
||||||
width: 800,
|
width: 800,
|
||||||
height: 600,
|
height: 600,
|
||||||
alt: product.name,
|
alt: product.name,
|
||||||
@ -81,18 +81,18 @@ const ProductView: FC<Props> = ({ product }) => {
|
|||||||
<div className={s.price}>
|
<div className={s.price}>
|
||||||
{price}
|
{price}
|
||||||
{` `}
|
{` `}
|
||||||
{product.prices?.price.currencyCode}
|
{product.price?.currencyCode}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={s.sliderContainer}>
|
<div className={s.sliderContainer}>
|
||||||
<ProductSlider key={product.entityId}>
|
<ProductSlider key={product.id}>
|
||||||
{product.images.edges?.map((image, i) => (
|
{product.images.map((image, i) => (
|
||||||
<div key={image?.node.urlOriginal} className={s.imageContainer}>
|
<div key={image.url} className={s.imageContainer}>
|
||||||
<Image
|
<Image
|
||||||
className={s.img}
|
className={s.img}
|
||||||
src={image?.node.urlOriginal!}
|
src={image.url!}
|
||||||
alt={image?.node.altText || 'Product Image'}
|
alt={image.alt || 'Product Image'}
|
||||||
width={1050}
|
width={1050}
|
||||||
height={1050}
|
height={1050}
|
||||||
priority={i === 0}
|
priority={i === 0}
|
||||||
@ -152,11 +152,10 @@ const ProductView: FC<Props> = ({ product }) => {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<WishlistButton
|
<WishlistButton
|
||||||
className={s.wishlistButton}
|
className={s.wishlistButton}
|
||||||
productId={product.entityId}
|
productId={product.id}
|
||||||
variant={product.variants.edges?.[0]!}
|
variant={product.variants[0]!}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
|
@ -34,12 +34,10 @@ function productsNormalizer(arr: any[]): Product[] {
|
|||||||
),
|
),
|
||||||
variants: variants.edges.map(({ node }: any) => node),
|
variants: variants.edges.map(({ node }: any) => node),
|
||||||
productOptions: productOptions.edges.map(({ node }: any) => node),
|
productOptions: productOptions.edges.map(({ node }: any) => node),
|
||||||
prices: [
|
price: {
|
||||||
{
|
value: prices.price.value,
|
||||||
value: prices.price.value,
|
currencyCode: prices.price.currencyCode,
|
||||||
currencyCode: prices.price.currencyCode,
|
},
|
||||||
},
|
|
||||||
],
|
|
||||||
...rest,
|
...rest,
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
|
7
framework/types.d.ts
vendored
7
framework/types.d.ts
vendored
@ -6,7 +6,7 @@ interface Product {
|
|||||||
path?: string
|
path?: string
|
||||||
images: ProductImage[]
|
images: ProductImage[]
|
||||||
variants: ProductVariant[]
|
variants: ProductVariant[]
|
||||||
prices: ProductPrice[]
|
price: ProductPrice
|
||||||
}
|
}
|
||||||
interface ProductImage {
|
interface ProductImage {
|
||||||
url: string
|
url: string
|
||||||
@ -18,9 +18,10 @@ interface ProductVariant {
|
|||||||
}
|
}
|
||||||
|
|
||||||
interface ProductPrice {
|
interface ProductPrice {
|
||||||
value: number | string
|
value: number
|
||||||
currencyCode: 'USD' | 'ARS'
|
currencyCode: 'USD' | 'ARS'
|
||||||
type?: 'price' | 'retail' | 'sale' | string
|
retailValue?: number
|
||||||
|
saleValue?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Cart {
|
interface Cart {
|
||||||
|
@ -41,7 +41,7 @@ export default function Home({
|
|||||||
categories,
|
categories,
|
||||||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
<Grid>
|
<Grid>
|
||||||
{products.slice(0, 3).map((product, i) => (
|
{products.slice(0, 3).map((product, i) => (
|
||||||
<ProductCard
|
<ProductCard
|
||||||
@ -102,12 +102,12 @@ export default function Home({
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Marquee>
|
</Marquee>
|
||||||
{/* <HomeAllProductsGrid
|
<HomeAllProductsGrid
|
||||||
newestProducts={newestProducts}
|
newestProducts={products}
|
||||||
categories={categories}
|
categories={categories}
|
||||||
brands={brands}
|
brands={brands}
|
||||||
/> */}
|
/>
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user