Switching from Prismic: Using Webhooks to Connect Shopify to Sanity
6 replies
Last updated: Dec 5, 2021
R
Hey Everyone! I recently switched from Prismic to Sanity as my main CMS going forward and I am loving it so far!:)
As a Vue/Nuxt developer I am having a hard time wrapping my head around using web-hooks to connect Shopify to Sanity. Currently my ecommerce sites are split into two parts: Sanity for content and Shopify for ecommerce - an example would be that the landing-page, editorial/blog pages, and internal pages are controlled by Sanity while the collection pages, product pages, and cart/shop component(s) are controlled through the Shopify via the Shopify Graphql API. It does work very well, clients are happy, websites look great, but ideally it would be excellent to have products connected to Sanity for rich-content.
I know that Hull has been a major success (which is awesome by the way!
😁), but around half of the newer ecommerce sites I have seen use Vue/Nuxt (Vue devtools Chrome extension indicates this). I have seen some templates on Github by independent developers trying to achieve something similar to Hull by setting up web-hooks or complicated functions to connect Shopify to Sanity within Nuxt, but the projects are normally not fully developed.
I was wondering if there are any resources that I can learn more about setting up Sanity and Shopify with webhooks? Perhaps we can get a blog post from the Sanity team all about web-hooks and successfully fetch data? I am what you would call a "noob" when it comes to working with webhooks lol! Any advice or direction to go in would be really helpful.
As a Vue/Nuxt developer I am having a hard time wrapping my head around using web-hooks to connect Shopify to Sanity. Currently my ecommerce sites are split into two parts: Sanity for content and Shopify for ecommerce - an example would be that the landing-page, editorial/blog pages, and internal pages are controlled by Sanity while the collection pages, product pages, and cart/shop component(s) are controlled through the Shopify via the Shopify Graphql API. It does work very well, clients are happy, websites look great, but ideally it would be excellent to have products connected to Sanity for rich-content.
I know that Hull has been a major success (which is awesome by the way!
😁), but around half of the newer ecommerce sites I have seen use Vue/Nuxt (Vue devtools Chrome extension indicates this). I have seen some templates on Github by independent developers trying to achieve something similar to Hull by setting up web-hooks or complicated functions to connect Shopify to Sanity within Nuxt, but the projects are normally not fully developed.
I was wondering if there are any resources that I can learn more about setting up Sanity and Shopify with webhooks? Perhaps we can get a blog post from the Sanity team all about web-hooks and successfully fetch data? I am what you would call a "noob" when it comes to working with webhooks lol! Any advice or direction to go in would be really helpful.
Edit: I saw the Sanity Connect App that was recently released.. That is only compatible with Hydrogen so far or no? (edited)
Dec 4, 2021, 6:38 AM
T
Sanity-connect is a Shopify app for syncing products to your Sanity studio. It’s not tied to Hydrogen, you can use any frontend frameworks. But you’ll probably need to hook up your own cart/checkout logic with either the shopify-buy SDK or directly with the Shopify storefront api (GraphQL).
Dec 4, 2021, 9:00 AM
R
Hey
Okay great then I might try that out and see how it goes! The only thing I am wondering if Sanity-connect imports the product IDs used within the cart logic/Shopify checkout? Currently my cart adds the selected product's ID, price, image, etc.
Example:
I am just wondering if I could use the sanity-connect data instead of the shopify data and only use the shopify api for checkout purposes similar to Hull?
user T
! Thanks for getting back to me.Okay great then I might try that out and see how it goes! The only thing I am wondering if Sanity-connect imports the product IDs used within the cart logic/Shopify checkout? Currently my cart adds the selected product's ID, price, image, etc.
Example:
async addToCart() {
const variant = this.currentVariant
const payload = {
qty: this.quantity,
productTitle: this.product.title,
variantTitle: variant.title,
variantId: variant.id,
price: variant.price.amount,
image: variant.image
}
await this.$store.dispatch('addToCart', payload)
}Dec 4, 2021, 8:27 PM
T
Yeah, this what I’m doing. In my case I’m using the buy sdk
Dec 4, 2021, 9:11 PM
T
This is the data you get from the sync https://github.com/sanity-io/sanity-shopify-studio/blob/main/schemas/objects/shopifyProduct.ts
Dec 4, 2021, 9:14 PM
R
Oh very cool. I will have to just try this out and see how to works. Are you using Vue/Nuxt?
Dec 5, 2021, 12:18 AM
T
I’m using Next, but the setup should be pretty similar with Nuxt
Dec 5, 2021, 9:29 AM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.