I’ve got an issue with the product validation breaking when I integrate storyblok with my app. Pages are generated dynamically using a _.vue file. Has this got something to do with it?
Is there anyway i can fix this, i’ve pretty much finished the project and validating the products could mean restarting the project if it doesn’t work with storyblok as a CMS
Hi there,
The server needs to return the valid snipcart button at the URL provided for validation (data-item-url). In cases where the HTML is generated on the client side, this can cause validation errors because our crawler receives incomplete HTML. This is one of the use case for using our JSON crawler instead: Order validation – Snipcart Documentation
Let me know if this helps,
Cheers!
@dominic how would i implement this in a nuxt project? It would really help if the snipcart docs had example repos we could look at
Hey @Harrison,
We do have this post that might be helpful.
It’s an application built with Nuxt and Strapi, if you use the pre rendering features that Nuxt offers you should be able to make it work with Snipcart pretty easily.
Hey @charles thanks for your response. I’m currenty using storyblok, but because ive got dynamic pages created by using a _.vue file, the URL for the product can’t validate. Are you suggesting i use strapi instead of storyblok?
Hi there,
Your choice of headless CMS should not be an issue in this matter. It is instead a matter of understanding when is your HTML generated (Static/SSR vs client-side). Are you using a framework like Nuxt?
Having a little more information about your stack, if possible a URL to visit and/or a github repo would go a long way to further assist you. 
Hi @dominic,
Yeah i’m using nuxt with storyblok as CMS. Repo is private but can invite you, what’s your email?
Hi @Harrison,
Are you familiar with data fetching with Nuxt? Nuxt - Data Fetching
After visiting your website, it seems like all of your HTML is generated on the client (much like a SPA) instead of using Nuxt server rendering capabilities.
The documentation link above will explain in detail how to do this with Nuxt but you should definitely look into using the asyncData method.
If you have more questions after reading this documentation entry, let me know.
You can invite me to your repository using the geeks@snipcart.com email.
Cheers!
Hi @dominic ,
I do believe i’m using the asyncData method to grab the data from storyblok at the moment. Perhaps it isn’t set up like you’d probably suggest? I’ve invited you to the repo, so should get an invite soon
Cheers!
Hi @Harrison,
After taking a look at the code, I can’t say I fully understand why it is setup like this but when you have dynamic pages (like your _.vue), the Nuxt crawler for SSG needs either to find a <nuxt-link> to those dynamic pages in other to generate them or you need to specify them inside the generate.routes property in nuxt.config.js. More info about this here : Nuxt - The generate Property. Generally, people tend to have an index.vue page, and then a _slug.vue for dynamic ones. That could probably work for your use case.
Fixing this would allow your pages HTML to be generated at build time instead of on the client side. The is important for Snipcart’s HTML crawler since it can then find your snipcart buttons.
That being said, you can also use the JSON crawler like mentioned before and not have to worry about any of that.
Hi @dominic I’ve gone down the approach of using an index.vue page and _slug.vue for dynamic pages. Tried the generate routes property and still get a crawling error.
I’ll be honest, the JSON crawler documents baffle me. I don’t know how to implement it without seeing an example repo
@dominic so i can get the product crawling to work when SSR is ‘true’ in nuxt.config. But it breaks my JS. Any ideas why?
I had exactly this problem with a project a year ago. Make sure that you use async data to fetch all product info otherwise you will get a crawling error. I was using fetch to get the price and had to re-structure and use async data to get it to work. The explanation is that the Snipcart crawler “sees” the page as initially rendered with async data, but without any fetch calls.