mirror of
https://github.com/vercel/commerce.git
synced 2025-07-23 04:36:49 +00:00
✨ feat: buynow
:%s
This commit is contained in:
@@ -11,6 +11,8 @@ import LabelCommon from '../LabelCommon/LabelCommon'
|
|||||||
import s from './ProductCard.module.scss'
|
import s from './ProductCard.module.scss'
|
||||||
import ProductNotSell from './ProductNotSell/ProductNotSell'
|
import ProductNotSell from './ProductNotSell/ProductNotSell'
|
||||||
import {useAddProductToCart} from "../../hooks/cart"
|
import {useAddProductToCart} from "../../hooks/cart"
|
||||||
|
import { useCartDrawer } from 'src/components/contexts'
|
||||||
|
import Router from 'next/router'
|
||||||
export interface ProductCardProps extends ProductCard {
|
export interface ProductCardProps extends ProductCard {
|
||||||
buttonText?: string
|
buttonText?: string
|
||||||
isSingleButton?: boolean,
|
isSingleButton?: boolean,
|
||||||
@@ -31,21 +33,36 @@ const ProductCardComponent = ({
|
|||||||
productVariantId,
|
productVariantId,
|
||||||
}: ProductCardProps) => {
|
}: ProductCardProps) => {
|
||||||
|
|
||||||
const {addProduct,loading,error} = useAddProductToCart()
|
const {addProduct,loading} = useAddProductToCart()
|
||||||
|
const { openCartDrawer } = useCartDrawer()
|
||||||
|
|
||||||
const handleAddToCart = () => {
|
const handleAddToCart = () => {
|
||||||
if(productVariantId){
|
if(productVariantId){
|
||||||
addProduct({variantId:productVariantId,quantity:1},handleAddToCartCallback)
|
addProduct({variantId:productVariantId,quantity:1},handleAddToCartCallback)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const handleAddToCartCallback = () => {
|
const handleAddToCartCallback = () => {
|
||||||
|
openCartDrawer && openCartDrawer()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleBuyNowCallback = (success:boolean) => {
|
||||||
|
if(success){
|
||||||
|
Router.push(ROUTE.CHECKOUT)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleBuyNow = () => {
|
||||||
|
if(productVariantId){
|
||||||
|
addProduct({variantId:productVariantId,quantity:1},handleBuyNowCallback)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (isNotSell) {
|
if (isNotSell) {
|
||||||
return <div className={`${s.productCardWarpper} ${s.notSell}`}>
|
return <div className={`${s.productCardWarpper} ${s.notSell}`}>
|
||||||
<ProductNotSell name={name} imageSrc={imageSrc} />
|
<ProductNotSell name={name} imageSrc={imageSrc} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={s.productCardWarpper}>
|
<div className={s.productCardWarpper}>
|
||||||
<div className={s.cardTop}>
|
<div className={s.cardTop}>
|
||||||
@@ -83,7 +100,7 @@ const ProductCardComponent = ({
|
|||||||
{
|
{
|
||||||
isSingleButton ?
|
isSingleButton ?
|
||||||
<div className={s.cardButton}>
|
<div className={s.cardButton}>
|
||||||
<ButtonCommon type="light" icon={<IconBuy />} size='small' >Add to cart</ButtonCommon>
|
<ButtonCommon type="light" icon={<IconBuy />} size='small' onClick={handleAddToCart}>Add to cart</ButtonCommon>
|
||||||
</div>
|
</div>
|
||||||
:
|
:
|
||||||
<>
|
<>
|
||||||
@@ -91,7 +108,7 @@ const ProductCardComponent = ({
|
|||||||
<ButtonIconBuy onClick={handleAddToCart} loading={loading}/>
|
<ButtonIconBuy onClick={handleAddToCart} loading={loading}/>
|
||||||
</div>
|
</div>
|
||||||
<div className={s.cardButton}>
|
<div className={s.cardButton}>
|
||||||
<ButtonCommon type="light" size='small'>{buttonText}</ButtonCommon>
|
<ButtonCommon type="light" size='small' onClick={handleBuyNow}>{buttonText}</ButtonCommon>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user