From 75741a4c7d308bd47631f3aa1bb71fc48e520825 Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Wed, 31 Mar 2021 13:04:06 -0600 Subject: [PATCH] Updated shopify docs --- framework/bigcommerce/README.md | 2 + framework/shopify/.env.template | 2 + framework/shopify/README.md | 163 +++----------------------------- 3 files changed, 17 insertions(+), 150 deletions(-) diff --git a/framework/bigcommerce/README.md b/framework/bigcommerce/README.md index 355a656fd..7f62a5f3f 100644 --- a/framework/bigcommerce/README.md +++ b/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) diff --git a/framework/shopify/.env.template b/framework/shopify/.env.template index 9dc3674b6..74f446835 100644 --- a/framework/shopify/.env.template +++ b/framework/shopify/.env.template @@ -1,2 +1,4 @@ +COMMERCE_PROVIDER=shopify + NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN= NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN= diff --git a/framework/shopify/README.md b/framework/shopify/README.md index eeae73afc..d67111a41 100644 --- a/framework/shopify/README.md +++ b/framework/shopify/README.md @@ -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 = ({ 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 {children} -} - -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 -} -``` - -### useRemoveItem - -```js -import { useRemoveItem } from '@framework/cart' - -const RemoveButton = ({ item }) => { - const removeItem = useRemoveItem() - - const handleRemove = async () => { - await removeItem({ id: item.id }) - } - - return -} -``` - -### 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 ( - - ) -} -``` - ## APIs Collections of APIs to fetch data from a Shopify store.