I have a nextjs app with strapi and snipcart.
I have an error on payment processing :
product-crawling-failed
[Details] We have not been able to find item with id ‘selfless’
The logs says :
An attempt to create an order with invalid products has been made. Don’t forget you can’t add/update items attributes in the cart dynamically with javascript as it will cause crawling issues.
I tried with data-item-id added statically and it worked, but not with {product.slug}
here is my code
The developer’s logs gave me this information :
Found 0 snipcart-add-item elements with ids []
but, in the google dev tools I see that :
— Item 1 — [Item ID] infra [Item Unique ID] 903b79d0-8bd9-4331-94e9-9f4f48edd96c [Item Name] Infra- [Url] Infra- [Status] NotFound [Price in cart] 20 [Crawled prices] [] [Details] We have not been able to find item with id ‘infra’ at ‘Infra-’.
I’m totally lost …
const ProductPage = ({ product }) => {
const router = useRouter()
// if (router.isFallback) {
// return <div>Loading product...</div>
// }
return (
<div className="carousel-container m-6 grid grid-cols-1 gap-4 mt-8 items-start">
<Head>
<title>{product.title}</title>
</Head>
<div className="rounded-t-lg pt-2 pb-2 m-auto h-auto">
<EmblaCarousel {...product} />
</div>
<div className="w-full p-5 flex flex-col justify-between">
<div>
<h4 className="mt-1 font-semibold leading-tight truncate text-slate">
<span className="uppercase text-lg font-bold">{product.title}</span>
<br />
{product.author}
</h4>
<LanguageDesc {...product} />
</div>
<div className="flex flex-col md:flex-row">
<div className="mt-4 font-semibold leading-tight truncate text-slate">
<p>{product.year}</p>
<p>Format: {product.size}</p>
<p>Printing: {product.technic}</p>
<p>Paper: {product.medium}</p>
<p>{product.page}</p>
<p>{product.copies} copies</p>
<p>{product.price}€</p>
</div>
{product.status === "published" ? (
<button
className="snipcart-add-item mt-4 ml-16 self-center bg-slate border border-gray-200 d hover:shadow-lg hover:bg-brique focus:outline-none text-white font-semibold leading-none py-2 px-4 w-20 h-20 rounded-full"
data-item-id={product.slug}
data-item-price={product.price}
data-item-url={router.asPath}
data-item-description={product.description}
data-item-image={getStrapiMedia(
product.image.formats.thumbnail.url
)}
data-item-name={product.title}
v-bind="customFields"
>
Add to cart
</button>
) : (
<div className="text-center mr-10 mb-1" v-else>
<div
className="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex"
role="alert"
>
<span className="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">
Coming soon...
</span>
<span className="font-semibold mr-2 text-left flex-auto">
This article is not available yet.
</span>
</div>
</div>
)}
</div>
</div>
</div>
)
}
export async function getStaticPaths() {
const products = await getProducts()
return {
paths: products.map((_product) => {
return {
params: { slug: _product.slug },
}
}),
fallback: false,
}
}
export async function getStaticProps({ params }) {
const product = await getProduct(params.slug)
return { props: { product } }
}
export default ProductPage
