forked from crowetic/commerce
Make cart item buttons work
This commit is contained in:
parent
0483e97954
commit
855492684c
@ -1,7 +1,7 @@
|
|||||||
import { Trash } from '@components/icon'
|
import { Trash } from '@components/icon'
|
||||||
import { useCommerce } from '@lib/bigcommerce'
|
import { useCommerce } from '@lib/bigcommerce'
|
||||||
import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
|
import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
|
||||||
import { useEffect, useState } from 'react'
|
import { ChangeEvent, useEffect, useState } from 'react'
|
||||||
import formatVariantPrice from 'utils/format-item-price'
|
import formatVariantPrice from 'utils/format-item-price'
|
||||||
import styles from './CartItem.module.css'
|
import styles from './CartItem.module.css'
|
||||||
|
|
||||||
@ -21,18 +21,36 @@ const CartItem = ({
|
|||||||
currencyCode,
|
currencyCode,
|
||||||
locale,
|
locale,
|
||||||
})
|
})
|
||||||
const handleBlur = async () => {
|
const updateQuantity = async (val: number) => {
|
||||||
|
const data = await updateItem({
|
||||||
|
itemId: item.id,
|
||||||
|
item: {
|
||||||
|
productId: item.product_id,
|
||||||
|
variantId: item.variant_id,
|
||||||
|
quantity: val,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const handleQuantity = (e: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const val = Number(e.target.value)
|
||||||
|
|
||||||
|
if (Number.isInteger(val) && val >= 0) {
|
||||||
|
setQuantity(e.target.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const handleBlur = () => {
|
||||||
const val = Number(quantity)
|
const val = Number(quantity)
|
||||||
|
|
||||||
if (val !== item.quantity) {
|
if (val !== item.quantity) {
|
||||||
const data = await updateItem({
|
updateQuantity(val)
|
||||||
itemId: item.id,
|
}
|
||||||
item: {
|
}
|
||||||
productId: item.product_id,
|
const increaseQuantity = (n = 1) => {
|
||||||
variantId: item.variant_id,
|
const val = Number(quantity) + n
|
||||||
quantity: val,
|
|
||||||
},
|
if (Number.isInteger(val) && val >= 0) {
|
||||||
})
|
setQuantity(val)
|
||||||
|
updateQuantity(val)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -49,21 +67,19 @@ const CartItem = ({
|
|||||||
<div className="flex-1 flex flex-col">
|
<div className="flex-1 flex flex-col">
|
||||||
<span>{item.name}</span>
|
<span>{item.name}</span>
|
||||||
<div className="py-2">
|
<div className="py-2">
|
||||||
<span>-</span>
|
<button type="button" onClick={() => increaseQuantity(-1)}>
|
||||||
|
-
|
||||||
|
</button>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
className={styles.quantity}
|
className={styles.quantity}
|
||||||
value={quantity}
|
value={quantity}
|
||||||
onChange={(e) => {
|
onChange={handleQuantity}
|
||||||
const val = Number(e.target.value)
|
|
||||||
|
|
||||||
if (Number.isInteger(val) && val >= 0) {
|
|
||||||
setQuantity(e.target.value)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onBlur={handleBlur}
|
onBlur={handleBlur}
|
||||||
/>
|
/>
|
||||||
<span>+</span>
|
<button type="button" onClick={() => increaseQuantity(1)}>
|
||||||
|
+
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col space-y-2">
|
<div className="flex flex-col space-y-2">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user