| Aug |
SEP |
Oct |
|
29 |
|
| 2019 |
2020 |
2021 |
About this capture
Web crawl data from Common Crawl.
The Wayback Machine - http://web.archive.org/web/20200929222052/https://github.com/jamstack-cms/jamstack-ecommerce
Skip to content
/;ref_cta:Sign up;ref_loc:header logged out">
Sign up
●
Features →
●Code review
●Project management
●Integrations
●Actions
●Packages
●Security
●Team management
●Hosting
●Mobile
●Customer stories →
●Security →
●
●
●
●Explore GitHub →
Learn & contribute
●Topics
●Collections
●Trending
●Learning Lab
●Open source guides
Connect with others
●Events
●Community forum
●GitHub Education
●GitHub Stars program
●
●
Plans →
●Compare plans
●Contact Sales
●Nonprofit →
●Education →
In this repository
All GitHub
↵
Jump to
↵
-
No suggested jump to results
{{ message }}
●
Watch
41
●
Star
869
●
Fork
136
A starter project for building performant ECommerce applications with Gatsby and React
www.jamstackecommerce.dev/
MIT License
869
stars
136
forks
Star
Watch
●
Code
●
Issues
5
●
Pull requests
2
●
Actions
●
Projects
0
●
Insights
●
Security
More
●
Code
●
Issues
●
Pull requests
●
Actions
●
Projects
●
Insights
●
Security
Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign up
1
branch
0
tags
Go to file
Code
Clone
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI.
Learn more.
●
Open with GitHub Desktop
●
Download ZIP
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio
If nothing happens, download the GitHub extension for Visual Studio and try again.
Latest commit
sw-yx
Merge pull request #11 from sw-yx/patch-1
79df559
Aug 3, 2020
Merge pull request #11 from sw-yx/patch-1
fix typo in signin page
79df559
Git stats
●
42
commits
Files
Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
providers
snippets
src
static
utils
.gitignore
.prettierignore
.prettierrc
LICENSE
README.md
design.jpg
gatsby-browser.js
gatsby-config.js
gatsby-node.esm.js
gatsby-node.js
gatsby-ssr.js
package.json
postcss.config.js
tailwind.config.js
yarn.lock
README.md
JAMstack ECommerce Professional (Beta)
JAMstack ECommerce Professional provides a way to quickly get up and running with a fully configurable JAMstack E Commerce site.
Out of the box, the site uses completely static data coming from a provider at providers/inventoryProvider.js. You can update this provider to fetch data from any real API by changing the call in the getInventory function.
This project is still in Beta.
Getting started
(一)Clone the project
$ git clone https://github.com/jamstack-cms/jamstack-ecommerce.git
(一)Install the dependencies:
$ yarn
#or
$ npm install
(一)Run the project
$ gatsby develop
# or to build
$ gatsby build
About the project
Tailwind
This project is styled using Tailwind. To learn more how this works, check out the Tailwind documentation here.
Components
The main files, components, and images you may want to change / modify are:
Logo - src/images/logo.png
Buttons, Nav, Header - src/components
Form components - src/components/formComponents
Context (state) - src/context/mainContext.js
Pages (admin, cart, checkout, index) - src/pages
Templates (category view, single item view, inventory views) - src/templates
How it works
As it is set up, inventory is fetched from a local hard coded array of inventory items. This can easily be configured to instead be fetched from a remote source like Shopify or another CMS or data source by changing the inventory provider.
Configuring inventory provider
Update providers/inventoryProvider.js with your own inventory provider.
Download images at build time
If you change the provider to fetch images from a remote source, you may choose to also download the images locally at build time to improve performance. Here is an example of some code that should work for this use case:
import fs from 'fs'
import axios from 'axios'
import path from 'path'
function getImageKey(url) {
const split = url.split('/')
const key = split[split.length - 1]
const keyItems = key.split('?')
const imageKey = keyItems[0]
return imageKey
}
function getPathName(url, pathName = 'downloads') {
let reqPath = path.join(__dirname, '..')
let key = getImageKey(url)
key = key.replace(/%/g, "")
const rawPath = `${reqPath}/public/${pathName}/${key}`
return rawPath
}
async function downloadImage (url) {
return new Promise(async (resolve, reject) => {
const path = getPathName(url)
const writer = fs.createWriteStream(path)
const response = await axios({
url,
method: 'GET',
responseType: 'stream'
})
response.data.pipe(writer)
writer.on('finish', resolve)
writer.on('error', reject)
})
}
export default downloadImage
You can use this function in gatsby-node.esm.js, map over the inventory data after fetching and replace the image paths with a reference to the location of the downloaded images, probably would look something like this:
await Promise.all(
inventory.map(async (item, index) => {
try {
const relativeUrl = `../downloads/${item.image}`
if (!fs.existsSync(`${__dirname}/public/downloads/${item.image}`)) {
await downloadImage(image)
}
inventory[index].image = relativeUrl
} catch (err) {
console.log('error downloading image: ', err)
}
})
)
Updating with Auth / Admin panel
Update src/pages/admin.js with sign up, sign, in, sign out, and confirm sign in methods.
Update src/templates/ViewInventory.js with methods to interact with the actual inventory API.
Update src/components/formComponents/AddInventory.js with methods to add item to actual inventory API.
Roadmap for V1
●Auto dropdown navigation for large number of categories
●Ability to add more / more configurable metadata to item details
●Themeing + dark mode
●Better image support out of the box
●Optional user account / profiles out of the box
●Have an idea or a request? Submit an issueora pull request!
Other considerations
Server-side processing of payments
To see an example of how to process payments server-side with stripe, check out the Lambda function in the snippets folder.
Also, consider verifying totals by passing in an array of IDs into the function, calculating the total on the server, then comparing the totals to check and make sure they match.
About
A starter project for building performant ECommerce applications with Gatsby and React
www.jamstackecommerce.dev/
Topics
gatsby
ecommerce
netlify
javascript
react
static-site-generator
serverless
Resources
Readme
License
MIT License
No releases published
No packages published
●
dabit3
Nader Dabit
●
thorsten-stripe
Thor 雷神
●
stav
Steven Almeroth
●
sw-yx
swyx
Languages
●
JavaScript
86.4%
●
CSS
13.6%
●© 2020 GitHub, Inc.
●Terms
●Privacy
●Security
●Status
●Help
●Contact GitHub
●Pricing
●API
●Training
●Blog
●About
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.