Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/commercelayer/gatsby-commerce
Commerce Layer + Gatsby Tutorial
https://github.com/commercelayer/gatsby-commerce
commercelayer ecommerce gatsby headless jamstack
Last synced: about 1 month ago
JSON representation
Commerce Layer + Gatsby Tutorial
- Host: GitHub
- URL: https://github.com/commercelayer/gatsby-commerce
- Owner: commercelayer
- License: mit
- Created: 2019-01-04T21:15:07.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:51:15.000Z (about 2 years ago)
- Last Synced: 2023-03-02T02:56:11.801Z (almost 2 years ago)
- Topics: commercelayer, ecommerce, gatsby, headless, jamstack
- Language: JavaScript
- Homepage: https://commercelayer.io/
- Size: 7.35 MB
- Stars: 7
- Watchers: 10
- Forks: 4
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Commerce Layer + Gatsby Tutorial
> How to integrate integrate the [Commerce Layer API](https://commercelayer.io/api/reference/) into your Gatsby application.
## 1. Install Gatsby
```shell
npm install --global gatsby-cli
```
## 2. Create a new site
```shell
gatsby new gatsby-commerce
```
## 3. Install the Commerce Layer Plugin
```shell
npm install gatsby-plugin-commercelayer --save
```
```javascript
# gatsby-config.js
module.exports = {
plugins: ['gatsby-plugin-commercelayer']
}
```
## 4. Create a demo page
Make sure you understand [how it works](https://github.com/commercelayer/static-commerce) and create some demo pages, like the following:
### Category page
```jsx
import React, { Component } from 'react'
import Layout from "../components/layout"
import * as CLayer from 'commercelayer-react'
export default class App extends Component {
render () {
return (
- Items
- Subtotal
- Shipping
- Payment
- Discount
- Taxes
- Total
}
/>
Not Available
}
/>
)
}
}
```
### Product page (radio)
```jsx
import React, { Component } from 'react'
import Layout from "../components/layout"
import * as CLayer from 'commercelayer-react'
export default class App extends Component {
render () {
return (
-
-
-
Available in - days with ()
}
/>
Not Available
}
/>
- Items
- Subtotal
- Shipping
- Payment
- Discount
- Taxes
- Total
}
/>
)
}
}
```
### Product page (select)
```jsx
import React, { Component } from 'react'
import Layout from "../components/layout"
import * as CLayer from 'commercelayer-react'
export default class App extends Component {
render () {
return (
Available in - days with ()
}
/>
Not Available
}
/>
- Items
- Subtotal
- Shipping
- Payment
- Discount
- Taxes
- Total
}
/>
)
}
}
```
## 5. Launch your site
Development:
```shell
gatsby develop
```
Production:
```shell
gatsby build
```