parmsang / gatsby-starter-ecommerce Goto Github PK
View Code? Open in Web Editor NEWGatsby starter for creating an eCommerce site using the Moltin eCommerce Api
Home Page: https://parmsang.github.io/gatsby-starter-ecommerce/
License: Other
Gatsby starter for creating an eCommerce site using the Moltin eCommerce Api
Home Page: https://parmsang.github.io/gatsby-starter-ecommerce/
License: Other
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).
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
It seems that we are loading the cartId instead of the newly received token in the Context Provider.
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!
The theme is beautiful. But you need a commercial API!
Whether to provide static pages to other customization requirements
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?
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".
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!
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
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?
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.
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
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.
This is a great starter but as it stands the work added to the gatsby starter is unclear from a licensing perspective given no copyright notice was added by the author. Please add a copyright notice. For more information see: https://writing.kemitchell.com/2016/09/21/MIT-License-Line-by-Line.html. If you're unsure how to add a notice let me know and I'll help. Note Gatsby recently relicensed all their starters under 0BSD.
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
How would a customer reset their password (if forgotten) via Moltin?
I don't see anything in the Moltin docs about this.
(This project is amazing @parmsang! Thanks for creating and sharing.)
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?
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.
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.
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
Consider replacing build rm -rf with rimraf. Will need to install rimraf as a dependency. Otherwise build fails on Windows.
Hello, great demo. I tried to deploy the Netlify template via this link:
https://templates.netlify.com/template/gatsby-starter-ecommerce/
But it does not build. Is this because you have specified build settings specific to hosting on github.io rather than netflify?
Thanks @parmsang for your work on this starter.
Just wondering if you are intending to update this starter to Gatsby v2 (latest release is [email protected] ).
I had a go myself using the 'Migrating from v1 to v2' notes but didnt have any luck.
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
Hi any reason why I get "Sorry Cannot register at this time." error when i do a test sign up? Thanks
I'm not sure if it's a self authentication problem or not. First of all motlin is not free anymore so I have no way to check . can I somehow bypass this and not live with this solution ??
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
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`
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.
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
On for example this product page, I get:
Can you reproduce it? Do you know what went wrong? There is no error message in the console.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.