search

GatsbyStorefront / gatsby-theme-storefront-shopify

Create a Shopify store with Gatsby JS 🛍️ 🛒
https://gatsbystorefront.com
Mozilla Public License 2.0
239 stars 57 forks source link

Proper way to update gatsbystorefront-config.js ? #4

Closed wes1278 closed 4 years ago

wes1278 commented 4 years ago

I'm new to gatsby. Seems awesome. Themes seem awesome. Shadowing seems awesome.

However, It seems like gatsbystorefront-config.js is a critical file to this application. As most of the configurations one would want to make are in this file. But, I'd have to edit this stuff inside my root directory/node_modules/@gatsbystorefront/gatsby-theme-storefront-shopify/gatsbystorefront-config.js ? Why would this be a desired method to update?

I can't shadow this file since it's not in the src folder. Any particular reason it was designed this way? Am I missing something? What if I wanted to update the theme if an update ever came about? Seems like I lose all my changes? Can/should I sync this with another directory or something?

Seems a bit crazy to a newcomer.

johncookv commented 4 years ago

@wes1278 I have used gatsby for multiple sites, but this is the first time I tried using shadowing. Took me a little bit, but I was able to figure out how to make updates to this theme using shadowing.

  1. Make sure you follow the prerequisites in the readme
  2. Create the following directories: /src, /src/@gatsbystorefront, and /src/@gatsbystorefront/gatsby-theme-storefront-shopify
  3. You can shadow any of the files outside of src by putting them in the /src/@gatsbystorefront/gatsby-theme-storefront-shopify directory. In order to address your initial question, you would copy gatsbystorefront-config.js from node_modules, paste it in here, and make your edits. Files inside of src can be shadowed by following the same folder heirarchy as you see it in node_modules, but don't include src.

i.e. If I want to shadow node_modules/@gatsbystorefront/gatsby-theme-storefront-shopify/src/components/Footer.jsx I would copy Footer.jsx from there and paste it into /src/@gatsbystorefront/gatsby-theme-storefront-shopify/components/Footer.jsx

NOTE: Regarding shadowing gatsbystorefront-config.js - it's not enough just to copy it, paste it in the appropriate directory, and make your edits. The components in the theme are still importing the original gatsbystorefront-config.js. In order to see your changes, you will need to shadow the components as well, and import your version of gatsbystorefront-config.js. e.g. In order to see my changes to the footer text, I needed to update the text in gatsbystorefront-config.js and shadow Footer.jsx.

NOTE: Regarding shadowing components - If they have relative imports of other components in the theme, you'll either need to shadow those imports or change them to absolute paths to the theme's components. Check out how the imports look when I shadowed Navbar.js:

import Menu from "@gatsbystorefront/gatsby-theme-storefront-shopify/src/components/Menu"
import Search from "@gatsbystorefront/gatsby-theme-storefront-shopify/src/components/Search"
import ShoppingBag from "@gatsbystorefront/gatsby-theme-storefront-shopify/src/components/Icons/ShoppingBag"
import ShoppingCart from "@gatsbystorefront/gatsby-theme-storefront-shopify/src/components/Icons/ShoppingCart"
import config from "@gatsbystorefront/gatsby-theme-storefront-shopify/src/gatsbystorefront-config"
import strings from "@gatsbystorefront/gatsby-theme-storefront-shopify/src/components/strings.json"

Hope this helps!

Sources that led me in the right direction: https://www.christopherbiscardi.com/post/gatsby-shadow-contexts/ https://github.com/ChristopherBiscardi/gatsby-theme-examples/tree/master/examples/shadowing-01

johncookv commented 4 years ago

I can't get the queries to run on shadowed components. Can somebody help with that?

paveli commented 4 years ago

I can't get the queries to run on shadowed components. Can somebody help with that?

@johncookv it seems to be an issue with GatsbyJs. There are few issues open right now like: https://github.com/gatsbyjs/gatsby/issues/19980 For now I would suggest to clone and make changes in the theme itself.

paveli commented 4 years ago

I can't shadow this file since it's not in the src folder. Any particular reason it was designed this way? Am I missing something?

@wes1278 it seems like architectural mistake. This file should be replaced to be available for shadowing. I will work on it.

What if I wanted to update the theme if an update ever came about? Seems like I lose all my changes? Can/should I sync this with another directory or something?

If you are making a lot of changes I would suggest to clone and make changes in the theme itself.

paveli commented 4 years ago

I can't get the queries to run on shadowed components. Can somebody help with that?

As a kind of workaround you can rename graphql query in shadowed component.

paveli commented 4 years ago

I will leave a quick note here that in order to ease theme configuration in the next version it will be moved to gatsby-config.js. Please see v2 branch.