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

Updated shopify docs

Browse Source
This commit is contained in:
Luis Alvarez 2021-03-31 13:04:06 -06:00
parent 255700e52c
commit 75741a4c7d
3 changed files with 17 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
framework/bigcommerce/README.md
View File

@ -1,5 +1,7 @@
# Bigcommerce Provider
**Demo:** https://bigcommerce.demo.vercel.store/
With the deploy button below you'll be able to have a [BigCommerce](https://www.bigcommerce.com/) account and a store that works with this starter:
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-description=An%20all-in-one%20starter%20kit%20for%20high-performance%20e-commerce%20sites.&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&integration-ids=oac_MuWZiE4jtmQ2ejZQaQ7ncuDT)

2
framework/shopify/.env.template
View File

@ -1,2 +1,4 @@
COMMERCE_PROVIDER=shopify
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=

163
framework/shopify/README.md
View File

@ -1,57 +1,28 @@
## Table of Contents
## Shopify Provider
- [Getting Started](#getting-started)
- [Modifications](#modifications)
- [Adding item to Cart](#adding-item-to-cart)
- [Proceed to Checkout](#proceed-to-checkout)
- [General Usage](#general-usage)
- [CommerceProvider](#commerceprovider)
- [useCommerce](#usecommerce)
- [Hooks](#hooks)
- [usePrice](#useprice)
- [useAddItem](#useadditem)
- [useRemoveItem](#useremoveitem)
- [useUpdateItem](#useupdateitem)
- [APIs](#apis)
- [getProduct](#getproduct)
- [getAllProducts](#getallproducts)
- [getAllCollections](#getallcollections)
- [getAllPages](#getallpages)
**Demo:** https://shopify.demo.vercel.store/
# Shopify Storefront Data Hooks
Before getting starter, a [Shopify](https://www.shopify.com/) account and store is required before using the provider.
Collection of hooks and data fetching functions to integrate Shopify in a React application. Designed to work with [Next.js Commerce](https://demo.vercel.store/).
Next, copy the `.env.template` file in this directory to `.env.local` in the main directory (which will be ignored by Git):
## Getting Started
1. Install dependencies:
```
yarn add shopify-buy
yarn add @types/shopify-buy
```bash
cp framework/shopify/.env.template .env.local
```
3. Environment variables need to be set:
Then, set the environment variables in `.env.local` to match the ones from your store.
```
SHOPIFY_STORE_DOMAIN=
SHOPIFY_STOREFRONT_ACCESS_TOKEN=
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=
```
## Contribute
4. Point the framework to `shopify` by updating `tsconfig.json`:
Our commitment to Open Source can be found [here](https://vercel.com/oss).
```
"@framework/*": ["framework/shopify/*"],
"@framework": ["framework/shopify"]
```
If you find an issue with the provider or want a new feature, feel free to open a PR or [create a new issue](https://github.com/vercel/commerce/issues).
### Modifications
## Modifications
These modifications are temporarily until contributions are made to remove them.
#### Adding item to Cart
### Adding item to Cart
```js
// components/product/ProductView/ProductView.tsx
@ -72,7 +43,7 @@ const ProductView: FC<Props> = ({ product }) => {
}
```
#### Proceed to Checkout
### Proceed to Checkout
```js
// components/cart/CartSidebarView/CartSidebarView.tsx
@ -88,114 +59,6 @@ const CartSidebarView: FC = () => {
}
```
## General Usage
### CommerceProvider
Provider component that creates the commerce context for children.
```js
import { CommerceProvider } from '@framework'
const App = ({ children }) => {
return <CommerceProvider locale={locale}>{children}</CommerceProvider>
}
export default App
```
### useCommerce
Returns the configs that are defined in the nearest `CommerceProvider`. Also provides access to Shopify's `checkout` and `shop`.
```js
import { useCommerce } from 'nextjs-commerce-shopify'
const { checkout, shop } = useCommerce()
```
- `checkout`: The information required to checkout items and pay ([Documentation](https://shopify.dev/docs/storefront-api/reference/checkouts/checkout)).
- `shop`: Represents a collection of the general settings and information about the shop ([Documentation](https://shopify.dev/docs/storefront-api/reference/online-store/shop/index)).
## Hooks
### usePrice
Display the product variant price according to currency and locale.
```js
import usePrice from '@framework/product/use-price'
const { price } = usePrice({
amount,
})
```
Takes in either `amount` or `variant`:
- `amount`: A price value for a particular item if the amount is known.
- `variant`: A shopify product variant. Price will be extracted from the variant.
### useAddItem
```js
import { useAddItem } from '@framework/cart'
const AddToCartButton = ({ variantId, quantity }) => {
const addItem = useAddItem()
const addToCart = async () => {
await addItem({
variantId,
})
}
return <button onClick={addToCart}>Add To Cart</button>
}
```
### useRemoveItem
```js
import { useRemoveItem } from '@framework/cart'
const RemoveButton = ({ item }) => {
const removeItem = useRemoveItem()
const handleRemove = async () => {
await removeItem({ id: item.id })
}
return <button onClick={handleRemove}>Remove</button>
}
```
### useUpdateItem
```js
import { useUpdateItem } from '@framework/cart'
const CartItem = ({ item }) => {
const [quantity, setQuantity] = useState(item.quantity)
const updateItem = useUpdateItem(item)
const updateQuantity = async (e) => {
const val = e.target.value
await updateItem({ quantity: val })
}
return (
<input
type="number"
max={99}
min={0}
value={quantity}
onChange={updateQuantity}
/>
)
}
```
## APIs
Collections of APIs to fetch data from a Shopify store.