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 to en-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
});