4
0
forked from crowetic/commerce

Added name and price of the cart item

This commit is contained in:
Luis Alvarez 2020-10-06 17:16:06 -05:00
parent e341d6b5f3
commit 835298ac92
4 changed files with 67 additions and 5 deletions

View File

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

View File

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

View File

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

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