Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lopezjurip/daisy-ecommerce


https://github.com/lopezjurip/daisy-ecommerce

Last synced: 25 days ago
JSON representation

Awesome Lists containing this project

README 

        
## 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.



![](design.jpg)



> This project is still in Beta.



### Getting started



1. Clone the project



```sh

$ git clone https://github.com/jamstack-cms/jamstack-ecommerce.git

```



2. Install the dependencies:



```sh

$ yarn



# or



$ npm install

```



3. Run the project



```sh

$ 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](https://tailwindcss.com/docs).



### 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:



```javascript

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:



```javascript

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



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](https://github.com/jamstack-cms/jamstack-ecommerce/issues) or [a pull request](https://github.com/jamstack-cms/jamstack-ecommerce/pulls)!



### 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](https://github.com/jamstack-cms/jamstack-ecommerce/blob/master/snippets/lambda.js).



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.