Updated shopify docs

framework/bigcommerce/README.md

@@ -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)

framework/shopify/.env.template

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

framework/shopify/README.md

@@ -1,57 +1,28 @@
-## Table of Contents
+## Shopify Provider
 
-- [Getting Started](#getting-started)
+**Demo:** https://shopify.demo.vercel.store/
-  - [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)
 
-# 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
+```bash
-
+cp framework/shopify/.env.template .env.local
-1. Install dependencies:
-
-```
-yarn add shopify-buy
-yarn add @types/shopify-buy
 ```
 
-3. Environment variables need to be set:
+Then, set the environment variables in `.env.local` to match the ones from your store.
 
-```
+## Contribute
-SHOPIFY_STORE_DOMAIN=
-SHOPIFY_STOREFRONT_ACCESS_TOKEN=
-NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
-NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=
-```
 
-4. Point the framework to `shopify` by updating `tsconfig.json`:
+Our commitment to Open Source can be found [here](https://vercel.com/oss).
 
-```
+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).
-"@framework/*": ["framework/shopify/*"],
-"@framework": ["framework/shopify"]
-```
 
-### 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.