Table of Contents
nextjs-commerce-shopify
Collection of hooks and data fetching functions to integrate Shopify in a React application. Designed to work with Next.js (See Next.js Commerce).
The data is fetched using the Shopify JavaScript Buy SDK. Read the Shopify Storefront API reference for more information.
Getting Started
yarn install nextjs-commerce-shopify
CommerceProvider
Provider component that creates the commerce context for children.
import { CommerceProvider } from 'nextjs-commerce-shopify';
const App = ({ children }) => {
return (
<CommerceProvider
config={{
domain: 'myshop.shopify.com',
token: 'XXXXXX',
currenyCode: 'SGD'
}}
>
{children}
</CommerceProvider>
);
};
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 toen-US
.
useCommerce
Returns the configs that are defined in the nearest CommerceProvider
. Also provides access to Shopify's checkout
and shop
.
import { useCommerce } from 'nextjs-commerce-shopify';
const { checkout, shop } = useCommerce();
-
checkout
: The information required to checkout items and pay (Documentation). -
shop
: Represents a collection of the general settings and information about the shop (Documentation).
Hooks
usePrice
Display the product variant price according to currency and locale.
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
import { useAddItem } from 'nextjs-commerce-shopify';
const AddToCartButton = ({ variantId, quantity }) => {
const addItem = useAddItem();
const addToCart = async () => {
await addItem({
variantId,
quantity
});
};
return <button onClick={addToCart}>Add To Cart</button>;
};
useRemoveItem
import { useRemoveItem } from 'nextjs-commerce-shopify';
const RemoveButton = ({ item }) => {
const removeItem = useRemoveItem();
const handleRemove = async () => {
await removeItem({ id: item.id });
};
return <button onClick={handleRemove}>Remove</button>;
};
useUpdateItem
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 (
<input
type="number"
max={99}
min={0}
value={quantity}
onChange={updateQuantity}
/>
);
};
APIs
Collections of APIs to fetch data from a Shopify store:
getProduct
Get a single product by its handle
.
import { getProduct } from 'nextjs-commerce-shopify';
const product = await getProduct({
domain,
token,
handle
});
getAllProducts
import { getAllProducts } from 'nextjs-commerce-shopify';
const products = await getAllProducts({
domain,
token
});
getAllCollections
import { getAllCollections } from 'nextjs-commerce-shopify';
const collections = await getCollections({
domain,
token
});
getAllPages
import { getAllPages } from 'nextjs-commerce-shopify';
const pages = await getAllPages({
domain,
token
});