Hi,
I'm currently trying to set up the product details page of my shop, using the Shark theme v1.3.3
I have an embedded iframe on the page that allows a customer to create a custom image, which they add to their cart as a custom attribute along with the selected product and the product variants. I've also set up a custom add to cart button that I'm using instead of the default add to cart provided by the theme.
My issue is that once the image has been customized via the embedded iframe app, and the customer selects their product variants, it seems that the variant data is not being updated correctly. I'm not getting the current variant data. I only get the current variant data once I've done a hard refresh of the page prior to selecting product variants.
Is there any way to correct this behaviour? The ideal behaviour is that once the user selects their product, variants and customizes their image, all current and correct data should be updated in the cart immediately with an update to the cart drawer contents and the counter.
In addition to this, the cart drawer ui content and the cart item counter doesn't update right away, unless you do a hard refresh of the page after adding product to the cart.
I've done some code edits in the product-details.liquid file in order to get to this point, but I'm wondering what additional code I should be adding to fix the custom add to cart behaviour that I'm trying to build.
Snippet of my add to cart handler (sections/product-details.liquid)
window.addEventListener("message", async function (event) {
if (event.data.message === "add-to-cart") {
console.log("Received data from iframe:", event.data.payload);
const { variantId, quantity, customAttributes = {} } = event.data.payload;
// 🔹 Ensure cart is fresh before adding the product
await refreshCartState();
fetch("/cart/add.js", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
items: [
{
id: variantId,
quantity: quantity,
properties: customAttributes,
},
],
}),
})
.then((response) => response.json())
.then((data) => {
console.log("Updated Shopify cart:", data);
waitForCartUpdate(data);
})
.catch((error) => console.error("Error adding to cart:", error));
}
});
