Skip to content

gatarelib/gatsby-e-com

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Aclis E Commerce Professional

This is a repo of Aclis ECommerce.

This 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 WIP.

Getting started

  1. Clone the project
$ git clone https://github.com/gatarelib/gatsby-e-com
  1. Install the dependencies:
$ yarn

# or

$ npm install
  1. Run the project
$ gatsby develop

# or to build

$ gatsby build

Configuring inventory provider

Update providers/inventoryProvider.js with your own inventory provider.

Updating with Auth / Admin panel

  1. Update src/pages/admin.js with sign up, sign, in, sign out, and confirm sign in methods.

  2. Update src/templates/ViewInventory.js with methods to interact with the actual inventory API.

  3. Update src/components/formComponents/AddInventory.js with methods to add item to actual inventory API.

Roadmap for V1

  • Add ability to specify quantities in cart
  • 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 issue or a pull request!

Other considerations

Images

If you're using dynamic images over http, you can add a build step into exports.createPages in gatsby-node.esm.js to download the images locally to improve the user experience. You can also add a placeholder image in src/components/Image.js or make some adjustments in that component for other image loading enhancements.

Server-side processing of payments

To see an example of how to process payments server-side with stripe, check out 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.