Product Item URL

[Nerea]

Hi,

I am having this issue on the checkout. My URL is : https://snipcart-ecommerce.herokuapp.com.
What should I write on the product button a data -item-url?
data-item-url=“https://snipcart-ecommerce.herokuapp.com/” this is not working. Could someone please help me out ?

Thanks in Advance

[nelitow]

Hi @Nerea, thanks for reaching out!

When you use a SPA we cannot fetch the product data for the validation, as it is not in the page HTML.
In those cases you need to use ou JSON validation.

Order validation

Let me know if you have further questions.

Thanks

[Nerea]

Hi!

Thanks for the info.

Could you please give me more info about it? How should the code look like?

Thanks in advance,

Nerea

[nelitow]

Hi @Nerea.

For that, you should add an API endpoint with the details for each product.
For example, your product button would look like:

<button class="snipcart-add-item"
  data-item-id="starry-night"
  data-item-price="79.99"
  data-item-url="https://products.site.com/api/product/starry-night"
  data-item-name="The Starry Night">
  Add to cart
</button>

And then the URL https://products.site.com/api/product/starry-night should return the product info with the structure described in the documentation in JSON format, like:

{
  "id": "starry-night",
  "price": 79.99,
  "url": "https://products.site.com/api/product/starry-night"
}

[bemas]

Hello @nelitow , could you elaborate how to address custom fields in the JSON crawler? I have a product, that has a couple variants that affect the price, hence I think these variants must be mentioned in the JSON. However, there is no information in the documentation concerning this.

[mycoursechekout87]

@Nerea @nelitow are you available now?
I am also facing the same issue. I have visited your website and I have seen you already figured out this. Could you help me, please? I have used this in webflow.
Here is the preview URL: Webflow - Travisweihermuller

[logix92]

Hello @nelitow and everyone else, just to add to this, I am facing the same issue but have followed the tutorial provided by Snipcart themselves here: Building a Strapi E-Commerce with Nuxt.js [Tutorial]

I am getting the same issue and my product data is coming from strapi API. I am trying to configure a field that lives within the product that will contain the required JSON body.

The issue is I’m not sure whether the strapi API is suitable because it nests JSON responses in data and attribute objects rather than dump out the JSON direct as specified i.e:

Not sure how this would work or how I could process the data-item-url response in Vue to maybe loop through and fetch what is requred?

I’m not sure of going to the effort of setting up a JSON body if Snipcart does indeed required the data-item-url to point directly to the snipcartCrawl field in this case as I’m not sure strapi allows that level of specific field value targetting.

My other question would be would this work because the URL’s of the API and the front-end are different, unless snipcart allows the validation by adding the API URL domain in the dashboard?

Also if you have product variants, is it expected to have a JSON body output for each variant?