forked from crowetic/commerce
Added name and price of the cart item
This commit is contained in:
parent
e341d6b5f3
commit
835298ac92
@ -1,11 +1,29 @@
|
|||||||
import { Trash } from '@components/icon'
|
import { Trash } from '@components/icon'
|
||||||
|
import { useCommerce } from '@lib/bigcommerce'
|
||||||
|
import formatVariantPrice from 'utils/format-item-price'
|
||||||
|
|
||||||
|
const CartItem = ({
|
||||||
|
item,
|
||||||
|
currencyCode,
|
||||||
|
}: {
|
||||||
|
item: any
|
||||||
|
currencyCode: string
|
||||||
|
}) => {
|
||||||
|
const { locale } = useCommerce()
|
||||||
|
const { price } = formatVariantPrice({
|
||||||
|
listPrice: item.extended_list_price,
|
||||||
|
salePrice: item.extended_sale_price,
|
||||||
|
currencyCode,
|
||||||
|
locale,
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log('ITEM', item)
|
||||||
|
|
||||||
const CartItem = () => {
|
|
||||||
return (
|
return (
|
||||||
<li className="flex flex-row space-x-6">
|
<li className="flex flex-row space-x-6">
|
||||||
<div className="h-12 w-12 bg-violet"></div>
|
<div className="h-12 w-12 bg-violet"></div>
|
||||||
<div className="flex-1 flex flex-col">
|
<div className="flex-1 flex flex-col">
|
||||||
<span>T-Shirt</span>
|
<span>{item.name}</span>
|
||||||
<div className="py-2">
|
<div className="py-2">
|
||||||
<span>-</span>
|
<span>-</span>
|
||||||
<input
|
<input
|
||||||
@ -16,7 +34,7 @@ const CartItem = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col space-y-2">
|
<div className="flex flex-col space-y-2">
|
||||||
<span>$50.00</span>
|
<span>{price}</span>
|
||||||
<span className="flex justify-end">
|
<span className="flex justify-end">
|
||||||
<Trash />
|
<Trash />
|
||||||
</span>
|
</span>
|
||||||
|
@ -50,7 +50,11 @@ const CartSidebarView: FC = () => {
|
|||||||
<div className="px-4 sm:px-6 py-4 flex-1">
|
<div className="px-4 sm:px-6 py-4 flex-1">
|
||||||
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
|
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
|
||||||
{items.map((item) => (
|
{items.map((item) => (
|
||||||
<CartItem key={item.id} />
|
<CartItem
|
||||||
|
key={item.id}
|
||||||
|
item={item}
|
||||||
|
currencyCode={data?.currency.code!}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
@ -43,7 +43,6 @@ export const useUI = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function uiReducer(state: State, action: Action) {
|
function uiReducer(state: State, action: Action) {
|
||||||
console.log(action)
|
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case 'OPEN_SIDEBAR': {
|
case 'OPEN_SIDEBAR': {
|
||||||
return {
|
return {
|
||||||
|
41
utils/format-item-price.ts
Normal file
41
utils/format-item-price.ts
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
function formatPrice({
|
||||||
|
amount,
|
||||||
|
currencyCode,
|
||||||
|
locale,
|
||||||
|
}: {
|
||||||
|
amount: number
|
||||||
|
currencyCode: string
|
||||||
|
locale: string
|
||||||
|
}) {
|
||||||
|
const formatCurrency = new Intl.NumberFormat(locale, {
|
||||||
|
style: 'currency',
|
||||||
|
currency: currencyCode,
|
||||||
|
})
|
||||||
|
|
||||||
|
return formatCurrency.format(amount)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function formatVariantPrice({
|
||||||
|
listPrice,
|
||||||
|
salePrice,
|
||||||
|
currencyCode,
|
||||||
|
locale,
|
||||||
|
}: {
|
||||||
|
listPrice: number
|
||||||
|
salePrice: number
|
||||||
|
currencyCode: string
|
||||||
|
locale: string
|
||||||
|
}) {
|
||||||
|
const hasDiscount = listPrice > salePrice
|
||||||
|
const formatDiscount = new Intl.NumberFormat(locale, { style: 'percent' })
|
||||||
|
const discount = hasDiscount
|
||||||
|
? formatDiscount.format((listPrice - salePrice) / listPrice)
|
||||||
|
: null
|
||||||
|
|
||||||
|
const price = formatPrice({ amount: salePrice, currencyCode, locale })
|
||||||
|
const compareAtPrice = hasDiscount
|
||||||
|
? formatPrice({ amount: listPrice, currencyCode, locale })
|
||||||
|
: null
|
||||||
|
|
||||||
|
return { price, compareAtPrice, discount }
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user