E-Commerce WooCommerce conceptionally with Gatsby

[bch80]

Hello,

it all sounds amazing but I've still got some questions, despite the tutorials / guides that I find online.

I'm using WooCommerce + WordPress as a backend and would like to use gatsby as a frontend.
Am I correct with those assumptions:

• I can use Gatsby to generate static HTML of my blog / content pages
• I'll need to have / develop a theme for gatsby, independent of my WP theme
• If a product receives a data update (price change, customer review, ...) I'd have to generate the HTML and upload it again to my server

And a general question:
Is it possible to use Gatsby for parts of the website (blog, content page) and not for other parts (checkout)?

If yes, how to do that?
Have WooCommerce + Gatsby running side by side (Gatsby as in the generated HTML files) and depending on which URL has been requested by the browser, either HTML or the WP index.php is being processed.

In terms of SSL, Cookie Consent, PHP Sessions, Logged in users / wholesale roles:
Will that be somewhat "easier" to use both systems or would it be best to have 100% Gatsby in front of WooCommerce?

Thanks,
Chris

[ardiewen]

I can use Gatsby to generate static HTML of my blog / content pages

Yes, and I would include product pages. I personally do something like this:

• All static product data is generated with Gatsby at build time (product names, descriptions, images, etc)
• All dynamic product data is fetched at run time via Apollo Client (product prices, stock status, etc)

I'll need to have / develop a theme for gatsby, independent of my WP theme

Correct. You're essentially building a decoupled front end from wordpress. Your WP theme is still useful however, as it can be used to dictate the CMS experience for your shop managers.

If a product receives a data update (price change, customer review, ...) I'd have to generate the HTML and upload it again to my server

Yes and no. You will first have to make a choice as to whether or not you want to fetch this particular data at build time or on run time.

Prices should always be fetched at run time.

If you are high volume store that gets a lot of reviews, it may be worth refetching reviews at run time. Most stores however, will be fine fetching and updating reviews at build time.

If you host on Gatsby Cloud or Netlify, You can also have a new review trigger an incremental build so it's only ever a few minutes behind real-time.

Is it possible to use Gatsby for parts of the website (blog, content page) and not for other parts (checkout)?

Yes, you can do something similar to Shopify's hosted checkout where you have all of your product data on one site, and redirect the user to another site for the checkout portion.

It's not necessary, however, as you can also integrate the full cart and checkout process into your Gatsby site.

If yes, how to do that?

@jacobarriola has written a post about it here. Note: Understanding this will require some pre-reading on wp-graphql and wp-graphql-woocommerce.

Have WooCommerce + Gatsby running side by side (Gatsby as in the generated HTML files) and depending on which URL has been requested by the browser, either HTML or the WP index.php is being processed.

It's an option, though I would argue that the MOST common option is to have a fully decouple front end and backend.

• User only ever sees your gatsby front end, including cart, checkout, and account management pages
• Gatsby front end communicates with a headless wordpress backend via gatsby-source-wordpress at build time to construct pages
• Gatsby front end communicates with headless wordpress backend via Apollo Client or similar at run time to perform real-time queries and mutations (get price, get stock status, add to cart, checkout, login, etc)

In terms of SSL, Cookie Consent, PHP Sessions, Logged in users / wholesale roles:
Will that be somewhat "easier" to use both systems or would it be best to have 100% Gatsby in front of WooCommerce?

Additional plugins like wp-graphql-cors make this relatively trivial.

Hope that helps, and feel free to join the wp-graphql community on slack for more information.