Coder Social home page Coder Social logo

parmsang / gatsby-starter-ecommerce Goto Github PK

View Code? Open in Web Editor NEW
501.0 501.0 148.0 19.89 MB

Gatsby starter for creating an eCommerce site using the Moltin eCommerce Api

Home Page: https://parmsang.github.io/gatsby-starter-ecommerce/

License: Other

JavaScript 100.00%
cypress ecommerce gatsbyjs jest moltin react semantic-ui

gatsby-starter-ecommerce's People

Contributors

dependabot[bot] avatar efleurine avatar ej14433 avatar gerardold94 avatar parmsang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gatsby-starter-ecommerce's Issues

Error on fresh install

Hi, I've found this project very nice and interesting.

Just curious if this was an expected behavior on fresh install.

TypeError: Cannot read property 'link' of null`

image

Cheers!

Build is OS Dependent

Consider replacing build rm -rf with rimraf. Will need to install rimraf as a dependency. Otherwise build fails on Windows.

Customer Sign In

Hi any reason why I get "Sorry Cannot register at this time." error when i do a test sign up? Thanks

After switching the Moltin api key I get an error

Hi, thanks so much for open sourcing this project. It really is great and I can't wait to get going with it.

Upon switching the Moltin API however I get an error in the browser

screenshot 2018-09-13 10 21 25

I'm wondering if this is because my Moltin products aren't the same structure as the ones used in the demo? Would it be possible to see the structure of the products used in the demo to compare? Or has anyone else had a similar issue to this? I haven't changed anything other than created the .env file at root with my own Moltin api key.

Error: Module build failed: BrowserslistError: Unknown browser query `dead`

When I launch gatsby develop, I get this error:

success open and validate gatsby-config.js — 0.012 s
success copy gatsby files — 0.046 s
success onPreBootstrap — 0.343 s
success source and transform nodes — 1.761 s
success building schema — 0.369 s
success createLayouts — 0.009 s
success createPages — 0.050 s
success createPagesStatefully — 0.036 s
success onPreExtractQueries — 0.008 s
success update schema — 0.291 s
success extract queries from components — 0.138 s
success run graphql queries — 0.427 s
success write out page data — 0.004 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 6.197 s

error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND


  Error: Module build failed: BrowserslistError: Unknown browser query `dead` (While processing preset: "/Volumes/HDD/React_Dev_P  rogram/tana_cosmetics/node_modules/babel-preset-env/lib/index.js")

  - index.js:164
    [ecommerce]/[browserslist]/index.js:164:11

  - Array.reduce

  - index.js:132 resolve
    [ecommerce]/[browserslist]/index.js:132:18

  - index.js:224 browserslist
    [ecommerce]/[browserslist]/index.js:224:16

  - targets-parser.js:103 getTargets
    [ecommerce]/[babel-preset-env]/lib/targets-parser.js:103:63

  - index.js:144 buildPreset
    [ecommerce]/[babel-preset-env]/lib/index.js:144:45

  - option-manager.js:317
    [ecommerce]/[babel-core]/lib/transformation/file/options/option-manager.js:317:46

  - Array.map

  - option-manager.js:275 OptionManager.resolvePresets
    [ecommerce]/[babel-core]/lib/transformation/file/options/option-manager.js:275:20

  - option-manager.js:264 OptionManager.mergePresets
    [ecommerce]/[babel-core]/lib/transformation/file/options/option-manager.js:264:10

  - option-manager.js:249 OptionManager.mergeOptions
    [ecommerce]/[babel-core]/lib/transformation/file/options/option-manager.js:249:14

  - option-manager.js:368 OptionManager.init
    [ecommerce]/[babel-core]/lib/transformation/file/options/option-manager.js:368:12

  - index.js:212 File.initOptions
    [ecommerce]/[babel-core]/lib/transformation/file/index.js:212:65

  - index.js:135 new File
    [ecommerce]/[babel-core]/lib/transformation/file/index.js:135:24

  - pipeline.js:46 Pipeline.transform
    [ecommerce]/[babel-core]/lib/transformation/pipeline.js:46:16

  - index.js:46 transpile
    [ecommerce]/[babel-loader]/lib/index.js:46:20

  - fs-cache.js:79
    [ecommerce]/[babel-loader]/lib/fs-cache.js:79:18

  - fs-cache.js:15 ReadFileContext.callback
    [ecommerce]/[babel-loader]/lib/fs-cache.js:15:14

Is their something missing in my nodes?

moltin.com - questions....

I like the look of this project, however I've spent half hour looking through https://moltin.com trying to find pricing and haven't had any luck at all.

Are you aware of documentation of pricing tiers / models.

Thank you in advanced

Duplicated documents error

This is the error I received out of the box.

Error: RelayParser: Encountered duplicate defintitions for one or more documents: each document must have a unique name. Duplicated documents: - ProductsQuery - IndexQuery

Install fails due to Cypress checksum mismatch

When performing a clean gatsby new mystore https://github.com/parmsang/gatsby-starter-ecommerce, I get the following error:

[4/4] Building fresh packages...
[-/17] ⠈ waiting...
[-/17] ⠈ waiting...
[-/17] ⠈ waiting...
[13/17] ⠈ cypress
error F:\Code\mystore\node_modules\@types\testing-library__cypress\node_modules\cypress: Command failed.
Exit code: 1
Command: node index.js --exec install
Arguments:
Directory: F:\Code\mystore\node_modules\@types\testing-library__cypress\node_modules\cypress
Output:
Installing Cypress (version: 4.5.0)

...

[18:15:18]  Downloading Cypress      99% 3s [title changed]
[18:15:20]  Downloading Cypress      100% 0s [title changed]
[18:15:21]  Downloading Cypress      100% 0s [failed]
[18:15:21] → The Cypress App could not be downloaded.

Does your workplace require a proxy to be used to access the Internet? If so, you must configure the HTTP_PROXY environment variable before downloading Cypress. Read more: https://on.cypress.io/proxy-configuration     

Otherwise, please check network connectivity and try again:

----------

URL: https://download.cypress.io/desktop/4.5.0?platform=win32&arch=x64
Error: Corrupted download

Expected downloaded file to have checksum: 209c4108757f734812b133cd06658169ca37ba8cc58ff94506f84bf0493f1e8b5e2c972f9dbd3be91bc43fe0bddbe8fad00d800440375ba4c1a1c5d073a6a81a
Computed checksum: 98916ddb62e663d539d9b6f500995ea799ae32bae6a9d99ce62b1ac1eca62fa9d4c3e35ac79bcb91d82c22f7e73f9e3ebff2f3d9d3b0311ed281e766cfbaa914

Expected downloaded file to have size: 170413429
Computed size: 170413429

I am using Git Bash on Windows 10 Pro x64. I've tried multiple times, and I made sure my network was performing normally.

Let me know if there are other details I can provide that may help. Thanks!

Fresh project is not compiling

Hello,
I wanted to report that the fresh project is not compiling.
Gonna try to resolve but that might take a while.
My first guess is that in the template there might be used not static query.

Thanks for your code.

Cheers

`Multiple "root" queries found: "ProductsQuery" and "ProductsQuery".
Only the first ("ProductsQuery") will be registered.

Instead of:

   1 | query ProductsQuery {
   2 |   allMoltinProduct {
   3 |     #...
   4 |   }
   5 | }
   6 |
   7 | query ProductsQuery {
   8 |   allMoltinProduct {
   9 |     #...
  10 |   }
  11 | }

Do:

  1 | query productsQueryAndProductsQuery {
  2 |   allMoltinProduct {
  3 |     #...
  4 |   }
  5 |   allMoltinProduct {
  6 |     #...
  7 |   }
  8 | }

This can happen when you use two page/static queries in one file. Please combine those into one query.
If you're defining multiple components (each with a static query) in one file, you'll need to move each component to its own file.

File: C:/Users/Micha/Documents/GitHub/kpl-gatsby/src/templates/ProductPage.js

Multiple "root" queries found: "IndexQuery" and "IndexQuery".
Only the first ("IndexQuery") will be registered.

Instead of:

   1 | query IndexQuery {
   2 |   site {
   3 |     #...
   4 |   }
   5 | }
   6 |
   7 | query IndexQuery {
   8 |   site {
   9 |     #...
  10 |   }
  11 | }

Do:

  1 | query indexQueryAndIndexQuery {
  2 |   site {
  3 |     #...
  4 |   }
  5 |   site {
  6 |     #...
  7 |   }
  8 | }

This can happen when you use two page/static queries in one file. Please combine those into one query.
If you're defining multiple components (each with a static query) in one file, you'll need to move each component to its own file.

File: C:/Users/Micha/Documents/GitHub/kpl-gatsby/src/pages/index.js`

Current demo doesn't build - missing image

Steps to reproduce:

gatsby new gatsby-starter-ecommerce https://github.com/parmsang/gatsby-starter-ecommerce
cd gatsby-starter-ecommerce
gatsby build

Fails with

Encountered an error trying to infer a GraphQL type for: `mainImage___NODE`. There is no corresponding node with the `id` field matching: "9e1a7a0b-3132-5578-bb6f-da8a751847a4".

Error: Invariant Violation: Encountered an error trying to infer a GraphQL type for: `mainImage___NODE`. There is no corresponding node with the `id` field matching: "9e1a7a0b-3132-5578-bb6f-da8a751847a
  4".

TypeError: Cannot read property 'allMoltinProduct' of undefined

Hello,

i faced an issue with the plugin, i haved created a .env.development with the MOLTIN_CLIENT_ID=
STRIPE_PUBLISHABLE_KEY=
when i logged the MOLTIN_CLIENT_ID is ok, but the allMoltinProduct query is failed, and when i inspect the documentation, i did not find the allMoltinProduct.

does anyone got this? it's just do a npm run develop after running the cli.

regards

Help with building Moltin's SDK

Hey,

I'd like to implement Moltin into an existing Gatsby site I have and I'm struggling with a (I think) simple problem that you seem to have been able to overcome so I'd like to ask you directly :

Moltin's JS SDK tries to use the Node module FS with causes build error (of course) so I go ahead and override the Webpack config :

// gatsby-node.js

exports.modifyWebpackConfig = ({ config }) => {
	config.merge({
		node: { fs: "empty" }
	})

	return config
}

The build now runs, but I'm losing Gatsby's basic functionalities : the pages in my src/pages aren't created automatically any more.

If you went through this, or know what's going on, would you please let me know what I need to do in order to compile Moltin's SDK and keep Gastby's "normal" behaviour ?

If not, I'm thinking about using their API directly (versus their SDK).

Stripe react elements

Hi i was hoping to use stripes react elements to change the checkout flow and style similar to moltins demo here. I was hoping you could point me in the right direction as to which files i needed to edit or replace in order to add to this current project. Any help would be greatly appreciated. Thanks again

Checkout fails after payment

After going through the checkout procedure, the payment succeeds and I get returned to the cart page with nothing changed. The cart still has items and the order does not reflect on Moltin dashboard.

Console shows the following:
Failed to load resource: the server responded with a status of 400 ()
on the api call
https://api.moltin.com/v2/carts/3d8ccdec1a610ec0cc5d5649090270ab/checkout

I'm sure my Moltin api key is setup correctly as I can register a new customer and that does reflect on the Moltin dashboard.

Stripe Payment Gateway Stuck in Test Mode

First off thanks for your great work in developing this and making it open source. This is my first time using Gatsby for an Ecommerce site after developing a blog in Gatsby as a first project.

I don't know if you're still updating this project, but when I deployed to Netlify, I'm unable to get payment gateway out of test mode. Originally set .env STRIPE_PUBLISHABLE_KEY to live and then set login in Moltin to secret key and enabled Stripe payment gateway via dashboard. Gone through test purchase and test mode displays with following error message:

You did not set a valid key. Call stripeSetPublishableKey() with your publishable key. See stripe.com/docs/stripe.js

I have tried setting to my Stripe test token as well to see if this will complete the transaction but get same error.

Hello There! I am Completely new to JAMstack

I deployed this repo directly with netlify. Now I don't know anything. I mean that, I want to add products on my site and get payments from stripe to my Stripe account. similarly to add products I am unable to login to my admin panel. Please help here. I want to live this site for my project.

Unable to update dependencies

Hi,

I attempted to replace a depreciated dependency gatsby-image because upstream replaced it with gatsby-plugin-image; however, I realize this task is impossible unless somebody modifies the dependencies to be gatsby 3.0 compatible. When you update gatsby-plugin-image, you also need to update gatsby to the 3.x.x branch which also breaks @moltin/gatsby-source-moltin. Unfortunately, @moltin/gatsby-source-moltin has a dependency named bluebird that throws these errors below. @moltin/gatsby-source-moltin has not been updated for over an year as the time of writing. Since bluebird is use with gatsby, I think it is the overly aggressive eslint to be causing the problem.

Tested with Node.js 16.7

 ERROR 

The "path" argument must be of type string. Received an instance of Object



  TypeError: The "path" argument must be of type string. Received an instance of Object
  
  - errors:371 new NodeError
    node:internal/errors:371:5
  
  - validators:119 validateString
    node:internal/validators:119:11
  
  - node:path:1172 Object.join
    node:path:1172:7
  
  - index.js:34 resolveTheme
    [gatsby-starter-ecommerce]/[gatsby]/src/bootstrap/load-themes/index.js:34:31
  
  - index.js:115 
    [gatsby-starter-ecommerce]/[gatsby]/src/bootstrap/load-themes/index.js:115:30
  
  - util.js:16 tryCatcher
    [gatsby-starter-ecommerce]/[gatsby]/[bluebird]/js/release/util.js:16:23
  
  - reduce.js:166 Object.gotValue
    [gatsby-starter-ecommerce]/[gatsby]/[bluebird]/js/release/reduce.js:166:18
  
  - reduce.js:155 Object.gotAccum
    [gatsby-starter-ecommerce]/[gatsby]/[bluebird]/js/release/reduce.js:155:25
  
  - util.js:16 Object.tryCatcher
    [gatsby-starter-ecommerce]/[gatsby]/[bluebird]/js/release/util.js:16:23
  
  - promise.js:547 Promise._settlePromiseFromHandler
    [gatsby-starter-ecommerce]/[gatsby]/[bluebird]/js/release/promise.js:547:31
  
  - promise.js:604 Promise._settlePromise
    [gatsby-starter-ecommerce]/[gatsby]/[bluebird]/js/release/promise.js:604:18
  
  - promise.js:649 Promise._settlePromise0
    [gatsby-starter-ecommerce]/[gatsby]/[bluebird]/js/release/promise.js:649:10
  
  - promise.js:729 Promise._settlePromises
    [gatsby-starter-ecommerce]/[gatsby]/[bluebird]/js/release/promise.js:729:18
  
  - async.js:93 _drainQueueStep
    [gatsby-starter-ecommerce]/[gatsby]/[bluebird]/js/release/async.js:93:12
  
  - async.js:86 _drainQueue
    [gatsby-starter-ecommerce]/[gatsby]/[bluebird]/js/release/async.js:86:9
  
  - async.js:102 Async._drainQueues
    [gatsby-starter-ecommerce]/[gatsby]/[bluebird]/js/release/async.js:102:5
  

not finished open and validate gatsby-configs, load plugins - 0.256s
npm list  bluebird
[email protected] /git_repo/gatsby-starter-ecommerce
├─┬ @moltin/[email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     ├── [email protected]
│     ├─┬ [email protected]
│     │ └─┬ [email protected]
│     │   └── [email protected] deduped
│     └─┬ [email protected]
│       └─┬ [email protected]
│         └─┬ [email protected]
│           └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]
└─┬ [email protected]
  └── [email protected]
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/gatsby
npm ERR!   gatsby@"^2.29.3" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby@"^3.0.0-next.0" from [email protected]
npm ERR! node_modules/gatsby-plugin-image
npm ERR!   gatsby-plugin-image@"^1.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/psuedofinnish/.npm/eresolve-report.txt for a full report.

https://www.gatsbyjs.com/plugins/gatsby-image/
https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/
https://www.npmjs.com/package/bluebird
https://www.npmjs.com/package/@moltin/gatsby-source-moltin

Add To Cart fails with 400: Bad Request

After cloning, adding my details - MOLTIN_CLIENT_ID, ... -, and cleaning-up the graphql queries for the site to compile properly. When I am trying to add a product to the cart I am getting a 400 error from the Moltin API.

Any idea?

Moltin E-Commerce API

Hey,
thx for making this starter!

As I like how this starter is built and how it works, I wanted to use it. As it requires a Moltin account, I tried to organize one. As Moltin was acquired by Elasticpath, Moltin does not exist anymore. Do you know whether this also works with the Elasticpath version?

Business-related:
As it's very difficult to find our pricing details of Elasticpath, a sales representative of Elasticpath wrote to me, that that the entry-level starts at 50k/year (?!?!). Did he tell me just "anything" or does anyone have other/cheaper Elasticpath options?

Thx for feedback!

Strategies to update project when data Moltin data changes.

First of all, thanks so much for creating and open sourcing this project. I am new to Gatsby and have found it very helpful.

In Moltin (or whatever e-commerce engine you are using) - if a product is updated - or if a new product is created. You have to rebuild the project by clearing the .cache and recreating it before the data is reflected in the project.

This is obviously a bottleneck if you are trying to run a real e-commerce project.

I am curious if other people are tackling this issue.

  • Could you automate the cleaning and rebuilding of the cache?

  • Could you query Moltin using a Rest call and then compare your products to what you have in your cache?

  • Would you have certain components just make ajax calls directly to get things like product quantity?

It seems to me that if I can get that data to be a little less static - this stack could be a real home run.

I have found a blog post claiming it's possible to use Apollo to have "live" data in a gatsby static project. https://medium.com/@dwalsh.sdlr/gatsby-apollo-graphcool-netlify-the-webs-promised-land-6dd510efbd72

Any thoughts on that?

Demo not working

On demo when I press Add to cart, I get next error: Something went wrong

{status: 404, title: "Product not found", detail: "The requested product could not be found"}
https://api.moltin.com/v2/carts/d9ca8675f4cca52298dd25cc266b85f1/items

Error with fresh install

I'm trying to start a fresh install for checking but I'm getting:

error UNHANDLED REJECTION

TypeError: Cannot destructure property `link` of 'undefined' or 'null'.

 - gatsby-node.js:30 processProduct
   [gatsby-store]/[@moltin]/gatsby-source-moltin/gatsby-node.js:30:25

 - gatsby-node.js:166 products.forEach
   [gatsby-store]/[@moltin]/gatsby-source-moltin/gatsby-node.js:166:15

 - Array.forEach

 - gatsby-node.js:164 createProducts
   [gatsby-store]/[@moltin]/gatsby-source-moltin/gatsby-node.js:164:14

 - gatsby-node.js:177 Object.exports.sourceNodes
   [gatsby-store]/[@moltin]/gatsby-source-moltin/gatsby-node.js:177:9

 - task_queues.js:86 processTicksAndRejections
   internal/process/task_queues.js:86:5

Making it work with Commerce API? from Drupal Commerce - Help Request

Hello,

I really love your Gatsby starter theme, outstanding job!

I'm trying to figure out how to use Commerce API From Drupal Commerce to pull my 40 000 products instead of using Moltin API.

Documentation:
https://www.drupal.org/docs/8/modules/commerce-api

Perhaps someone was trying to do something like this? unfortunately there is no Drupal Commerce starter which would solve the Shopping cart and order imports to Drupal Commerce backend.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.