alexanderprod/gatsby-shopify-starter

🛍 Simple starter to build a blazing fast Shopify store with Gatsby.

gatsby-shopify-starter's Issues

Add shop policy pages

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.

Convert to TypeScript

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.

Uncaught TypeError: Cannot read properties of undefined (reading 'addVariantToCart')

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>
          )}

Image slider on productpage

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?

ProductForm availability check, dependency array bug?

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])

Shouldn't be able to go to checkout with empty cart

If you click "checkout" with an empty cart you get redirected to the shopify website's cart.

Dynamic inventory check

Hi,

I was just wondering which part of the code is dynamically checking on the inventory, I cannot find it.

Kind Regards,
Brecht

Get lineItem slug/handle in the checkout context

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

RangeError: Maximum call stack size exceeded

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

Downgrade shopify-buy to v2.6.0

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.

Shopify no longer supports shopifyProduct or allShopifyProduct in GraphQL queries

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.

I am having trouble getting add to cart to work on Prod

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!

Just a cascade of errors after changing credentials

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

Shop should update new products in real time

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.

Error while gatsby develop

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)

Custom check out and user dashboard in Gatsby.

Would it be possible to build a custom checkout process and a user dashboard using Gatsby and the Shopify API?

Add copyright notice to license

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.

README: Need to publish products to app or allShopifyProduct will return undefined

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

Gatsby Develop very Slow with Shopify Starter

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?

Problems with multiple duplicate items in cart

First of all thank you for providing this awesome starter as an inspiration.

I've come across two problems with the current version:

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

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

Not able to build after change of env vars

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 🤔

Extracting shipping price data from Cart component

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.

SEO Topics

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.

auth/login/register

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

Add To Cart button needs to be disabled when adding item to cart

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>

Adding/Removing Items from Cart on Checkoutpage

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?

Add Documentation on Shopify Access rights

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.

update to "gatsby-plugin-sharp": "^2.7.1",

gatsby-shopify-starter/package.json

Line 21 in 1f9a8f9

"gatsby-plugin-sharp": "^2.2.32",

imposible to get going with this starter on ubuntu 20 while that old version of sharp is installed

Dynamic check disabled

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

How to get additional (custom) information from Shopify using Storefront API?

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?

Research

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?

Timeout query GetCollections - Shopify

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!

Change Qty on Cart Page

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.

retrieve custom fields/images from shopify

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

Sort Highest to Lowest Price Filter Component

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.

Clear cart on success?

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.

Can't Get Query on metafields

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

ERROR #85901 for "allShopifyProduct"

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:

2. Cannot query field "allShopifyProduct" on type "Query". Did you mean "allShopifyBlog", "allShopifyArticle", "allShopifyShopPolicy", or "allShopifyCollection"?

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

Add theme settings to customize with Shopify

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

Is the checkout opening in a new tab a technical limitation?

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)?

Build error on node v.12.0.0

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.

Update to latest plugin

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.

Getting FetchError with hostname issues

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

• gatsby-node.js:16 graphql.then.result
  C:/wamp/www/bags2slay-gatsby3/gatsby-node.js:16:17
  `

RelayParser Error

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.

🙏🏻

Build version Add to cart error

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.

Problem with cart initialization when deployed CDN (AWS Cloudfront)

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.