mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Added new normalizer for the cart to the UI
This commit is contained in:
parent
7cf1ace9fb
commit
3e27b80658
@ -14,14 +14,14 @@ const Item = ({
|
||||
currencyCode,
|
||||
...rest
|
||||
}: {
|
||||
item: CartItem
|
||||
item: LineItem
|
||||
currencyCode: string
|
||||
}) => {
|
||||
const { closeSidebarIfPresent } = useUI()
|
||||
|
||||
const { price } = usePrice({
|
||||
amount: item.extended_sale_price,
|
||||
baseAmount: item.extended_list_price,
|
||||
amount: item.variant.price * item.quantity,
|
||||
baseAmount: item.variant.listPrice * item.quantity,
|
||||
currencyCode,
|
||||
})
|
||||
|
||||
@ -87,13 +87,13 @@ const Item = ({
|
||||
className={s.productImage}
|
||||
width={150}
|
||||
height={150}
|
||||
src={item.images[0].url}
|
||||
alt={item.images[0].alt}
|
||||
src={item.variant.image.url}
|
||||
alt={item.variant.image.altText}
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col text-base">
|
||||
<Link href={`/product/${item.url.split('/')[3]}`}>
|
||||
<Link href={`/product/${item.path}`}>
|
||||
<span
|
||||
className="font-bold mb-5 text-lg cursor-pointer"
|
||||
onClick={() => closeSidebarIfPresent()}
|
||||
|
@ -15,15 +15,14 @@ const CartSidebarView: FC = () => {
|
||||
|
||||
const { price: subTotal } = usePrice(
|
||||
data && {
|
||||
amount: Number(data.subTotal),
|
||||
currencyCode: data.currency?.code || 'USD',
|
||||
amount: Number(data.subtotalPrice),
|
||||
currencyCode: data.currency.code,
|
||||
}
|
||||
)
|
||||
|
||||
const { price: total } = usePrice(
|
||||
data && {
|
||||
amount: Number(data.total),
|
||||
currencyCode: data.currency?.code || 'USD',
|
||||
amount: Number(data.totalPrice),
|
||||
currencyCode: data.currency.code,
|
||||
}
|
||||
)
|
||||
const handleClose = () => closeSidebar()
|
||||
|
@ -69,22 +69,6 @@ export function normalizeProduct(productNode: any): Product {
|
||||
}
|
||||
|
||||
export function normalizeCart(data: BigcommerceCart): Cart {
|
||||
// const d: BaseCart = data && {
|
||||
// id: data.id,
|
||||
// customerId: String(data.customer_id),
|
||||
// email: data.email,
|
||||
// createdAt: data.created_time,
|
||||
// currency: data.currency,
|
||||
// taxesIncluded: data.tax_included,
|
||||
// lineItems: data.line_items as any,
|
||||
// lineItemsSubtotalPrice: data.base_amount,
|
||||
// subtotalPrice: data.base_amount + data.discount_amount,
|
||||
// totalPrice: data.cart_amount,
|
||||
// discounts: data.discounts?.map((discount) => ({
|
||||
// value: discount.discounted_amount,
|
||||
// })),
|
||||
// }
|
||||
|
||||
return {
|
||||
id: data.id,
|
||||
customerId: String(data.customer_id),
|
||||
@ -92,7 +76,7 @@ export function normalizeCart(data: BigcommerceCart): Cart {
|
||||
createdAt: data.created_time,
|
||||
currency: data.currency,
|
||||
taxesIncluded: data.tax_included,
|
||||
lineItems: data.line_items.physical_items.map(itemsToProducts) as any,
|
||||
lineItems: data.line_items.physical_items.map(normalizeLineItem),
|
||||
lineItemsSubtotalPrice: data.base_amount,
|
||||
subtotalPrice: data.base_amount + data.discount_amount,
|
||||
totalPrice: data.cart_amount,
|
||||
@ -100,52 +84,28 @@ export function normalizeCart(data: BigcommerceCart): Cart {
|
||||
value: discount.discounted_amount,
|
||||
})),
|
||||
}
|
||||
|
||||
// return update(data as any, {
|
||||
// $auto: {
|
||||
// items: { $set: data?.line_items?.physical_items?.map(itemsToProducts) },
|
||||
// subTotal: { $set: data?.base_amount },
|
||||
// total: { $set: data?.cart_amount },
|
||||
// },
|
||||
// $unset: ['created_time', 'coupons', 'line_items', 'email'],
|
||||
// })
|
||||
}
|
||||
|
||||
function itemsToProducts(item: any): CartItem {
|
||||
const {
|
||||
id,
|
||||
name,
|
||||
quantity,
|
||||
product_id,
|
||||
variant_id,
|
||||
image_url,
|
||||
list_price,
|
||||
sale_price,
|
||||
extended_list_price,
|
||||
extended_sale_price,
|
||||
...rest
|
||||
} = item
|
||||
|
||||
return update(item, {
|
||||
$auto: {
|
||||
prices: {
|
||||
$auto: {
|
||||
listPrice: { $set: list_price },
|
||||
salePrice: { $set: sale_price },
|
||||
extendedListPrice: { $set: extended_list_price },
|
||||
extendedSalePrice: { $set: extended_sale_price },
|
||||
},
|
||||
function normalizeLineItem(item: any): LineItem {
|
||||
return {
|
||||
id: item.id,
|
||||
variantId: String(item.variant_id),
|
||||
name: item.name,
|
||||
quantity: item.quantity,
|
||||
variant: {
|
||||
id: String(item.variant_id),
|
||||
sku: item.sku,
|
||||
name: item.name,
|
||||
image: {
|
||||
url: item.image_url,
|
||||
},
|
||||
images: {
|
||||
$set: [
|
||||
{
|
||||
alt: name,
|
||||
url: image_url,
|
||||
},
|
||||
],
|
||||
},
|
||||
productId: { $set: product_id },
|
||||
variantId: { $set: variant_id },
|
||||
requiresShipping: item.is_require_shipping,
|
||||
price: item.sale_price,
|
||||
listPrice: item.list_price,
|
||||
},
|
||||
})
|
||||
path: item.url.split('/')[3],
|
||||
discounts: item.discounts.map((discount: any) => ({
|
||||
value: discount.discounted_amount,
|
||||
})),
|
||||
}
|
||||
}
|
||||
|
6
framework/bigcommerce/types.d.ts
vendored
6
framework/bigcommerce/types.d.ts
vendored
@ -1 +1,5 @@
|
||||
interface Cart extends BaseCart {}
|
||||
interface Cart extends BaseCart {
|
||||
lineItems: LineItem[]
|
||||
}
|
||||
|
||||
interface LineItem extends BaseLineItem {}
|
||||
|
20
framework/commerce/types.d.ts
vendored
20
framework/commerce/types.d.ts
vendored
@ -56,6 +56,8 @@ interface BaseLineItem {
|
||||
name: string
|
||||
quantity: number
|
||||
discounts: DiscountBase[]
|
||||
// A human-friendly unique string automatically generated from the product’s name
|
||||
path: string
|
||||
variant: BaseProductVariant
|
||||
}
|
||||
|
||||
@ -77,16 +79,20 @@ interface BaseProductVariant {
|
||||
sku: string
|
||||
// The product variant’s title, or the product's name.
|
||||
name: string
|
||||
// Indicates whether this product variant is in stock.
|
||||
isInStock: boolean
|
||||
// Indicates if the product variant is available for sale.
|
||||
availableForSale: boolean
|
||||
// Whether a customer needs to provide a shipping address when placing
|
||||
// an order for the product variant.
|
||||
requiresShipping: boolean
|
||||
// Image associated with the product variant. Falls back to the product image
|
||||
// if no image is available.
|
||||
image: Image
|
||||
// Whether a customer needs to provide a shipping address when placing
|
||||
// an order for the product variant.
|
||||
requiresShipping: boolean
|
||||
// The product variant’s price after all discounts are applied.
|
||||
price: number
|
||||
// Product variant’s price, as quoted by the manufacturer/distributor.
|
||||
listPrice: number
|
||||
// Indicates whether this product variant is in stock.
|
||||
isInStock?: boolean
|
||||
// Indicates if the product variant is available for sale.
|
||||
availableForSale?: boolean
|
||||
// The variant's weight. If a weight was not explicitly specified on the
|
||||
// variant this will be the product's weight.
|
||||
weight?: Measurement
|
||||
|
Loading…
x
Reference in New Issue
Block a user