mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Changes
This commit is contained in:
parent
92a2388bd1
commit
0a05182f3b
@ -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,
|
||||
|
@ -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}
|
||||
|
||||
{product.prices[0].currencyCode}
|
||||
{product.price.currencyCode}
|
||||
</span>
|
||||
</div>
|
||||
<WishlistButton
|
||||
|
@ -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>
|
||||
|
@ -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
7
framework/types.d.ts
vendored
@ -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 {
|
||||
|
@ -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>
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user