forked from crowetic/commerce
Update item quantity
This commit is contained in:
parent
835298ac92
commit
b5b5d1343f
9
components/cart/CartItem/CartItem.module.css
Normal file
9
components/cart/CartItem/CartItem.module.css
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
.quantity {
|
||||||
|
appearance: textfield;
|
||||||
|
@apply w-6 border-gray-300 border mx-3 rounded text-center text-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity::-webkit-outer-spin-button,
|
||||||
|
.quantity::-webkit-inner-spin-button {
|
||||||
|
@apply appearance-none m-0;
|
||||||
|
}
|
@ -1,6 +1,9 @@
|
|||||||
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 { useEffect, useState } from 'react'
|
||||||
import formatVariantPrice from 'utils/format-item-price'
|
import formatVariantPrice from 'utils/format-item-price'
|
||||||
|
import styles from './CartItem.module.css'
|
||||||
|
|
||||||
const CartItem = ({
|
const CartItem = ({
|
||||||
item,
|
item,
|
||||||
@ -10,12 +13,35 @@ const CartItem = ({
|
|||||||
currencyCode: string
|
currencyCode: string
|
||||||
}) => {
|
}) => {
|
||||||
const { locale } = useCommerce()
|
const { locale } = useCommerce()
|
||||||
|
const updateItem = useUpdateItem()
|
||||||
|
const [quantity, setQuantity] = useState(item.quantity)
|
||||||
const { price } = formatVariantPrice({
|
const { price } = formatVariantPrice({
|
||||||
listPrice: item.extended_list_price,
|
listPrice: item.extended_list_price,
|
||||||
salePrice: item.extended_sale_price,
|
salePrice: item.extended_sale_price,
|
||||||
currencyCode,
|
currencyCode,
|
||||||
locale,
|
locale,
|
||||||
})
|
})
|
||||||
|
const handleBlur = async () => {
|
||||||
|
const val = Number(quantity)
|
||||||
|
|
||||||
|
if (val !== item.quantity) {
|
||||||
|
const data = await updateItem({
|
||||||
|
itemId: item.id,
|
||||||
|
item: {
|
||||||
|
productId: item.product_id,
|
||||||
|
variantId: item.variant_id,
|
||||||
|
quantity: val,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Reset the quantity state if the item quantity changes
|
||||||
|
if (item.quantity !== quantity) {
|
||||||
|
setQuantity(item.quantity)
|
||||||
|
}
|
||||||
|
}, [item.quantity])
|
||||||
|
|
||||||
console.log('ITEM', item)
|
console.log('ITEM', item)
|
||||||
|
|
||||||
@ -27,8 +53,17 @@ const CartItem = ({
|
|||||||
<div className="py-2">
|
<div className="py-2">
|
||||||
<span>-</span>
|
<span>-</span>
|
||||||
<input
|
<input
|
||||||
className="w-6 border-gray-300 border mx-3 rounded text-center text-sm"
|
type="number"
|
||||||
defaultValue="1"
|
className={styles.quantity}
|
||||||
|
value={quantity}
|
||||||
|
onChange={(e) => {
|
||||||
|
const val = Number(e.target.value)
|
||||||
|
|
||||||
|
if (Number.isInteger(val) && val >= 0) {
|
||||||
|
setQuantity(e.target.value)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onBlur={handleBlur}
|
||||||
/>
|
/>
|
||||||
<span>+</span>
|
<span>+</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -117,7 +117,7 @@ const cartApi: BigcommerceApiHandler<Cart> = async (req, res, config) => {
|
|||||||
{
|
{
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
line_items: [parseItem(item)],
|
line_item: parseItem(item),
|
||||||
}),
|
}),
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
@ -27,7 +27,7 @@ export default function useUpdateItem() {
|
|||||||
const fn = useCartUpdateItem<Cart, UpdateItemBody>(fetcher)
|
const fn = useCartUpdateItem<Cart, UpdateItemBody>(fetcher)
|
||||||
const updateItem: typeof fn = async (input) => {
|
const updateItem: typeof fn = async (input) => {
|
||||||
const data = await fn(input)
|
const data = await fn(input)
|
||||||
mutate(data)
|
await mutate(data)
|
||||||
return data
|
return data
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user