crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-18 21:21:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added more docs

Browse Source
This commit is contained in:
Luis Alvarez 2021-03-30 19:10:14 -06:00
parent d62ce5ddc6
commit e9324d5f44
1 changed files with 48 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
framework/commerce/README.md
View File

@ -110,9 +110,13 @@ Returns a _logout_ function that signs out the current customer when called.
```jsx ```jsx
import useLogout from '@framework/auth/use-logout' import useLogout from '@framework/auth/use-logout'
const LogoutLink = () => { const LogoutButton = () => {
const logout = useLogout() const logout = useLogout()
return <a onClick={() => logout()}>Logout</a> return (
<button type="button" onClick={() => logout()}>
Logout
</button>
)
} }
``` ```
@ -120,7 +124,7 @@ const LogoutLink = () => {
### useCustomer ### useCustomer
Fetches the data of the signed in customer: Fetches and returns the data of the signed in customer:
```jsx ```jsx
import useCustomer from '@framework/customer/use-customer' import useCustomer from '@framework/customer/use-customer'
@ -136,20 +140,52 @@ const Profile = () => {
} }
``` ```
## Product Hooks
### usePrice ### 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 ```jsx
import usePrice from '@bigcommerce/storefront-data-hooks/use-price' import useCart from '@framework/cart/use-cart'
... import usePrice from '@framework/product/use-price'
const { price, discount, basePrice } = usePrice(
data && { // ...
amount: data.cart_amount, const { data } = useCart()
currencyCode: data.currency.code, 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 (
<Grid layout="normal">
{data.products.map((product) => (
<ProductCard key={product.path} product={product} />
))}
</Grid>
) )
... }
``` ```
## Cart Hooks ## Cart Hooks
@ -288,32 +324,6 @@ const WishlistButton = ({ productId, variant }) => {
## Product Hooks and API ## 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 (
<Grid layout="normal">
{data.products.map(({ node }) => (
<ProductCard key={node.path} product={node} />
))}
</Grid>
)
}
```
### getAllProducts ### getAllProducts
API function to retrieve a product list. API function to retrieve a product list.