App reviews, troubleshooting, and recommendations
Hi,
Im creating an app and i want to show a modal after user clicked the add to cart button, and if he clicks agree on the modal only then i want all the add to cart funcionality to run.
I mean if the user approved then i want the cart drawer to open or what ever cart modal there is, and i want it to work on any shop, doesnt matter which cart drawer it has, and ofcurse i want it to add the product to the cart.
Please help 🙂
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener(
"submit",
async (event) => {
const isAddToCartForm = event.target.action && event.target.action.endsWith("/cart/add");
if (isAddToCartForm) {
event.preventDefault(); // Prevents the default form submission
event.stopPropagation(); // Stops the event from propagating to parent elements
console.log(event.target);
// Confirmation dialog
const userConfirmed = confirm("Are you sure you want to add this item to your cart?");
if (userConfirmed) {
// If the user clicks "OK", manually submit the form or handle the add to cart functionality here.
// You might need to trigger Shopify's AJAX API for adding to cart or submit the form programmatically like:
// event.target.submit();
await fetch("/cart/add", {
method: "post",
body: new FormData(event.target),
});
// document.getElementById("cart-notification").classList.add("active");
document.querySelector('cart-drawer').classList.add('active');
} else {
// If the user clicks "Cancel", just show an alert or handle accordingly.
alert("Item was not added to your cart.");
}
}
},
true
); // Use capturing phase to ensure this runs before Shopify's own scripts
});
I have added this code, it manages to stop the cart action, but when i run the fetch /cart/add it does add the product to the cart but it doesnt live update the quantity or open the drawer
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024The Hydrogen Visual Editor is now available to merchants in Shopify Editions | Summer '...
By JasonH Sep 2, 2024