alexanderprod / gatsby-shopify-starter Goto Github PK
View Code? Open in Web Editor NEW๐ Simple starter to build a blazing fast Shopify store with Gatsby.
Home Page: https://gatsby-shopify-starter.alexanderhoerl.de
License: Other
๐ Simple starter to build a blazing fast Shopify store with Gatsby.
Home Page: https://gatsby-shopify-starter.alexanderhoerl.de
License: Other
Shopify recently ended their 3-month long trial promotion. As a result it's important to get users up-and-running as quickly as possilble. Adding some pages for display and link to Shopify store policies (which can be generated via template from within shopify) would be a nice affordance to get people up and running quickly and showcase this functionality of shopify before users go down the path of trying to create their own policy pages.
First off, killer starter. Thoughtful design such as the currency internnationalization based off Shopify product price shine in the code. And having @emotion/core
in place made adding web fonts and porting to Chakra a snap. Very nice work.
Have you considered converting this repo to TypeScript for a more solid footing? I understand you don't want to add too much opinoin but moving to TS is probably something most would do just for the benefit of static code checking. It's one of the first things I did when I started using it and a low-effort conversion given the limited customizations you've made to gatsby-default-starter
.
where to debug this particular code ? does any one know ?
i only change this productGrid to display something or not based on location
{ location.location.path==="/shop/" ?
allShopifyProduct.edges ? (
allShopifyProduct.edges.map(
({
node: {
id,
handle,
title,
images: [firstImage],
variants: [firstVariant],
},
}) => (
<div key={id}>
<Link to={`/product/${handle}/`}>
<GatsbyImage
image={firstImage.gatsbyImageData}
alt={handle}
/>
</Link>
<h2>{title}</h2>
<p>{getPrice(firstVariant.price)}</p>
{/* <ExchangeRate from='IDR' to='USD' value={`${firstVariant.price}`}/> */}
</div>
)
)
) : (
<p>No Products found!</p>
):
<Carausels className="carauselsProductGrid">
{allShopifyProduct.edges ? (
allShopifyProduct.edges.map(
({
node: {
id,
handle,
title,
images: [firstImage],
variants: [firstVariant],
},
}) => (
<div key={id}>
<Link to={`/product/${handle}/`}>
<GatsbyImage
image={firstImage.gatsbyImageData}
alt={handle}
/>
</Link>
<h2>{title}</h2>
<p>{getPrice(firstVariant.price)}</p>
{/* <ExchangeRate from='IDR' to='USD' value={`${firstVariant.price}`}/> */}
</div>
)
)
) : (
<p>No Products found!</p>
)}
Hi,
Product images, on productpages, aren't shown in a slider at the larger breakpoints, only on mobile format. Changing the breakpoints.l to for instance s or xl does not fix it. /src/templates/ProductPage/index.js
if (product.images) {
return (
<div>
{width < breakpoints.l
? <Slide {...properties}>
{product.images.map(i => (
<Img
fluid={i.localFile.childImageSharp.fluid}
alt={product.title}
key={i.id}
/>
))}
</Slide>
: product.images.map(image => (
<Img
fluid={image.localFile.childImageSharp.fluid}
alt={product.title}
key={image.id}
/>
))
}
</div>
)
}
}
Any idea?
Am I mistaken in thinking the dependency arrays are used incorrectly here. Won't client.product
, variants
, and productVariant
always be different due to a lack of referential equality?
const checkAvailability = useCallback(
productId => {
client.product.fetch(productId).then(fetchedProduct => {
// this checks the currently selected variant for availability
const result = fetchedProduct.variants.filter(
variant => variant.id === productVariant.shopifyId
)
if (result.length > 0) {
setAvailable(result[0].available)
}
})
},
[client.product, productVariant.shopifyId, variants]
)
useEffect(() => {
checkAvailability(product.shopifyId)
}, [productVariant, checkAvailability, product.shopifyId])
If you click "checkout" with an empty cart you get redirected to the shopify website's cart.
Hi,
I was just wondering which part of the code is dynamically checking on the inventory, I cannot find it.
Kind Regards,
Brecht
I want to get the slug/handle of products in my checkout so that I can link to those items on my cart page, etc.
It appears that the following:
const fetchCheckout = (id) => store.client.checkout.fetch(id)
by default does not provide you the slug/handle of the products in the checkout.
Seems like there might be a way to add to the query (Shopify/js-buy-sdk#592) but this is difficult to find example for checkout
Hi there, I just cloned your repo, ran npm install (using node 10.7.0) which produced a number of deprecation warnings. But major issue is when I run gatsby develop I get the below error.
DONE Compiled successfully in 8273ms 11:50:27 AM
โ
error UNHANDLED EXCEPTION
RangeError: Maximum call stack size exceeded
- Array.values
- index.js:216 Console.console.error.args [as error]
[gatsby-shopify-starter]/[gatsby]/[gatsby-cli]/lib/reporter/index.js:216:50
- react-reconciler.development.js:100 warningWithoutStack
[gatsby-shopify-starter]/[react-reconciler]/cjs/react-reconciler.development.js:100:32
- react-reconciler.development.js:10458 warnAboutUpdateOnUnmounted
[gatsby-shopify-starter]/[react-reconciler]/cjs/react-reconciler.development.js:10458:5
- react-reconciler.development.js:11868 scheduleWork
[gatsby-shopify-starter]/[react-reconciler]/cjs/react-reconciler.development.js:11868:11
- react-reconciler.development.js:3152 Object.enqueueSetState
[gatsby-shopify-starter]/[react-reconciler]/cjs/react-reconciler.development.js:3152:5
- react.development.js:335 GatsbyReporter.Component.setState
[gatsby-shopify-starter]/[gatsby]/[react]/cjs/react.development.js:335:16
- reporter.js:132 GatsbyReporter._addMessage
[gatsby-shopify-starter]/[gatsby]/[gatsby-cli]/lib/reporter/reporters/ink/reporter.js:132:10
- index.js:82 Object.error
[gatsby-shopify-starter]/[gatsby]/[gatsby-cli]/lib/reporter/index.js:82:22
- index.js:216 Console.console.error.args [as error]
[gatsby-shopify-starter]/[gatsby]/[gatsby-cli]/lib/reporter/index.js:216:39
- react-reconciler.development.js:100 warningWithoutStack
[gatsby-shopify-starter]/[react-reconciler]/cjs/react-reconciler.development.js:100:32
- react-reconciler.development.js:10458 warnAboutUpdateOnUnmounted
[gatsby-shopify-starter]/[react-reconciler]/cjs/react-reconciler.development.js:10458:5
- react-reconciler.development.js:11868 scheduleWork
[gatsby-shopify-starter]/[react-reconciler]/cjs/react-reconciler.development.js:11868:11
- react-reconciler.development.js:3152 Object.enqueueSetState
[gatsby-shopify-starter]/[react-reconciler]/cjs/react-reconciler.development.js:3152:5
- react.development.js:335 GatsbyReporter.Component.setState
[gatsby-shopify-starter]/[gatsby]/[react]/cjs/react.development.js:335:16
- reporter.js:132 GatsbyReporter._addMessage
[gatsby-shopify-starter]/[gatsby]/[gatsby-cli]/lib/reporter/reporters/ink/reporter.js:132:10
The cart process fails with shopify-buy v2.6.1 as there appear to be breaking changes.
This is more a workaround than a fix but you need to use version v2.6.0 instead.
See Shopify/js-buy-sdk#687 for more context.
This plugin is out of date, please add a message to your README telling prospective users that Shopify no longer supports shopifyProduct or allShopifyProduct in GraphQL queries.
Hello!
Great starter, it has really help me out tremendously.
I am having in issue on production
of adding items to cart.
The error looks like it has to do with the POST request url containing undefined shown below in the console screenshot.
I am not sure why this is happening though.
My env variables I made sure I have the same for both development and in production inside Netlify.
One thing I changed was SHOP_NAME to contain the full URL however everything in dev mode looked good
Thanks for you time!
Everything works fine until I put my real credentials.
Getting a bunch of errors:
Encountered an error trying to infer a GraphQL type for: "products___NODE". There is no corresponding node with the id field matching: "Shopify__Product__Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzE0OTE0MjY4MDM4MTE= ......
error UNHANDLED REJECTION
Invariant Violation: Encountered an error trying to infer a GraphQL type for: "products___NODE". There is no corresponding node with the id field matching: "Shopify__Product__Z2lkOi 8vc2hvcGlmeS9Qcm9kdWN0LzE0OTE0MjY4MDM4MTE=
Any pieces of advice would be appreciated.
Thank you
Apart from real-time update of inventories, the site should also update new products added in the shopify dashboard. Right now, I need to rebuild on Netlify each time I add a new product from the Shopify dashboard.
Having problems with this error once I first try to gatsby develop
Any solutions?
C:\Users\USER\AppData\Roaming\npm\node_modules\gatsby\node_modules\yoga-layout-prebuilt\yoga-layout\build\Release\nbind.js:53
throw ex;
^
RangeError: Maximum call stack size exceeded
at Array Iterator.next ()
at Object.format (util.js:72:10)
Would it be possible to build a custom checkout process and a user dashboard using Gatsby and the Shopify API?
This is a great starter but as it stands the work added to the gatsby-starter-default
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.
Should add to readme that you need to publish your created products to the shopify app or allShopifyProduct will return undefined and gatsby won't be able to build
Hello.
The Shopify Starter is extremely slow. It takes about 10 minutes to generate the image thumbnails? I s this typical for a site with about 1000 products?
First of all thank you for providing this awesome starter as an inspiration.
I've come across two problems with the current version:
There is no real representation of the item quantity in the cart itself (https://gatsby-shopify.alexander-productions.de/cart). This causes problems if I add more than one item of the same type (e.g. "DOUBLE RACER BACK DRESS 2 / Black") to my cart since buyers aren't able to see this info.
The counter for the items in the cart in the top right corner next to the cart icon ignores duplicate items. Therefore adding an item twice (or more) doesn't increase the size of the counter. It is raised only once when adding an item for the first time.
Greetings
First of all, great job on this kit. It works great, awesome tooling.
Thank you for your effort.
I'm running into an issue once I change the creds to use my own, once I run yarn dev
, I get the following -
Missing onError handler for invocation 'building-schema', error was 'Invariant Violation: Encountered an error trying to infer a GraphQL type for: `localFile___NODE`. There is no corresponding node with the `id` field matching:
I set everything on the Storefront API and such.
Not sure what's missing.
Tried debugging, no success.
Weirdly, running yarn build
worked like a charm ๐ค
Hey all I'm having a problem with trying to pull the shipping price data from the Cart component that comes out of the box,
I am trying to use {checkout.shippingLine.price}
but i get the error "TypeError: Cannot read property 'price' of undefined" i am wondering how I can use this data in the component.
Hi, I'm not sure how to get SEO details from the products when listing them in a details page. Any help would be appreciated.
sorry not really an issue more of a question
but I would like to be able to do login/register in gastby shopify app.
but I cannot seem to find in the api's docs how to do
I've noticed that when a user clicks the Add To Cart button and then clicks again before the item is done adding it erases the contents of the cart and nothing gets added. This is noticeable on slower connection speeds.
<button className="btn btn-primary" type="submit" disabled={!available || context.adding} onClick={handleAddToCart} > Add to Cart </button>
After adding items to the cart and going to the checkout page on shopify, the user is not able to edit items in the cart on the shopify checkout page. In order to add/edit items, it seems that you need to go back to the cart page (on the gatsby page), edit items in the cart there, and then checkout again. This is confusing for a customer. Is there a way to allow the customer to edit cart items on the actual shopify checkout page?
Do we need write access for orders and products in the Shopify Admin area?
I want to not add any extra permissions and leave my store exposed.
gatsby-shopify-starter/package.json
Line 21 in 1f9a8f9
imposible to get going with this starter on ubuntu 20 while that old version of sharp is installed
Hi,
If I'm not mistaken, in the product form, the option disabled check happens at build time.
Wouldn't this be better done in real time instead since the inventory can keep changing based on sales?
Thanks
Thanks a lot for this project, it helped a lot in clearing my initial issues with setting up the platform.
However, in my particular use case I need each product to have some custom fields which I want to access via the storefront api in Gatsby. (Not to be confused with options/variants).
For example: Let's say I'm selling some gadgets and I want to share a pdf manual with the user for each one of my products, then I'll need to access the link to pdf manual from the storefront as well.
So how does one create/fetch custom information like this?
I found a app on Shopify named, Custom fields which sends over your custom fields as meta information but that doesn't show up by default on the gatsby graphiql interface. So I'm stuck as of how to get that data in the build time?
I've installed this successfully however once I change the credentials and rebuild, I'm getting the following error:
ERROR
error an error occurred while sourcing data
ERROR
- message: Timeout
ERROR
query:
"""query GetCollections($first: Int!, $after: String) { shop { collections(first: $first, after: $after) { pageInfo { hasNextPage } edges { cursor node { description descriptionHtml handle id image { altText id src } products(first: 250) { edges { node { id } } } title updatedAt } } } } }
"""
variables:
first: 100
after: null
Adding paginationSize: 100 helps slightly; it begins fetching and then after 15 seconds it returns the above error.
The store I'm trying this on is a Shopify Plus store, and has 8500 products & 3200 collections. I've also had the api limits increased by Shopify.
Any ideas on why this isn't working and how I can resolve would be much appreciated!
Is there a way to change the qty of the items in the customers cart on the cart page before the user checks out? Would love something like a + and - button to change item qty in the cart.
hey,
Sorry if this might be out of scope of your project (which is great btw, thanks). I have your project running locally, but what I don't understand is how to get non product data i.e. images and general text etc. I want this available for the client to change as opposed to hardcoding it in gatsby. Is there an approach to create something like wordpress ACF fields and images in pages in shopify and then retrieve them via graphQL. Or some other option? All the examples I can see are using separate CMSs for other content/images of the site besides products, but this seems a bonkers approach if you are already using Shopify (and is going to increase costs, probably annoy my client).
cheers
david
Hi there,
Thanks for the great starter.
I managed to change some things like from emotion to linaria for css-in-js. And style the starter the way I want. Got everything working great.
I've been spending the last 4 hours trying to figure out how to add a component that will allow users to filter results on one of the products pages (I have 5 collections and a page for each).
I want them to be able to filter from highest to lowest price, from lowest to highest price and from a to z alphabetical order.
I'm not asking you to add this functionality but instead on what I need to learn to add if myself.
The ProductForm component is the closest thing to what my Filter component will need to be if I'm not mistaken. Your code is way above my level so some insight would be great from you.
I'm learning React Hooks right now since I know I need them if I want to keep with your standard. Also looking into the context API because I guess that's where I'll find the context literally.
What confuses me the most is what to grab from where to make the filter component work. I know I need to get the product prices (you've done it for me so that's over). Not sure what the next step is though.
Thanks again. Hope you see this.
Would there be any way to clear the cart once a transaction is complete? I can redirect from the Shopify checkout back to my site, but how to clear the cart as the users' products will still be in in the cart.
on
https://{shop}.myshopify.com/admin/apps/shopify-graphiql-app
{
products(first: 10) {
edges {
node {
title
id
handle
metafield(namespace: "spr", key: "reviews") {
key
value
}
}
}
}
}
But I am still not able to query metafield in allShopifyProducts or allShopifyProduct in
http://localhost:8000/___graphql
Hey guys look like I keep getting these error and it looks like it is in fact connecting to the site but still giving me these errors
1: error an error occurred while sourcing data
There was an error in your GraphQL query:
The site has 400+ products, 20 blogs, etc so not sure why I'm getting the Error ? is it that Shopify changed the tag or is it something else
Can you use theme settings to enable the user to customize the site?
Such as this: https://help.shopify.com/en/themes/development/theme-editor/settings-schema
hey again!
I noticed you open the checkout using window.open and was wonder why you decided to load it in a new tab? Is it because if I were to open it in the same tab as the site, I would lose the ability to get back to the site after the checkout process? It isn't ideal having it in a different tab as it is but I was wondering if it is like this for a reason (I imagine there is one)?
When installing the dependencies using node v12.0.0
I get several build errors. I set nvm to use the latest lts version, v10.16.0
and I had no issues.
I'll inspect the issue later today, but it seems it's a problem with the version of V8.
I suggest adding a .nvmrc
file and updating the docs.
Not sure if is worth updating this repo, but the plugin now has a different API, and requires a STORE_URL
and ADMIN_PASSWORD
.
See this commit for further details.
I'm new to Gatsby and React is not in my stack so bear with me. I'm getting a weird error on my local dev machine where it's not building the hostname correctly. In gatsby-config.js, if I put the shopName
as just lloydinatorshop
instead of lloydinatorshop.myshopify.com
, it compiles. However, it can't be correct because now I can't query allShopifyProduct
. But what's even weirder is that it works perfectly on Codesandbox even though I did the same set up with both. The only difference I can think of is Codesandbox uses yarn and my local machine is using npm. I'm using Windows 10.
Anyway, here's the error stack:
` ERROR
error an error occurred while sourcing data
ERROR #11321 PLUGIN
"gatsby-source-shopify" threw an error while running the sourceNodes lifecycle:
request to https://lloydinatorshop.myshopify.com.myshopify.com/api/graphql failed, reason: Hostname/IP does not match certificate's altnames: Host: lloydinatorshop.myshopify.com.myshopify.com. is not in the cert's altnames: DNS:myshopify.com, DNS:*.myshopify.com
FetchError: request to https://lloydinatorshop.myshopify.com.myshopify.com/api/graphql failed , reason: Hostname/IP does not match certificate's altnames: Host: lloydinatorshop.myshopify.
com.myshopify.com. is not in the cert's altnames: DNS:myshopify.com, DNS:*.myshopify.com
index.js:1393 ClientRequest.
[bags2slay-gatsby3]/[cross-fetch]/[node-fetch]/lib/index.js:1393:11
destroy.js:91 emitErrorNT
internal/streams/destroy.js:91:8
destroy.js:59 emitErrorAndCloseNT
internal/streams/destroy.js:59:3
next_tick.js:63 process._tickCallback
internal/process/next_tick.js:63:19
warn The gatsby-source-shopify plugin has generated no Gatsby nodes. Do you need it?
success source and transform nodes - 0.702s
success building schema - 0.971s
ERROR #85901 GRAPHQL
There was an error in your GraphQL query:
Cannot query field "allShopifyProduct" on type "Query".
File: gatsby-node.js:5:10
ERROR #11321 PLUGIN
"gatsby-node.js" threw an error while running the createPages lifecycle:
Cannot read property 'allShopifyProduct' of undefined
TypeError: Cannot read property 'allShopifyProduct' of undefined
Hi, just wanted to start by saying I'm a huge fan of this starter.
However, after getting started with:
gatsby new my-shopify-store https://github.com/AlexanderProd/gatsby-shopify-starter
and then switching directories and running gatsby develop
, I get about 75% of the way through the initial compilation process and then I run into this error:
error GraphQL Error There was an error while compiling your site's GraphQL queries.
Error: RelayParser: Encountered duplicate defintitions for one or more documents: each document must have a unique name. Duplicated documents:
- usersTylershamboraCodeShopifyCutsGatsbySrcTemplatesProductPageIndexJs3430434902
It's coming right after the update schema lifecycle method when dynamically creating the pages:
success source and transform nodes โ 10.678 s
success building schema โ 0.651 s
success createPages โ 0.161 s
success createPagesStatefully โ 0.026 s
success onPreExtractQueries โ 0.003 s
success update schema โ 0.483 s
error GraphQL Error There was an error while compiling your site's GraphQL queries.
For now I've just commented out the graphql query inside of template/productPage, which gets me through the initial compile so I can noodle around a bit. It's been a couple of months since I've touched gatsby related so I'm getting reacquainted for now, but I'll keep poking around on this and see if I can find anything else out.
๐๐ป
Hi, I'm having a problem where the gatsby develop version works fine, but when I build it, I get an error when adding things to the cart.
Uncaught (in promise) TypeError: Cannot read property 'variants' of null
Which refers to this bit of code in the Product Form (line 28):
client.product.fetch(productId).then(fetchedProduct => {
// this checks the currently selected variant for availability
const result = fetchedProduct.variants.filter(
I'm not sure why it has problems fetching the product data.
Any ideas where things might be going wrong? Would be much appreciated.
Hello,
First thank you for this great starter!
Then to the problem:
I'm not sure if this actual bug but I have odd behavior when I deploy my site to AWS. I use CloudFront as CDN and all site
files are stored in s3 bucket which is configured as origin for CloudFront.
Now when I go to my site, cart/checkout doesn't get initialized fully. I have monitorized this from browser developer tools and I can see there is no checkoutId put in localstorage. So now when adding stuff to cart it throws error because checkoutId is undefined/null so Id is not added to react context either.
I have debugged that so far that it starts to initialize checkout in ContextProvider but
isRemoved.current
is set to true before it hits to setCheckoutState(..)
. It's weird why isRemove even get set to true.
If understand code correctly it's there to track when app unmounting/unmounted.
Link to code line i'm talking about: Link
On local development mode all works great.
Thanks for any help.
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.