OneShopper Gatsby Site

February 20, 2020

About Us

This Started created for Ecommerce site with Gatsby + Contentful and snipcart

Features

  • Blog post listing with for each blog post.
  • Store page with all Product with few good features like Rating, Price, Checkout, More then one Product images with tabbing.
  • Contact form with Email notification.
  • Index pages design with Latest Post, Latest Blog and Deal of week and Banner.
  • So many other Good features

Setup

Create a Gatsby site.

Use the Gatsby CLI to Clone this site.

# Clone this Repositories
gatsby new OneShopper 
https://github.com/Rohitguptab/OneShopper.git

Setup Contentful Models

Use contentful-cli to import the models from oneshopper.json

# contentful space --space-id <CONTENTFUL_SPACE_ID> import --content-file oneshopper.json

Checkout my below blog how to Import and Export data from ContentFul

https://rohitgupta.design/import-and-export-data-with-contentful-cli

Setup your Own Configure Projects.

You have to create a contentful and snipcart account from the below sites.

You can find spaceId and accessToken from contentful https://be.contentful.com/

You can find snipcart apiKey from snipcart https://app.snipcart.com/

Once you get those key from sites then you have to create one .env file in the root with the below key

accessToken='your key'
spaceId='your key'
snipcart='your key'

or you can put directly in gatsby-config.js file

Start developing.

Navigate into your new site’s directory and start it up.

cd OneShopper
npm install
gatsby develop

Github:

https://github.com/rohitguptab/OneShopper

Live URL:

http://oneshopper.netlify.com

Share: