Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/petermekhaeil/nextjs-commerce-shopify
Shopify hooks to use with Next.js Commerce.
https://github.com/petermekhaeil/nextjs-commerce-shopify
commerce nextjs shopify
Last synced: about 12 hours ago
JSON representation
Shopify hooks to use with Next.js Commerce.
- Host: GitHub
- URL: https://github.com/petermekhaeil/nextjs-commerce-shopify
- Owner: petermekhaeil
- Created: 2021-01-04T23:40:07.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-07T01:37:03.000Z (over 3 years ago)
- Last Synced: 2024-10-12T04:56:28.225Z (about 1 month ago)
- Topics: commerce, nextjs, shopify
- Language: TypeScript
- Homepage:
- Size: 131 KB
- Stars: 73
- Watchers: 11
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
**[Next.js Commerce](https://github.com/vercel/commerce) now supports Shopify. This package is not required if you're looking for Shopify integration for your Next.js Commerce application.**
## Table of Contents
- [Getting Started](#getting-started)
- [Installation](#installation)
- [CommerceProvider](#commerceprovider)
- [useCommerce](#usecommerce)
- [Hooks](#hooks)
- [usePrice](#useprice)
- [useAddItem](#useadditem)
- [useRemoveItem](#useremoveitem)
- [useUpdateItem](#useupdateitem)
- [APIs](#apis)
- [getProduct](#getproduct)
- [getAllProducts](#getallproducts)
- [getAllCollections](#getallcollections)
- [getAllPages](#getallpages)
# nextjs-commerce-shopify
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/) and can be used for other React commerce applications that need Shopify integration.
**This package requires modifications to your Next.js Commerce application. For a smoother integration, use their own Shopify support.**
## Getting Started
### Installation
```
yarn install nextjs-commerce-shopify
```
### CommerceProvider
Provider component that creates the commerce context for children.
```js
import { CommerceProvider } from 'nextjs-commerce-shopify';
const App = ({ children }) => {
return (
{children}
);
};
export default App;
```
The `config` takes:
- `domain`: Shopify domain. This is **required**.
- `token`: Shopify Storefront API Access Token. This is **required**.
- `currencyCode`: Currency code to use in store. Defaults to your Shopify default currency.
- `locale`: Used for currency format and if your Shopify supports translated content. Defaults to `en-US`.
### 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 'nextjs-commerce-shopify';
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 'nextjs-commerce-shopify';
const AddToCartButton = ({ variantId, quantity }) => {
const addItem = useAddItem();
const addToCart = async () => {
await addItem({
variantId,
quantity
});
};
return Add To Cart;
};
```
### useRemoveItem
```js
import { useRemoveItem } from 'nextjs-commerce-shopify';
const RemoveButton = ({ item }) => {
const removeItem = useRemoveItem();
const handleRemove = async () => {
await removeItem({ id: item.id });
};
return Remove;
};
```
### useUpdateItem
```js
import { useUpdateItem } from 'nextjs-commerce-shopify';
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.
The data is fetched using the [Shopify JavaScript Buy SDK](https://github.com/Shopify/js-buy-sdk#readme). Read the [Shopify Storefront API reference](https://shopify.dev/docs/storefront-api/reference) for more information.
### getProduct
Get a single product by its `handle`.
```js
import { getProduct } from 'nextjs-commerce-shopify';
const product = await getProduct({
domain,
token,
handle
});
```
### getAllProducts
```js
import { getAllProducts } from 'nextjs-commerce-shopify';
const products = await getAllProducts({
domain,
token
});
```
### getAllCollections
```js
import { getAllCollections } from 'nextjs-commerce-shopify';
const collections = await getAllCollections({
domain,
token
});
```
### getAllPages
```js
import { getAllPages } from 'nextjs-commerce-shopify';
const pages = await getAllPages({
domain,
token
});
```