gatsby-theme-crystallize
v0.5.0
Published
A simple starter to get up and developing quickly with Crystallize and Gatsby. For blazing fast Ecomm sites!
Downloads
5
Maintainers
Readme
Gatsby-theme-Crystallize
This is a fork with few modules added from work done by Håkon Krogh and the good folks @CrystallizeAPI
Original repo: https://github.com/CrystallizeAPI/crystallize-gatsby-boilerplate
-added keywords to capture gatsbyjs telemetry -published to npmjs. -Gatsbyjs-ified nameing convention: ~crystallize-gatsby-boilerplate~ to gatsby-theme-crystallize -published to npmjs as a gatsby-theme
The theme you need to get a frontend up and running on the [headless ecommerce][8] & GraphQL based [product Information Management][9] service [Crystallize][10]. [React/graphql commerce with Gatsby][11].
This crystallize.com theme is a great starting point when building [React ecommerce][11] experiences with [frontend performance][12] in focus. You can have rich ecommerce content with the super structured [PIM][13] engine in Crystallize powering your product catalogue.
Fast frontend performance delivers a better ecommerce experience and is a key ingredient in the [ecommerce SEO checklist][14]. [Rich content driven ecommerce experiences][15] builds the foundation for a [content strategy for exponential growth marketing][16].
Check it out, the starter and theme is Open Source and MIT licensed.
Getting Started
🚀 Quick start
Setup this site.
Use the Gatsby CLI to Clone this site.
# Clone this Repositories gatsby new crystallize-project https://github.com/webmaeistro/gatsby-theme-crystallize.git
Setup your API Dash
goto crystallize.com register a user (its free up to a sertan point see pricing) and goto security tab and copy your tenant name
example:
tenant=your-tenant
Start developing.
Navigate into your new site’s directory and start it up.
cd crystallize-project
two gatsby-specific things to do first
A:
Open the crystallize-project
directory in your code editor of choice and make sure you'r gatsby.config
has the following lines (among others):
file: /gatsby.config:
{
resolve: `gatsby-source-graphql`,
options: {
// This type will contain remote schema Query type
typeName: `CRYSTALLIZE`,
// This is the field under which it's accessible
fieldName: `crystallize`,
// URL to query from
url: `${process.env.CRYSTALLIZE_API_BASE}/${process.env.CRYSTALLIZE_TENANT_ID}/catalogue`,
},
},
B:
create a file named crysallize.config
in the root of your project and copy paste the following lines:
CRYSTALLIZE_API_BASE=https://api.crystallize.com
CRYSTALLIZE_TENANT_ID=<your-tenant-from-section-2-above>
- fire up your site and customize it!
Run the following in the root of your project:
gatsby develop
🎓 Learning Gatsby
Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:
For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.
🎓 crystallize.com
https://crystallize.com/learn/developer-guides
How to Fetch Products Products are a core part of the catalogue.
Sample Product Query: graphql:
query {
catalogue(language: "en", path: "/cuddly-toys/kevin-the-kiwi") {
...item
...product
}
}
fragment item on Item {
id
name
type
path
components {
name
type
meta {
key
value
}
content {
...singleLine
...richText
...imageContent
...paragraphCollection
}
}
}
fragment product on Product {
vatType {
name
percent
}
isVirtual
isSubscriptionOnly
variants {
id
name
sku
price
stock
isDefault
image {
url
altText
key
variants {
key
width
}
}
subscriptionPlans {
id
name
initialPeriod
initialPrice
recurringPeriod
recurringPrice
}
}
}
fragment image on Image {
url
altText
key
variants {
url
width
key
}
}
fragment imageContent on ImageContent {
images {
...image
}
}
fragment singleLine on SingleLineContent {
text
}
fragment richText on RichTextContent {
json
html
plainText
}
fragment paragraphCollection on ParagraphCollectionContent {
paragraphs {
title {
...singleLine
}
body {
...richText
}
images {
...image
}
}
}
We use the src/
directory to hold the actual entry pages
related to query result in gatsby-node.js
.
Styled components and UI.
NB! react-framework orientated more then traditional gatsby file struckture
💫 Deploy
There are multiple alternatives for deployments, check out one of the ones below:
Deploying with [Vercel Now][19]
- Register a Vercel account
- Install Vercel Now:
npm i -g now
- Run
now
extraction of gatsby-node.js:
// Map Crystallize shape names to the page templates
const templates = {
Article: path.resolve(`src/page-templates/article.js`),
Product: path.resolve(`src/page-templates/product/index.js`),
Folder: path.resolve(`src/page-templates/folder.js`),
}
- Get items 5 levels deep from Crystallize.
- You can get even more levels by quering more children:
- children {
- path
- shape {
name
- }
- }
extraction from gatsby-node.js
return graphql(
`
query loadAllCrystallizeCatalogueItems {
crystallize {
catalogue(language: "en", path: "/") {
children {
path
shape {
name
}
children {
path
shape {
name
}
children {
path
shape {
name
}
children {
path
shape {
name
}
children {
path
shape {
name
}
}
}
}
}
}
}
}
}
`
).then(result => {
if (result.errors) {
throw result.errors
}
// Reduce all items into a single flat array
const items = []
{
;(function add({ path, shape, children }) {
if (path && shape) {
// Ensure that we have a template for this shape
if (shape.name in templates) {
items.push({ path, shape, component: templates[shape.name] })
} else {
items.push({ path, shape, component: templates.Folder })
console.log(
`No template was found for shape "${shape.name}". "${path}" is rendered using the Folder template`
)
}
}
if (children) {
children.forEach(add)
}
})(result.data.crystallize.catalogue)
}
Create pages for each node
Add optional context data to be inserted
as props into the page component..
The context data can also be used as
arguments to the page GraphQL query.
The page "path" is always available as a GraphQL
argument.
},
})
})
}) }
[0]: https://img.shields.io/badge/react-latest-44cc11.svg?style=flat-square
[1]: https://github.com/facebook/react
[2]: https://img.shields.io/badge/next-latest-44cc11.svg?style=flat-square
[3]: https://www.gatsbyjs.org/
[4]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square
[5]: https://github.com/prettier/prettier
[6]: https://img.shields.io/badge/code_linter-eslint-463fd4.svg?style=flat-square
[7]: https://github.com/prettier/prettier
[8]: https://crystallize.com/product
[9]: https://crystallize.com/product/product-information-management
[10]: https://crystallize.com
[11]: https://crystallize.com/developers
[12]: https://crystallize.com/blog/frontend-performance-measuring-kpis
[13]: https://crystallize.com/product/product-information-management
[14]: https://crystallize.com/blog/ecommerce-seo-checklist
[15]: https://crystallize.com/blog/content-rich-storytelling-makes-juicy-ecommerce
[16]: https://snowball.digital/blog/content-strategy-for-exponential-growth-marketing
[17]: https://github.com/crystallizeapi/crystallize-cli
[18]: https://www.netlify.com/
[19]: https://vercel.com