forked from crowetic/commerce
slug
This commit is contained in:
parent
8f9bbe19ca
commit
dccc5ef430
@ -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 && (
|
||||||
|
@ -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>
|
||||||
|
@ -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,
|
||||||
|
4
framework/types.d.ts
vendored
4
framework/types.d.ts
vendored
@ -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 {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user