diff --git a/framework/commerce/README.md b/framework/commerce/README.md index 9e615b206..620d3bb39 100644 --- a/framework/commerce/README.md +++ b/framework/commerce/README.md @@ -110,9 +110,13 @@ Returns a _logout_ function that signs out the current customer when called. ```jsx import useLogout from '@framework/auth/use-logout' -const LogoutLink = () => { +const LogoutButton = () => { const logout = useLogout() - return logout()}>Logout + return ( + + ) } ``` @@ -120,7 +124,7 @@ const LogoutLink = () => { ### useCustomer -Fetches the data of the signed in customer: +Fetches and returns the data of the signed in customer: ```jsx import useCustomer from '@framework/customer/use-customer' @@ -136,20 +140,52 @@ const Profile = () => { } ``` +## Product Hooks + ### usePrice -Helper hook to format price according to commerce locale, and return discount if available. +Helper hook to format price according to the commerce locale and currency code. It also handles discounts: ```jsx -import usePrice from '@bigcommerce/storefront-data-hooks/use-price' -... - const { price, discount, basePrice } = usePrice( - data && { - amount: data.cart_amount, - currencyCode: data.currency.code, - } +import useCart from '@framework/cart/use-cart' +import usePrice from '@framework/product/use-price' + +// ... +const { data } = useCart() +const { price, discount, basePrice } = usePrice( + data && { + amount: data.subtotalPrice, + currencyCode: data.currency.code, + // If `baseAmount` is used, a discount will be calculated + // baseAmount: number, + } +) +// ... +``` + +### useSearch + +Fetches and returns the products that match a set of filters: + +```jsx +import useSearch from '@framework/product/use-search' + +const SearchPage = ({ searchString, category, brand, sortStr }) => { + const { data } = useSearch({ + search: searchString || '', + categoryId: category?.entityId, + brandId: brand?.entityId, + sort: sortStr, + }) + + return ( + + {data.products.map((product) => ( + + ))} + ) -... +} ``` ## Cart Hooks @@ -288,32 +324,6 @@ const WishlistButton = ({ productId, variant }) => { ## Product Hooks and API -### useSearch - -`useSearch` handles searching the bigcommerce storefront product catalog by catalog, brand, and query string. - -```jsx -... -import useSearch from '@bigcommerce/storefront-data-hooks/products/use-search' - -const SearchPage = ({ searchString, category, brand, sortStr }) => { - const { data } = useSearch({ - search: searchString || '', - categoryId: category?.entityId, - brandId: brand?.entityId, - sort: sortStr || '', - }) - - return ( - - {data.products.map(({ node }) => ( - - ))} - - ) -} -``` - ### getAllProducts API function to retrieve a product list.