{"id":22542214,"url":"https://github.com/commercelayer/gatsby-commerce","last_synced_at":"2025-08-04T06:32:16.840Z","repository":{"id":38439555,"uuid":"164155457","full_name":"commercelayer/gatsby-commerce","owner":"commercelayer","description":"Commerce Layer + Gatsby Tutorial","archived":false,"fork":false,"pushed_at":"2023-01-03T15:51:15.000Z","size":7707,"stargazers_count":7,"open_issues_count":27,"forks_count":4,"subscribers_count":10,"default_branch":"master","last_synced_at":"2023-03-02T02:56:11.801Z","etag":null,"topics":["commercelayer","ecommerce","gatsby","headless","jamstack"],"latest_commit_sha":null,"homepage":"https://commercelayer.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/commercelayer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-04T21:15:07.000Z","updated_at":"2022-05-11T14:31:20.000Z","dependencies_parsed_at":"2023-02-01T07:30:22.748Z","dependency_job_id":null,"html_url":"https://github.com/commercelayer/gatsby-commerce","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercelayer%2Fgatsby-commerce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercelayer%2Fgatsby-commerce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercelayer%2Fgatsby-commerce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercelayer%2Fgatsby-commerce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/commercelayer","download_url":"https://codeload.github.com/commercelayer/gatsby-commerce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228604684,"owners_count":17944280,"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":["commercelayer","ecommerce","gatsby","headless","jamstack"],"created_at":"2024-12-07T13:09:05.421Z","updated_at":"2024-12-07T13:09:06.202Z","avatar_url":"https://github.com/commercelayer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Commerce Layer + Gatsby Tutorial\n\n\u003e How to integrate integrate the [Commerce Layer API](https://commercelayer.io/api/reference/) into your Gatsby application.\n\n## 1. Install Gatsby\n\n```shell\nnpm install --global gatsby-cli\n```\n\n## 2. Create a new site\n\n```shell\ngatsby new gatsby-commerce\n```\n\n## 3. Install the Commerce Layer Plugin\n\n```shell\nnpm install gatsby-plugin-commercelayer --save\n```\n\n```javascript\n# gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-plugin-commercelayer']\n}\n```\n\n## 4. Create a demo page\n\nMake sure you understand [how it works](https://github.com/commercelayer/static-commerce) and create some demo pages, like the following:\n\n### Category page\n\n```jsx\nimport React, { Component } from 'react'\nimport Layout from \"../components/layout\"\nimport * as CLayer from 'commercelayer-react'\n\nexport default class App extends Component {\n\n  render () {\n    return (\n      \u003cLayout\u003e\n        \u003cdiv\u003e\n          \u003cCLayer.Price skuCode=\"BABYONBU000000E63E74NBXX\"/\u003e\n\n          \u003cCLayer.AddToBag skuCode=\"BABYONBU000000E63E74NBXX\"\n                           skuName=\"Black Baby Onesie Short Sleeve with Pink Logo (New born)\"\n                           skuReference=\"Commerce Layer 01\"\n                           skuImageUrl=\"https://img.commercelayer.io/skus/BABYONBU000000E63E74.png?fm=jpg\u0026q=90\"\n                           AvailabilityMessageContainerId=\"availability-message-BABYONBU000000E63E74NBXX\" /\u003e\n\n          \u003cCLayer.AvailabilityMessageContainer id=\"availability-message-BABYONBU000000E63E74NBXX\" /\u003e\n\n          \u003chr/\u003e\n\n          \u003cCLayer.Price skuCode=\"BABYONBU000000E63E746MXX\"/\u003e\n\n          \u003cCLayer.AddToBag skuCode=\"BABYONBU000000E63E746MXX\"\n                           skuName=\"Black Baby Onesie Short Sleeve with Pink Logo (6 Months)\"\n                           skuReference=\"Commerce Layer 02\"\n                           skuImageUrl=\"https://img.commercelayer.io/skus/BABYONBU000000E63E74.png?fm=jpg\u0026q=90\"\n                           AvailabilityMessageContainerId=\"availability-message-BABYONBU000000E63E746MXX\" /\u003e\n\n          \u003cCLayer.AvailabilityMessageContainer id=\"availability-message-BABYONBU000000E63E746MXX\" /\u003e\n\n          \u003chr/\u003e\n\n          \u003cCLayer.Price skuCode=\"BABYONBU000000E63E7412MX\"/\u003e\n\n          \u003cCLayer.AddToBag skuCode=\"BABYONBU000000E63E7412MX\"\n                           skuName=\"Black Baby Onesie Short Sleeve with Pink Logo (12 Months)\"\n                           skuReference=\"Commerce Layer 03\"\n                           skuImageUrl=\"https://img.commercelayer.io/skus/BABYONBU000000E63E74.png?fm=jpg\u0026q=90\"\n                           AvailabilityMessageContainerId=\"availability-message-BABYONBU000000E63E7412MX\" /\u003e\n\n          \u003cCLayer.AvailabilityMessageContainer id=\"availability-message-BABYONBU000000E63E7412MX\" /\u003e\n\n          \u003chr/\u003e\n\n          \u003cdl\u003e\n            \u003cdt\u003eItems\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagItemsCount /\u003e\u003c/dd\u003e\n            \u003cdt\u003eSubtotal\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagSubtotal /\u003e\u003c/dd\u003e\n            \u003cdt\u003eShipping\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagShipping /\u003e\u003c/dd\u003e\n            \u003cdt\u003ePayment\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagPayment /\u003e\u003c/dd\u003e\n            \u003cdt\u003eDiscount\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagDiscount /\u003e\u003c/dd\u003e\n            \u003cdt\u003eTaxes\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagTaxes /\u003e\u003c/dd\u003e\n            \u003cdt\u003eTotal\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagTotal /\u003e\u003c/dd\u003e\n          \u003c/dl\u003e\n\n          \u003chr/\u003e\n\n          \u003cCLayer.ShoppingBagItems\n            itemTemplate={\n              \u003cdiv\u003e\n                \u003cCLayer.ShoppingBagItemImage /\u003e\n                \u003cCLayer.ShoppingBagItemName /\u003e\n                \u003cCLayer.ShoppingBagItemUnitAmount /\u003e\n                \u003cCLayer.ShoppingBagItemQtyContainer /\u003e\n                \u003cCLayer.ShoppingBagItemRemove /\u003e\n                \u003cCLayer.ShoppingBagItemTotalAmount /\u003e\n              \u003c/div\u003e\n            }\n          /\u003e\n\n          \u003chr/\u003e\n\n          \u003cCLayer.Checkout/\u003e\n\n          \u003chr/\u003e\n\n          \u003cCLayer.AvailabilityMessageUnavailableTemplate\n            unavailableTemplate={\n              \u003cp\u003eNot Available\u003c/p\u003e\n            }\n          /\u003e\n\n          \u003cCLayer.Config\n            baseUrl=\"https://static-commerce.commercelayer.io\"\n            clientId=\"351020e9c84f2076755083f08bfe8e47365a76395db1059c3219c37abff86534\"\n            marketId=\"185\"\n            countryCode=\"US\"\n            languageCode=\"en\"\n            cartUrl=\"https://example.com/cart\"\n            returnUrl=\"https://example.com/return\"\n            privacyUrl=\"https://example.com/privacy\"\n            termsUrl=\"https://example.com/terms\" /\u003e\n        \u003c/div\u003e\n      \u003c/Layout\u003e\n    )\n  }\n}\n```\n\n### Product page (radio)\n\n```jsx\nimport React, { Component } from 'react'\nimport Layout from \"../components/layout\"\nimport * as CLayer from 'commercelayer-react'\n\nexport default class App extends Component {\n\n  render () {\n    return (\n      \u003cLayout\u003e\n        \u003cdiv\u003e\n          \u003cCLayer.Price skuCode=\"BABYONBU000000E63E74NBXX\" id=\"price\"/\u003e\n\n          \u003cul\u003e\n            \u003cli\u003e\n              \u003cCLayer.VariantRadio skuCode=\"BABYONBU000000E63E74NBXX\"\n                                   skuName=\"Black Baby Onesie Short Sleeve with Pink Logo (New born)\"\n                                   skuReference=\"Commerce Layer 01\"\n                                   skuImageUrl=\"https://img.commercelayer.io/skus/BABYONBU000000E63E74.png?fm=jpg\u0026q=90\"\n                                   PriceContainerId=\"price\"\n                                   AvailabilityMessageContainerId=\"availability-message\"\n                                   AddToBagId=\"add-to-bag\"\n                                   text=\"New born\" /\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n            \u003cCLayer.VariantRadio skuCode=\"BABYONBU000000E63E746MXX\"\n                                 skuName=\"Black Baby Onesie Short Sleeve with Pink Logo (6 Months)\"\n                                 skuReference=\"Commerce Layer 02\"\n                                 skuImageUrl=\"https://img.commercelayer.io/skus/BABYONBU000000E63E74.png?fm=jpg\u0026q=90\"\n                                 PriceContainerId=\"price\"\n                                 AvailabilityMessageContainerId=\"availability-message\"\n                                 AddToBagId=\"add-to-bag\"\n                                 text=\"6 Months\" /\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n            \u003cCLayer.VariantRadio skuCode=\"BABYONBU000000E63E7412MX\"\n                                 skuName=\"Black Baby Onesie Short Sleeve with Pink Logo (16 Months)\"\n                                 skuReference=\"Commerce Layer 03\"\n                                 skuImageUrl=\"https://img.commercelayer.io/skus/BABYONBU000000E63E74.png?fm=jpg\u0026q=90\"\n                                 PriceContainerId=\"price\"\n                                 AvailabilityMessageContainerId=\"availability-message\"\n                                 AddToBagId=\"add-to-bag\"\n                                 text=\"12 Months\" /\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n\n          \u003chr/\u003e\n          \u003cCLayer.AddToBag id=\"add-to-bag\"\n                           AvailabilityMessageContainerId=\"availability-message\" /\u003e\n\n          \u003cCLayer.AvailabilityMessageContainer id=\"availability-message\" /\u003e\n\n          \u003cCLayer.AvailabilityMessageAvailableTemplate\n            availableTemplate={\n              \u003cp\u003eAvailable in \u003cCLayer.AvailabilityMessageMinDays /\u003e-\u003cCLayer.AvailabilityMessageMaxDays /\u003e days with \u003cCLayer.AvailabilityMessageShippingMethodName /\u003e (\u003cCLayer.AvailabilityMessageShippingMethodPrice/\u003e)\u003c/p\u003e\n            }\n          /\u003e\n          \u003cCLayer.AvailabilityMessageUnavailableTemplate\n            unavailableTemplate={\n              \u003cp\u003eNot Available\u003c/p\u003e\n            }\n          /\u003e\n          \u003chr/\u003e\n\n          \u003cdl\u003e\n            \u003cdt\u003eItems\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagItemsCount /\u003e\u003c/dd\u003e\n            \u003cdt\u003eSubtotal\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagSubtotal /\u003e\u003c/dd\u003e\n            \u003cdt\u003eShipping\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagShipping /\u003e\u003c/dd\u003e\n            \u003cdt\u003ePayment\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagPayment /\u003e\u003c/dd\u003e\n            \u003cdt\u003eDiscount\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagDiscount /\u003e\u003c/dd\u003e\n            \u003cdt\u003eTaxes\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagTaxes /\u003e\u003c/dd\u003e\n            \u003cdt\u003eTotal\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagTotal /\u003e\u003c/dd\u003e\n          \u003c/dl\u003e\n\n          \u003chr/\u003e\n\n          \u003cCLayer.ShoppingBagItems\n            itemTemplate={\n              \u003cdiv\u003e\n                \u003cCLayer.ShoppingBagItemImage /\u003e\n                \u003cCLayer.ShoppingBagItemName /\u003e\n                \u003cCLayer.ShoppingBagItemUnitAmount /\u003e\n                \u003cCLayer.ShoppingBagItemQtyContainer /\u003e\n                \u003cCLayer.ShoppingBagItemRemove /\u003e\n                \u003cCLayer.ShoppingBagItemTotalAmount /\u003e\n              \u003c/div\u003e\n            }\n          /\u003e\n\n          \u003chr/\u003e\n\n          \u003cCLayer.Checkout/\u003e\n\n          \u003chr/\u003e\n\n          \u003cCLayer.Config\n            baseUrl=\"https://static-commerce.commercelayer.io\"\n            clientId=\"351020e9c84f2076755083f08bfe8e47365a76395db1059c3219c37abff86534\"\n            marketId=\"185\"\n            countryCode=\"US\"\n            languageCode=\"en\"\n            cartUrl=\"https://example.com/cart\"\n            returnUrl=\"https://example.com/return\"\n            privacyUrl=\"https://example.com/privacy\"\n            termsUrl=\"https://example.com/terms\" /\u003e\n        \u003c/div\u003e\n      \u003c/Layout\u003e\n    )\n  }\n}\n```\n\n### Product page (select)\n\n```jsx\nimport React, { Component } from 'react'\nimport Layout from \"../components/layout\"\nimport * as CLayer from 'commercelayer-react'\n\nexport default class App extends Component {\n\n  render () {\n    return (\n      \u003cLayout\u003e\n        \u003cdiv\u003e\n          \u003cCLayer.Price skuCode=\"BABYONBU000000FFFFFFNBXX\" id=\"price\"/\u003e\n\n          \u003cCLayer.VariantSelect\n            PriceContainerId=\"price\"\n            AvailabilityMessageContainerId=\"availability-message\"\n            AddToBagId=\"add-to-bag\"\n            skus={[{\n                    code: \"BABYONBU000000FFFFFFNBXX\",\n                    name: \"Black Baby Onesie Short Sleeve with White Logo (New born)\",\n                    label: \"New born\"\n                  },\n                  {\n                    code: \"BABYONBU000000FFFFFF6MXX\",\n                    name: \"Black Baby Onesie Short Sleeve with White Logo (6 Months)\",\n                    label: \"6 Months\"\n                  },\n                  {\n                    code: \"BABYONBU000000FFFFFF12MX\",\n                    name: \"Black Baby Onesie Short Sleeve with White Logo (12 Months)\",\n                    label: \"12 Months\"\n                  }]} /\u003e\n\n          \u003chr/\u003e\n          \u003cCLayer.AddToBag id=\"add-to-bag\"\n                           AvailabilityMessageContainerId=\"availability-message\" /\u003e\n\n          \u003cCLayer.AvailabilityMessageContainer id=\"availability-message\" /\u003e\n\n          \u003cCLayer.AvailabilityMessageAvailableTemplate\n            availableTemplate={\n              \u003cp\u003eAvailable in \u003cCLayer.AvailabilityMessageMinDays /\u003e-\u003cCLayer.AvailabilityMessageMaxDays /\u003e days with \u003cCLayer.AvailabilityMessageShippingMethodName /\u003e (\u003cCLayer.AvailabilityMessageShippingMethodPrice/\u003e)\u003c/p\u003e\n            }\n          /\u003e\n          \u003cCLayer.AvailabilityMessageUnavailableTemplate\n            unavailableTemplate={\n              \u003cp\u003eNot Available\u003c/p\u003e\n            }\n          /\u003e\n          \u003chr/\u003e\n\n          \u003cdl\u003e\n            \u003cdt\u003eItems\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagItemsCount /\u003e\u003c/dd\u003e\n            \u003cdt\u003eSubtotal\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagSubtotal /\u003e\u003c/dd\u003e\n            \u003cdt\u003eShipping\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagShipping /\u003e\u003c/dd\u003e\n            \u003cdt\u003ePayment\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagPayment /\u003e\u003c/dd\u003e\n            \u003cdt\u003eDiscount\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagDiscount /\u003e\u003c/dd\u003e\n            \u003cdt\u003eTaxes\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagTaxes /\u003e\u003c/dd\u003e\n            \u003cdt\u003eTotal\u003c/dt\u003e\n            \u003cdd\u003e\u003cCLayer.ShoppingBagTotal /\u003e\u003c/dd\u003e\n          \u003c/dl\u003e\n\n          \u003chr/\u003e\n\n          \u003cCLayer.ShoppingBagItems\n            itemTemplate={\n              \u003cdiv\u003e\n                \u003cCLayer.ShoppingBagItemImage /\u003e\n                \u003cCLayer.ShoppingBagItemName /\u003e\n                \u003cCLayer.ShoppingBagItemUnitAmount /\u003e\n                \u003cCLayer.ShoppingBagItemQtyContainer /\u003e\n                \u003cCLayer.ShoppingBagItemRemove /\u003e\n                \u003cCLayer.ShoppingBagItemTotalAmount /\u003e\n              \u003c/div\u003e\n            }\n          /\u003e\n\n          \u003chr/\u003e\n\n          \u003cCLayer.Checkout/\u003e\n\n          \u003chr/\u003e\n\n          \u003cCLayer.Config\n            baseUrl=\"https://static-commerce.commercelayer.io\"\n            clientId=\"351020e9c84f2076755083f08bfe8e47365a76395db1059c3219c37abff86534\"\n            marketId=\"185\"\n            countryCode=\"US\"\n            languageCode=\"en\"\n            cartUrl=\"https://example.com/cart\"\n            returnUrl=\"https://example.com/return\"\n            privacyUrl=\"https://example.com/privacy\"\n            termsUrl=\"https://example.com/terms\" /\u003e\n        \u003c/div\u003e\n      \u003c/Layout\u003e\n    )\n  }\n}\n```\n\n## 5. Launch your site\n\nDevelopment:\n\n```shell\ngatsby develop\n```\n\nProduction:\n\n```shell\ngatsby build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommercelayer%2Fgatsby-commerce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcommercelayer%2Fgatsby-commerce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommercelayer%2Fgatsby-commerce/lists"}