I am looking to integrate Snipcart checkout in my Next.js application. However, when I try to validate a payment, I encounter an error message:
An error occurred in Snipcart: 'product-crawling-failed'
--- Item 1 ---
[Item ID] 8
[Item Unique ID] 9e63189a-5a3b-4a25-bf57-ceb4574cad45
[Item Name] SEFLESS
[URL] https://cmeditions.fr/books/SEFLESS
[Status] NotFound
[Price in Cart] 15
[Crawled Prices] []
[Details] We have not been able to find the item with id '8' at 'https://cmeditions.fr/books/SEFLESS'. Please ensure that the product is correctly defined.
Below is the Snipcart button code I have implemented:
<div className="colophon">
{product.status === true ? (
<button
className="snipcart-add-item buy-button "
variant="dark"
onMouseEnter={(e) => handleEnter(e)}
onMouseOut={(e) => handleExit(e)}
data-item-id={product.id}
data-item-price={product.price}
data-item-url={router.asPath}
data-item-image={getStrapiMedia(product.grid_pic.url)}
data-item-name={product.name}
data-item-description={product.author}
v-bind="customFields"
>
BUY ME!
</button>
When I click on the product URL mentioned in the error message, it redirects me to the catalog instead of the specific product page. Could this issue be related to a routing problem within Next.js?