Hi guys,
Is there a way to make the “add to cart” button display “item added” (something along those lines) once the item is in the user’s cart? Or creating some kind of subtle notification for them?
My users seem to get confused and keep pressing “add to cart” because there’s no notification or pop up. I had to disable the entire cart opening each time because that was a bigger issue for them.
Any tips are appreciated 
Does anyone know a solution for this?
Is it possible to create a popup or notification of some sort to let the customer know the item has been added?
Hey James and OP!
Easiest way to do this is through a bit of JavaScript. If you select the button, then having the button text change on click (and you could even set it to switch back after a couple seconds), you should get the desired effect.
I don’t believe there is a native way to do this in Webflow though (without code I mean). If you could share your read-only link, I could assist more.
James,
Below I have pasted some example JavaScript that would accomplish what you are wanting to do. All you have to do is change the class name for the Add to Cart button to match the actual button in your Webflow site. I even made it so that you can just change the text you want it to change to, and then the text you want it to revert back to, as well as a interval that you want it to use before it changes back.
let addToCartBtn = document.querySelector(".add-to-cart");
let opt = {
initialText: "Add to Cart",
textOnClick: "Item Added",
interval: 1000,
};
let setAddToCartText = () => {
addToCartBtn.innerHTML = opt.textOnClick;
let reinit = () => {
addToCartBtn.innerHTML = opt.initialText;
};
setTimeout(reinit, opt.interval);
};
addToCartBtn.addEventListener("click", setAddToCartText);
Let me know if you need any help implementing!
Thanks Tyler, this is extremely helpful!
I will have a go at implementing this.
question:
Do you know whether it’s possible to animate the actual cart in the navbar when an item is added? Or produce a small popup underneath the cart to show an item has been added perhaps?
I don’t want to automatically open the cart each Time somethings added to basket but I do want to show something to indicate to the customer that it’s been added.
See example
Hmmm… possibly. I am pretty new to the eCommerce functions of Webflow. Assuming it functions similar to a normal collection list, though, you should be able to accomplish something similar.
In addition to each product card in the list, you would want to go ahead and create the notification as a child of the collection list item. Style it with a fixed position so it appears in the top right of the screen, then make it hidden. From there, you can create an animation that, makes it appear when the add to cart button is clicked. Since the popup is a child of the collection list item, you should be able to pull the item photo, name, etc from the CMS dynamically.
The only part I’m not sure how to do would be to get the current value of the cart once the item is added. Maybe someone else can chime in on that.
Hey Tyler, finally getting around to finishing my website.
If you scroll down you’ll see a ‘Winter Wines’ product CMS with a slider.
I’ve tried your solution but because of the ‘wrap’ I can’t move the ‘notification’ out of the ‘mask’ of the slider because it’s set to display none.
Do you have any idea how I could get this to work? Ideally I’d want a notification to slide out somewhere up top near the cart button (top right).
Could you possibly help?
Happy to buy you a coffee / beer for your time!
J
