{"id":14971038,"url":"https://github.com/webmaeistro/gatsby-theme-crystallize","last_synced_at":"2025-10-01T16:30:49.738Z","repository":{"id":44820524,"uuid":"259480083","full_name":"webmaeistro/gatsby-theme-crystallize","owner":"webmaeistro","description":"Get up and running with Crystallize + Gatsby with Vipps Express Checkout (This repo is for a norwegian book publisher)","archived":false,"fork":true,"pushed_at":"2022-01-22T12:59:19.000Z","size":4502,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-25T05:21:44.402Z","etag":null,"topics":["backendless","books","crystallize","ecommerce","gatsby","gatsby-plugin","gatsby-starter","gatsbyjs","serverless","serverless-functions","vercel-now"],"latest_commit_sha":null,"homepage":"https://ornforlag-crystallize-vipps-mzpdmc5ub.now.sh/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"CrystallizeAPI/crystallize-gatsby-boilerplate","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webmaeistro.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":"SECURITY.md","support":null}},"created_at":"2020-04-27T23:25:19.000Z","updated_at":"2021-10-01T11:13:11.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/webmaeistro/gatsby-theme-crystallize","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmaeistro%2Fgatsby-theme-crystallize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmaeistro%2Fgatsby-theme-crystallize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmaeistro%2Fgatsby-theme-crystallize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmaeistro%2Fgatsby-theme-crystallize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webmaeistro","download_url":"https://codeload.github.com/webmaeistro/gatsby-theme-crystallize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234882569,"owners_count":18901295,"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":["backendless","books","crystallize","ecommerce","gatsby","gatsby-plugin","gatsby-starter","gatsbyjs","serverless","serverless-functions","vercel-now"],"created_at":"2024-09-24T13:44:37.839Z","updated_at":"2025-10-01T16:30:44.246Z","avatar_url":"https://github.com/webmaeistro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gatsby-theme-Crystallize\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://gatsbyjs.org\"\u003e\n    \u003cimg alt=\"Gatsby\" src=\"https://www.gatsbyjs.org/monogram.svg\" width=\"60\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n  Gatsbyjs + \u003ca href=\"https://crystallize.com\"\u003eCrystallize.com \u003c/a\u003e \u003c3 GraphQL\n\u003c/h1\u003e\n\n\u003ch3 align=\"center\"\u003e\n  ⚛️ 📄 🚀\n\u003c/h3\u003e\n\u003ch3 align=\"center\"\u003e\n  Blazing fast Ecomm site in every way that matters!\n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"lighthouse\" src=\"https://github.com/webmaeistro/gatsby-theme-crystallize/blob/master/rapport/perfect-lighthouse-ornforlag-crystallize.png\" width=\"90%\" /\u003e\n\u003c/p\u003e\n\nThis is a fork with few modules added from work done by Håkon Krogh and the good folks @CrystallizeAPI\n\nOriginal repo: https://github.com/CrystallizeAPI/crystallize-gatsby-boilerplate\n\n-added keywords to capture gatsbyjs telemetry\n-published to npmjs.\n-cyrpress\n-jest\n-concurrent mode\n-react-experimental-dep\n-bump in versions\n-Gatsbyjs-ified nameing convention: ~crystallize-gatsby-boilerplate~ to gatsby-theme-crystallize\n-published to npmjs as a gatsby-theme\n\n[![Edit gatsby-starter-crystyallize](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/webmaeistro/gatsby-theme-crystallize/tree/master/?fontsize=14\u0026hidenavigation=1\u0026module=%2Fpackage.json\u0026moduleview=1\u0026theme=dark\u0026view=preview)\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/webmaeistro/gatsby-theme-crystallize.git)\n\nThe theme you need to get a frontend up and running on the\n[headless ecommerce][8] \u0026 GraphQL based [product Information Management][9]\nservice [Crystallize][10]. [React/graphql commerce with Gatsby][11].\n\nThis crystallize.com theme is a great starting point when building [React\necommerce][11] experiences with [frontend performance][12] in focus. You can\nhave rich ecommerce content with the super structured [PIM][13] engine in\nCrystallize powering your product catalogue.\n\nFast frontend performance delivers a better ecommerce experience and is a key\ningredient in the [ecommerce SEO checklist][14]. [Rich content driven ecommerce\nexperiences][15] builds the foundation for a [content strategy for exponential\ngrowth marketing][16].\n\nCheck it out, the starter and theme is Open Source and MIT licensed.\n\n## Getting Started\n\n## 🚀 Quick start\n\n1.  **Setup this site.**\n\n    Use the Gatsby CLI to Clone this site.\n\n    ```sh\n    # Clone this Repositories\n    gatsby new crystallize-project https://github.com/webmaeistro/gatsby-theme-crystallize.git\n    ```\n\n2.  **Setup your API Dash**\n\n         goto crystallize.com register a user (its free up to a sertan point see pricing) and goto security tab and copy your tenant name\n\n    example:\n    `tenant=your-tenant`\n\n3.  **Start developing.**\n\n    Navigate into your new site’s directory and start it up.\n\n    ```sh\n    cd crystallize-project\n    ```\n\n\n    ```\n\n## two gatsby-specific things to do first\n\n### A:\n\nOpen the `crystallize-project` directory in your code editor of choice and make sure you'r `gatsby.config` has the following lines (among others):\n\nfile: /gatsby.config:\n\n```\n{\n            resolve: `gatsby-source-graphql`,\n            options: {\n                // This type will contain remote schema Query type\n                typeName: `CRYSTALLIZE`,\n                // This is the field under which it's accessible\n                fieldName: `crystallize`,\n                // URL to query from\n                url: `${process.env.CRYSTALLIZE_API_BASE}/${process.env.CRYSTALLIZE_TENANT_ID}/catalogue`,\n            },\n        },\n```\n\n### B:\n\ncreate a file named `crysallize.config` in the root of your project and copy paste the following lines:\n\n```\nCRYSTALLIZE_API_BASE=https://api.crystallize.com\nCRYSTALLIZE_TENANT_ID=\u003cyour-tenant-from-section-2-above\u003e\n```\n\n4.  **fire up your site and customize it!**\n\nRun the following in the root of your project:\n\n```\ngatsby develop\n```\n\n## 🎓 Learning Gatsby\n\nLooking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start:\n\n- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.\n\n- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.\n\n### 🎓 crystallize.com\n\nhttps://crystallize.com/learn/developer-guides\n\n**How to Fetch Products**\nProducts are a core part of the **catalogue**.\n\nSample Product Query:\ngraphql:\n\n```\nquery {\n  catalogue(language: \"en\", path: \"/cuddly-toys/kevin-the-kiwi\") {\n    ...item\n    ...product\n  }\n}\nfragment item on Item {\n  id\n  name\n  type\n  path\n  components {\n    name\n    type\n    meta {\n      key\n      value\n    }\n    content {\n      ...singleLine\n      ...richText\n      ...imageContent\n      ...paragraphCollection\n    }\n  }\n}\nfragment product on Product {\n  vatType {\n    name\n    percent\n  }\n  isVirtual\n  isSubscriptionOnly\n  variants {\n    id\n    name\n    sku\n    price\n    stock\n    isDefault\n    image {\n      url\n      altText\n      key\n      variants {\n        key\n        width\n      }\n    }\n    subscriptionPlans {\n      id\n      name\n      initialPeriod\n      initialPrice\n      recurringPeriod\n      recurringPrice\n    }\n  }\n}\nfragment image on Image {\n  url\n  altText\n  key\n  variants {\n    url\n    width\n    key\n  }\n}\nfragment imageContent on ImageContent {\n  images {\n    ...image\n  }\n}\nfragment singleLine on SingleLineContent {\n  text\n}\nfragment richText on RichTextContent {\n  json\n  html\n  plainText\n}\nfragment paragraphCollection on ParagraphCollectionContent {\n  paragraphs {\n    title {\n      ...singleLine\n    }\n    body {\n      ...richText\n    }\n    images {\n      ...image\n    }\n  }\n}\n```\n\nWe use the `src/` directory to hold the actual entry pages\nrelated to query result in `gatsby-node.js`.\n\nStyled components and UI.\n\nNB! react-framework orientated more then traditional gatsby file struckture\n\n## 💫 Deploy\n\nThere are multiple alternatives for deployments, check out one of the ones below:\n\n### Deploying with [Vercel Now][19]\n\n- Register a Vercel account\n- Install Vercel Now: `npm i -g now`\n- Run `now`\n\nextraction of gatsby-node.js:\n\n```\n // Map Crystallize shape names to the page templates\n  const templates = {\n    Article: path.resolve(`src/page-templates/article.js`),\n    Product: path.resolve(`src/page-templates/product/index.js`),\n    Folder: path.resolve(`src/page-templates/folder.js`),\n  }\n```\n\n- Get items 5 levels deep from Crystallize.\n- You can get even more levels by quering more children:\n- children {\n- path\n- shape {\n-     name\n- }\n- }\n\nextraction from gatsby-node.js\n\n```\nreturn graphql(\n  `\n    query loadAllCrystallizeCatalogueItems {\n      crystallize {\n        catalogue(language: \"en\", path: \"/\") {\n          children {\n            path\n            shape {\n              name\n            }\n            children {\n              path\n              shape {\n                name\n              }\n              children {\n                path\n                shape {\n                  name\n                }\n                children {\n                  path\n                  shape {\n                    name\n                  }\n                  children {\n                    path\n                    shape {\n                      name\n                    }\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  `\n).then(result =\u003e {\n  if (result.errors) {\n    throw result.errors\n  }\n\n  // Reduce all items into a single flat array\n  const items = []\n  {\n    ;(function add({ path, shape, children }) {\n      if (path \u0026\u0026 shape) {\n        // Ensure that we have a template for this shape\n        if (shape.name in templates) {\n          items.push({ path, shape, component: templates[shape.name] })\n        } else {\n          items.push({ path, shape, component: templates.Folder })\n          console.log(\n            `No template was found for shape \"${shape.name}\". \"${path}\" is rendered using the Folder template`\n          )\n        }\n      }\n      if (children) {\n        children.forEach(add)\n      }\n    })(result.data.crystallize.catalogue)\n  }\n```\n\n#### Create pages for each node\n\n          Add optional context data to be inserted\n           as props into the page component..\n\n           The context data can also be used as\n           arguments to the page GraphQL query.\n\n           The page \"path\" is always available as a GraphQL\n           argument.\n        },\n      })\n    })\n\n})\n}\n\n```\n\n[0]: https://img.shields.io/badge/react-latest-44cc11.svg?style=flat-square\n[1]: https://github.com/facebook/react\n[2]: https://img.shields.io/badge/next-latest-44cc11.svg?style=flat-square\n[3]: https://www.gatsbyjs.org/\n[4]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\n[5]: https://github.com/prettier/prettier\n[6]: https://img.shields.io/badge/code_linter-eslint-463fd4.svg?style=flat-square\n[7]: https://github.com/prettier/prettier\n[8]: https://crystallize.com/product\n[9]: https://crystallize.com/product/product-information-management\n[10]: https://crystallize.com\n[11]: https://crystallize.com/developers\n[12]: https://crystallize.com/blog/frontend-performance-measuring-kpis\n[13]: https://crystallize.com/product/product-information-management\n[14]: https://crystallize.com/blog/ecommerce-seo-checklist\n[15]: https://crystallize.com/blog/content-rich-storytelling-makes-juicy-ecommerce\n[16]: https://snowball.digital/blog/content-strategy-for-exponential-growth-marketing\n[17]: https://github.com/crystallizeapi/crystallize-cli\n[18]: https://www.netlify.com/\n[19]: https://vercel.com\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmaeistro%2Fgatsby-theme-crystallize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebmaeistro%2Fgatsby-theme-crystallize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmaeistro%2Fgatsby-theme-crystallize/lists"}