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

Updated docs for wishlist and Node.js

Browse Source
This commit is contained in:
Luis Alvarez 2021-03-31 00:48:44 -06:00
parent 0d33ce7ee5
commit 24a64eba1d
1 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
framework/commerce/README.md
View File

@ -280,37 +280,37 @@ const RemoveButton = ({ item }) => {
## Wishlist Hooks ## Wishlist Hooks
Wishlist hooks are similar to cart hooks. See the below example for how to use `useWishlist`, `useAddItem`, and `useRemoveItem`. Wishlist hooks work just like [cart hooks](#cart-hooks). Feel free to check how those work first.
The example below shows how to use the `useWishlist`, `useAddItem` and `useRemoveItem` hooks:
```jsx ```jsx
import useAddItem from '@bigcommerce/storefront-data-hooks/wishlist/use-add-item' import { useWishlist, useAddItem, useRemoveItem } from '@framework/wishlist'
import useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'
import useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'
const WishlistButton = ({ productId, variant }) => { const WishlistButton = ({ productId, variant }) => {
const addItem = useAddItem() const addItem = useAddItem()
const removeItem = useRemoveItem() const removeItem = useRemoveItem()
const { data } = useWishlist() const { data, isLoading, isEmpty, error } = useWishlist()
if (isLoading) return <p>Loading...</p>
if (error) return <p>{error.message}</p>
if (isEmpty) return <p>The wihslist is empty</p>
const { data: customer } = useCustomer() const { data: customer } = useCustomer()
const itemInWishlist = data?.items?.find( const itemInWishlist = data?.items?.find(
(item) => (item) => item.product_id === productId && item.variant_id === variant.id
item.product_id === productId &&
item.variant_id === variant?.node.entityId
) )
const handleWishlistChange = async (e) => { const handleWishlistChange = async (e) => {
e.preventDefault() e.preventDefault()
if (!customer) return
if (!customer) {
return
}
if (itemInWishlist) { if (itemInWishlist) {
await removeItem({ id: itemInWishlist.id! }) await removeItem({ id: itemInWishlist.id })
} else { } else {
await addItem({ await addItem({
productId, productId,
variantId: variant?.node.entityId!, variantId: variant.id,
}) })
} }
} }
@ -323,7 +323,9 @@ const WishlistButton = ({ productId, variant }) => {
} }
``` ```
## Product Hooks and API ## Commerce API
While commerce hooks focus on client side data fetching and interactions, the commerce API focuses on static content generation for pages and API endpoints in a Node.js context.
### getAllProducts ### getAllProducts