{"id":20251781,"url":"https://github.com/petermekhaeil/nextjs-commerce-shopify","last_synced_at":"2025-04-10T23:15:44.035Z","repository":{"id":54801701,"uuid":"326834559","full_name":"petermekhaeil/nextjs-commerce-shopify","owner":"petermekhaeil","description":"Shopify hooks to use with Next.js Commerce.","archived":false,"fork":false,"pushed_at":"2021-03-07T01:37:03.000Z","size":134,"stargazers_count":74,"open_issues_count":0,"forks_count":11,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-24T20:05:40.192Z","etag":null,"topics":["commerce","nextjs","shopify"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/petermekhaeil.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-04T23:40:07.000Z","updated_at":"2025-02-19T04:47:32.000Z","dependencies_parsed_at":"2022-08-14T03:20:23.890Z","dependency_job_id":null,"html_url":"https://github.com/petermekhaeil/nextjs-commerce-shopify","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petermekhaeil%2Fnextjs-commerce-shopify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petermekhaeil%2Fnextjs-commerce-shopify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petermekhaeil%2Fnextjs-commerce-shopify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petermekhaeil%2Fnextjs-commerce-shopify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/petermekhaeil","download_url":"https://codeload.github.com/petermekhaeil/nextjs-commerce-shopify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247947856,"owners_count":21023066,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["commerce","nextjs","shopify"],"created_at":"2024-11-14T10:12:45.788Z","updated_at":"2025-04-10T23:15:44.011Z","avatar_url":"https://github.com/petermekhaeil.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"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.** \n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n  - [Installation](#installation)\n  - [CommerceProvider](#commerceprovider)\n  - [useCommerce](#usecommerce)\n- [Hooks](#hooks)\n  - [usePrice](#useprice)\n  - [useAddItem](#useadditem)\n  - [useRemoveItem](#useremoveitem)\n  - [useUpdateItem](#useupdateitem)\n- [APIs](#apis)\n  - [getProduct](#getproduct)\n  - [getAllProducts](#getallproducts)\n  - [getAllCollections](#getallcollections)\n  - [getAllPages](#getallpages)\n\n# nextjs-commerce-shopify\n\nCollection 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.\n\n**This package requires modifications to your Next.js Commerce application. For a smoother integration, use their own Shopify support.**\n\n## Getting Started\n\n### Installation\n\n```\nyarn install nextjs-commerce-shopify\n```\n\n### CommerceProvider\n\nProvider component that creates the commerce context for children.\n\n```js\nimport { CommerceProvider } from 'nextjs-commerce-shopify';\n\nconst App = ({ children }) =\u003e {\n  return (\n    \u003cCommerceProvider\n      config={{\n        domain: 'myshop.shopify.com',\n        token: 'XXXXXX',\n        currencyCode: 'SGD'\n      }}\n    \u003e\n      {children}\n    \u003c/CommerceProvider\u003e\n  );\n};\n\nexport default App;\n```\n\nThe `config` takes:\n\n- `domain`: Shopify domain. This is **required**.\n- `token`: Shopify Storefront API Access Token. This is **required**.\n- `currencyCode`: Currency code to use in store. Defaults to your Shopify default currency.\n- `locale`: Used for currency format and if your Shopify supports translated content. Defaults to `en-US`.\n\n### useCommerce\n\nReturns the configs that are defined in the nearest `CommerceProvider`. Also provides access to Shopify's `checkout` and `shop`.\n\n```js\nimport { useCommerce } from 'nextjs-commerce-shopify';\n\nconst { checkout, shop } = useCommerce();\n```\n\n- `checkout`: The information required to checkout items and pay ([Documentation](https://shopify.dev/docs/storefront-api/reference/checkouts/checkout)).\n- `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)).\n\n## Hooks\n\n### usePrice\n\nDisplay the product variant price according to currency and locale.\n\n```js\nimport { usePrice } from 'nextjs-commerce-shopify';\n\nconst { price } = usePrice({\n  amount\n});\n```\n\nTakes in either `amount` or `variant`:\n\n- `amount`: A price value for a particular item if the amount is known.\n- `variant`: A shopify product variant. Price will be extracted from the variant.\n\n### useAddItem\n\n```js\nimport { useAddItem } from 'nextjs-commerce-shopify';\n\nconst AddToCartButton = ({ variantId, quantity }) =\u003e {\n  const addItem = useAddItem();\n\n  const addToCart = async () =\u003e {\n    await addItem({\n      variantId,\n      quantity\n    });\n  };\n\n  return \u003cbutton onClick={addToCart}\u003eAdd To Cart\u003c/button\u003e;\n};\n```\n\n### useRemoveItem\n\n```js\nimport { useRemoveItem } from 'nextjs-commerce-shopify';\n\nconst RemoveButton = ({ item }) =\u003e {\n  const removeItem = useRemoveItem();\n\n  const handleRemove = async () =\u003e {\n    await removeItem({ id: item.id });\n  };\n\n  return \u003cbutton onClick={handleRemove}\u003eRemove\u003c/button\u003e;\n};\n```\n\n### useUpdateItem\n\n```js\nimport { useUpdateItem } from 'nextjs-commerce-shopify';\n\nconst CartItem = ({ item }) =\u003e {\n  const [quantity, setQuantity] = useState(item.quantity);\n  const updateItem = useUpdateItem(item);\n\n  const updateQuantity = async (e) =\u003e {\n    const val = e.target.value;\n    await updateItem({ quantity: val });\n  };\n\n  return (\n    \u003cinput\n      type=\"number\"\n      max={99}\n      min={0}\n      value={quantity}\n      onChange={updateQuantity}\n    /\u003e\n  );\n};\n```\n\n## APIs\n\nCollections of APIs to fetch data from a Shopify store.\n\nThe 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.\n\n### getProduct\n\nGet a single product by its `handle`.\n\n```js\nimport { getProduct } from 'nextjs-commerce-shopify';\n\nconst product = await getProduct({\n  domain,\n  token,\n  handle\n});\n```\n\n### getAllProducts\n\n```js\nimport { getAllProducts } from 'nextjs-commerce-shopify';\n\nconst products = await getAllProducts({\n  domain,\n  token\n});\n```\n\n### getAllCollections\n\n```js\nimport { getAllCollections } from 'nextjs-commerce-shopify';\n\nconst collections = await getAllCollections({\n  domain,\n  token\n});\n```\n\n### getAllPages\n\n```js\nimport { getAllPages } from 'nextjs-commerce-shopify';\n\nconst pages = await getAllPages({\n  domain,\n  token\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpetermekhaeil%2Fnextjs-commerce-shopify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpetermekhaeil%2Fnextjs-commerce-shopify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpetermekhaeil%2Fnextjs-commerce-shopify/lists"}