I'm building a Vue app and I'm using Snipcart for the shop and I'm facing a problem with shipping.
The site is also built with headless CMS, Prismic. All the product item data is fetched from Prismic and passed via a serverless function to Snipcar's JSON crawler. It has to be done this way to work with Snipcart's order validation.
This has all worked smoothly until adding dynamic shipping costs based on product weight. Previously without the weight attributed added to the item button, testing the transactions worked fine. Now with it added I'm facing an error in the checkout.
My Snipcart button is as follows:
<button
class="snipcart-add-item p-0"
:data-item-id="id"
:data-item-price="price"
data-item-url="https://my-url.com/.netlify/functions/prismic"
:data-item-weight="weight"
:data-item-description="basketDescription"
:data-item-name="name"
:data-item-image="image"
data-item-custom1-name="Format"
data-item-custom1-type="readonly"
:data-item-custom1-value="format"
:data-item-quantity="quantity"
><div class="cart-button">Add to Cart</div>
</button>
My JSON output looks like this:
[
{
"name":"To Her Simplicity",
"id":"YSTQBxAAACAAYkxx",
"price":3,
"url":"https://my-url.com/.netlify/functions/prismic",
"stock":7,
"weight":12
},
{
"name":"These Strangers",
"id":"YR0TkhAAACAAQP_B",
"price":3,
"url":"https://my-url.com/.netlify/functions/prismic",
"stock":6,
"weight":12
}
]
And its returning 'Product crawling error' with the console giving a status on the error of 'InvalidDimensions'
As you can see the weight is included in the JSON and it corresponds to the same value present in the data binded to the button.
Could it be that I'm not labelling it correctly in the JSON file? I really have no idea...
Any help is appreciated!