hygraph / gatsby-graphcms-ecommerce-starter Goto Github PK
View Code? Open in Web Editor NEWSwag store built with GraphCMS, Stripe, Gatsby, Postmark and Printful.
Home Page: https://gatsby-graphcms-ecommerce-starter.netlify.com
Swag store built with GraphCMS, Stripe, Gatsby, Postmark and Printful.
Home Page: https://gatsby-graphcms-ecommerce-starter.netlify.com
Deliverables
Since carts are handled via the UI, we need to take into consideration the following restrictions:
id
1
if not provided.<CartItem />
component. This would include the image
, name
, price
and slug
.The <ProductGrid />
component will render <Product />
components passed via the function props.
Send SMS order confirmation, fulfilment if a phone number is provided during checkout.
Deliverables
CartContext
to remove the item by id
Hi,
This is great, can be used as a merch store.
But i would like to inquire,
i live in a country not supported by stripe, how can i use paypal with this instead of stripe.
P.S Stripe Atlas is a bit too expensive
Deliverables
The cart page should only be created if the theme option enableCartPage
is true
.
Deliverables
There must be a <CartButton />
component that accepts the following props:
id
image
name
slug
price
quantity
This button must also be exported via the theme for use inside the gatsby-theme-storefront
theme.
The functions to send Postmark emails for order confirmation and dispatch aren't firing. Requires investigation.
I have readed the docs of stripe and printful,but how to use the functions/order-created,order-dispatched to trigger the postmark?
The <Product />
component will be used inside the <ProductGrid />
(#13). It must display:
name
price
photo
sale
labelWe need a <QuantitySelect />
component to show alongside the <CartButton />
inside the <Product />
component so the user can select the quantity of the item they wish to add to the cart.
This component will belong to the cart theme, but be exported for use inside the catalog theme.
I clone the project, ran yarn
then cp .env.sample .env
and put the endpoint form GraphCMS. I think this error is not something related to other environment variables if I'm not wrong.
Then I ran yarn dev
to start up but got this error.
...\node_modules\yoga-layout-prebuilt\yoga-layout\build\Release\nbind.js:53
throw ex;
^
TypeError: Cannot read property 'activities' of undefined
Using the locales functionality for product prices might be a simple (albeit hacky) way to showcase the feature.
I just clone the repo and using Swag Store Template.
It would be good to have a better guide for initial setup.
yarn run v1.22.5
$ gatsby develop
success open and validate gatsby-configs - 0.041s
success load plugins - 0.631s
success onPreInit - 0.002s
success initialize cache - 0.035s
success copy gatsby files - 0.208s
success onPreBootstrap - 0.009s
success createSchemaCustomization - 0.004s
ERROR #11321 PLUGIN
"gatsby-source-graphcms" threw an error while running the sourceNodes lifecycle:
Field "__typename" at path "Order,payments,0" has no parent type. This may indicate that your remote schema had changed and your fragment "Order" must be updated.
Error: Field "__typename" at path "Order,payments,0" has no parent type. This may indicate that your remote schema had changed and your fragment "Order" must be upda ted.
- build-type-usages-map.js:70 Object.enter
[****]/[gatsby-graphql-source-toolkit]/dist/compile-node-queries/analyze/build-type-usages-map.js:70:27
- build-type-usages-map.js:47 Object.buildTypeUsagesMap
[****]/[gatsby-graphql-source-toolkit]/dist/compile-node-queries/analyze/build-type-usages-map.js:47:15
- compile-node-queries.js:146 createCompilationContext
[****]/[gatsby-graphql-source-toolkit]/dist/compile-node-queries/compile-node-queries.js:146:48
- compile-node-queries.js:44 compileNodeQueries
[****]/[gatsby-graphql-source-toolkit]/dist/compile-node-queries/compile-node-queries.js:44:21
- gatsby-node.js:121 createSourcingConfig
[****]/[gatsby-source-graphcms]/gatsby-node.js:121:21
warn The gatsby-source-graphcms plugin has generated no Gatsby nodes. Do you need it?
success source and transform nodes - 4.924s
warn `createResolvers` passed resolvers for type `GraphCMS_Product` that doesn't exist in the schema. Use `createTypes` to add the type before adding resolvers.
warn `createResolvers` passed resolvers for type `GraphCMS_Review` that doesn't exist in the schema. Use `createTypes` to add the type before adding resolvers.
success building schema - 0.309s
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Cannot query field "allGraphCmsCategory" on type "Query".
File: src\gatsby\node\createPages.js:7:13
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Cannot query field "allGraphCmsCollection" on type "Query".
File: src\gatsby\node\createPages.js:7:13
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Cannot query field "allGraphCmsProduct" on type "Query". Did you mean "allPrintfulProduct"?
File: src\gatsby\node\createPages.js:7:13
ERROR #11321 PLUGIN
"gatsby-node.js" threw an error while running the createPages lifecycle:
Cannot destructure property `categories` of 'undefined' or 'null'.
TypeError: Cannot destructure property `categories` of 'undefined' or 'null'.
- createPages.js:6 Object.createPages
C:/*****/src/gatsby/node/createPages.js:6:5
failed createPages - 0.167s
success createPagesStatefully - 0.106s
success onPreExtractQueries - 0.005s
success update schema - 0.015s
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "GraphCMS_Locale".
File: src\templates\CategoryPage.js:24:48
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "GraphCMS_Locale".
File: src\templates\CollectionPage.js:24:50
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "GraphCMS_Locale".
File: src\templates\ProductsPage.js:23:32
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Unknown type "GraphCMS_Locale".
File: src\templates\ProductPage.js:183:41
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Cannot query field "allGraphCmsCategory" on type "Query".
GraphQL request:3:5
2 | query NavQuery {
3 | categories: allGraphCmsCategory(filter: { locale: { eq: en } }) {
| ^
4 | nodes {
File: src\components\Header.js:11:5
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Cannot query field "allGraphCmsCollection" on type "Query".
GraphQL request:10:5
9 | }
10 | collections: allGraphCmsCollection(filter: { locale: { eq: en } }) {
| ^
11 | nodes {
File: src\components\Header.js:18:5
failed extract queries from components - 0.742s
success write out requires - 0.036s
success write out redirect data - 0.010s
success onPostBootstrap - 0.002s
⠀
info bootstrap finished - 10.241 s
⠀
success run queries - 0.114s - 8/8 70.11/s
warn Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
C:\Users\****\src\components\Header.js
11:5 error Cannot query field "allGraphCmsCategory" on type "Query"
graphql/template-strings
98:17 warning onBlur must be used instead of onchange, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users
jsx-a11y/no-onchange
✖ 2 problems (1 error, 1 warning)
File: src\components\Header.js
failed Building development bundle - 7.340s
Deliverables
<CartItemQuantity />
component with item id
<RemoveCartItem />
component with item id
Deliverables
<CartItemList />
component that can renders the CartItem />
component with items from the cart context.<CartItemList />
component inside CartPage() component
Deliverables
There must be an updateItem(itemId, data)
function provided by CartContext
for use inside <CartItem />
.
This function will accept itemId
and data
arguments. data
can contain a new quantity
that will override the quantity. Everything else must use Object.assign
.
Deliverables
updateItemQuantity
yarn dev and yarn build fails due to graphql query of 'cms' in Header.js. Tried changing to align with my GraphCMS setup of my store but still fails.
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Cannot query field "ShakaSurf" on type "Query".
GraphQL request:3:5
2 | query NavQuery {
3 | cms {
| ^
4 | categories {
File: src/components/Header.js:11:5
It could be my understanding of GraphCMS and not naming my fields correctly, any pointers here greatly appreciated.
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.