Nocturnal Prancing Mosquito
    Wondering what’s next for npm?Check out our public roadmap! »

    nextjs-commerce-shopify
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

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

    Install

    npm i nextjs-commerce-shopify

    DownloadsWeekly Downloads

    47

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    47.2 kB

    Total Files

    25

    Last publish

    Collaborators

    • avatar