4
0
forked from crowetic/commerce

Update item quantity

This commit is contained in:
Luis Alvarez 2020-10-06 19:07:02 -05:00
parent 835298ac92
commit b5b5d1343f
4 changed files with 48 additions and 4 deletions

View 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;
}

View File

@ -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>

View File

@ -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),
}), }),
} }
) )

View File

@ -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
} }