cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Use price hook in slug page

Browse Source
This commit is contained in:
Enrique Benitez 2020-10-29 16:04:13 -06:00
parent 629df7a9ab
commit 2a843d7700
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/product/ProductView/ProductView.tsx
View File

@ -9,6 +9,7 @@ import { Swatch, ProductSlider } from '@components/product'
import { Button, Container } from '@components/ui' import { Button, Container } from '@components/ui'
import { HTMLContent } from '@components/core' import { HTMLContent } from '@components/core'
import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item' import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-product' import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-product'
import { import {
@ -26,6 +27,11 @@ interface Props {
const ProductView: FC<Props> = ({ product }) => { const ProductView: FC<Props> = ({ product }) => {
const addItem = useAddItem() const addItem = useAddItem()
const { price } = usePrice({
amount: product.prices?.price.value,
baseAmount: product.prices?.retailPrice?.value,
currencyCode: product.prices?.price?.currencyCode!,
})
const { openSidebar } = useUI() const { openSidebar } = useUI()
const options = getProductOptions(product) const options = getProductOptions(product)
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
@ -74,7 +80,7 @@ const ProductView: FC<Props> = ({ product }) => {
<div className={s.nameBox}> <div className={s.nameBox}>
<h1 className={s.name}>{product.name}</h1> <h1 className={s.name}>{product.name}</h1>
<div className={s.price}> <div className={s.price}>
{product.prices?.price.value} {price}
{` `} {` `}
{product.prices?.price.currencyCode} {product.prices?.price.currencyCode}
</div> </div>