I’m trying to integrate snipcart with my astro project but im getting a few issues.
1- The #snipcart div was removed from the document. This may happen when a frontend library is used to render the div. You should only render it once, or it might prevent the cart from working.
This appear when i navigate to a different page on my web and after that, the snipcart cart button is broken and i cannot access to the cart until i reload the page.
2- When trying to test the payment i’ve got this error
Defined product prices don’t match prices in cart, or products couldn’t be found at crawled endpoint. Review product IDs, prices, and URLs. [This entry](https://docs.snipcart.com/v3/setup/order-validation) on Order validation might help. See developer console for more details.
**Notices like this one are only shown in Test mode to help you diagnose issues.*
Reason: 'product-crawling-failed'
--- Item 1 ---
[Item ID] test
[Item Unique ID] 572a5237-b7dc-4aff-bd3c-395d8b7ecb8d
[Item Name] Test
[Url] ***
[Status] NotFound
[Price in cart] 19.99
[Crawled prices] []
[Details] We have not been able to find item with id 'test' at '***'. Please make sure the product is correctly defined. We suggest you take a look at this section of our documentation: http://docs.snipcart.com/configuration/product-definition.
this is my main layout (where the script is located)
---
import { ClientRouter } from "astro:transitions";
import "../styles/global.css";
import Header from "@components/shared/Header.svelte";
import NavBar from "@components/shared/NavBar.svelte";
import Footer from "@components/shared/Footer.astro";
const { title } = Astro.props;
const currentPath = Astro.url.pathname;
---
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<link rel="manifest" href="/site.webmanifest" />
<meta name="generator" content={Astro.generator} />
<title>BRC Racing - {title}</title>
<ClientRouter />
</head>
<body
class="min-h-screen flex flex-col selection:bg-brc-purple selection:text-brc-purple-light"
>
<script>
window.SnipcartSettings = {
publicApiKey:
"***",
loadStrategy: "on-user-interaction",
currency: "eur",
addProductBehavior: "none",
modalStyle: "side",
};
(() => {
var c, d;
(d = (c = window.SnipcartSettings).version) != null ||
(c.version = "3.0");
var s, S;
(S = (s = window.SnipcartSettings).timeoutDuration) != null ||
(s.timeoutDuration = 2750);
var l, p;
(p = (l = window.SnipcartSettings).domain) != null ||
(l.domain = "cdn.snipcart.com");
var w, u;
(u = (w = window.SnipcartSettings).protocol) != null ||
(w.protocol = "https");
var f =
window.SnipcartSettings.version.includes("v3.0.0-ci") ||
(window.SnipcartSettings.version != "3.0" &&
window.SnipcartSettings.version.localeCompare(
"3.4.0",
void 0,
{ numeric: !0, sensitivity: "base" },
) === -1),
m = [
"focus",
"mouseover",
"touchmove",
"scroll",
"keydown",
];
window.LoadSnipcart = o;
document.readyState === "loading"
? document.addEventListener("DOMContentLoaded", r)
: r();
function r() {
window.SnipcartSettings.loadStrategy
? window.SnipcartSettings.loadStrategy ===
"on-user-interaction" &&
(m.forEach((t) => document.addEventListener(t, o)),
setTimeout(
o,
window.SnipcartSettings.timeoutDuration,
))
: o();
}
var a = !1;
function o() {
if (a) return;
a = !0;
let t = document.getElementsByTagName("head")[0],
e = document.querySelector("#snipcart"),
i = document.querySelector(
`src[src^="${window.SnipcartSettings.protocol}://${window.SnipcartSettings.domain}"][src$="snipcart.js"]`,
),
n = document.querySelector(
`link[href^="${window.SnipcartSettings.protocol}://${window.SnipcartSettings.domain}"][href$="snipcart.css"]`,
);
(e ||
((e = document.createElement("div")),
(e.id = "snipcart"),
e.setAttribute("hidden", "true"),
document.body.appendChild(e)),
v(e),
i ||
((i = document.createElement("script")),
(i.src = `${window.SnipcartSettings.protocol}://${window.SnipcartSettings.domain}/themes/v${window.SnipcartSettings.version}/default/snipcart.js`),
(i.async = !0),
t.appendChild(i)),
n ||
((n = document.createElement("link")),
(n.rel = "stylesheet"),
(n.type = "text/css"),
(n.href = `${window.SnipcartSettings.protocol}://${window.SnipcartSettings.domain}/themes/v${window.SnipcartSettings.version}/default/snipcart.css`),
t.prepend(n)),
m.forEach((g) => document.removeEventListener(g, o)));
}
function v(t) {
!f ||
((t.dataset.apiKey =
window.SnipcartSettings.publicApiKey),
window.SnipcartSettings.addProductBehavior &&
(t.dataset.configAddProductBehavior =
window.SnipcartSettings.addProductBehavior),
window.SnipcartSettings.modalStyle &&
(t.dataset.configModalStyle =
window.SnipcartSettings.modalStyle),
window.SnipcartSettings.currency &&
(t.dataset.currency =
window.SnipcartSettings.currency),
window.SnipcartSettings.templatesUrl &&
(t.dataset.templatesUrl =
window.SnipcartSettings.templatesUrl));
}
})();
</script>
<header class="px-4">
<Header client:load />
<NavBar {currentPath} client:load />
</header>
<main class="w-auto p-4 flex-1">
<slot />
</main>
<Footer />
</body>
</html>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
</style>
And this is my astro page where the products will be
---
import Layout from "@layouts/Layout.astro";
import Jesus from "@assets/nosotros/jesus.avif";
// import "@styles/snipcartOverrides.css";
---
<Layout title="Tienda">
<button
class="snipcart-add-item"
data-item-id="test"
data-item-price="19.99"
data-item-description="High-quality replica of The Starry Night by the Dutch post-impressionist painter Vincent van Gogh."
data-item-image={`${Jesus.src}`}
data-item-name="Test"
data-item-has-taxes-included="true"
data-item-url="/tienda/"
>
Agregar al carrito
</button>
<button class="snipcart-checkout">Ir al carrito</button>
</Layout>
Thanks!