Add to Cart Redirect (Almost Working)

Hello everyone! I’m building a client site so that when a customer adds an object to their cart, they’re immediately redirected to another page (think checkout page) but in my case, I’m bringing them to a bottle-selection page that’s linked through CMS based on the product.

I’m extremely close to achieving the result that I’m hoping for. In-fact, it’s been accomplished before HERE, which I’m currently using as the basis for my code.

For those who don’t wish to visit the link, here is the code:

     function addToCartAndBottles() {
     var buyNow = document.getElementById('buy-now');
     buyNow.addEventListener("click", addToCartAndBottles);

Here’s my problem. There are currently 3 products on the page (linked through CMS), with each add-to-cart button having an id of “add-to-cart” and the Buy Now button with an id of “buy-now”. When the page is published, the first product works - it adds the product to your cart and redirects to the page - but none of the remaining 2.

My own digging has led me to believe that this is happening because the code uses ID’s, instead of classes. REFERENCE . I’ve tried adding classes to my elements and altering the code, but I cannot get it to work. Here’s my attempt at changing to classes, but it stops working all together.

     function addToCartAndBottles() {
     var buyNow = document.getElementsByClassName('buy-now');
     buyNow.addEventListener("click", addToCartAndBottles);

If anyone has any ideas, you have no idea how much I’d appreciate it! Client project due this week, and it’s the last piece of the puzzle for me haha.


Bumping this post. I feel like solving this solution could be really helpful for a lot of other users! Anything?

You want to add 3 bottles at one time right ?

You’d need to the action of add to cart click to happen for each of the items. Using something like this maybe : ?

Here’s something in the same spirit — where one button would empty all cart items :


Thanks a lot for your response! I might not have explained my goal properly. I’m not trying to add all 3 bottles at once, but rather, when the button is clicked, it adds whatever product you selected to the cart, and redirects you to the respective CMS-page for that product. It currently works for one of the pages, but not for the remaining 2 items in the collection.

Here’s a video explaining what I’m trying to accomplish:

What else can I provide to have this post replied to? Client project is due tomorrow night and I’d really appreciate it if someone could help me fix this code! thanks!

ID’s must be unique on a page. When you have more than one element you wish to target you should be using a class.

Hey Webdev,

Thanks for your reply. I was able to come to the same conclusion, but I wasn’t sure how to execute the code for use of classes.

Hey @Hunter_Reynolds, how did it go with your project? I hope you were able to deliver on time!

I am looking to do exactly that and having trouble. Did you come up with a possible solution?

Thanks for your help.

Sorry for not seeing this Sebastian! I ended up creating seperate ID’s for the 3 sections. Here’s my code:

I also realized that using this method was not the best workflow considering I previously nested the products inside of the “VIP Sections” CMS collections (there were nine on each page, with 3 experience options for each one, resulting in 27 product ID’s). To fix this solution, I changed the structure to include a VIP Section booking option, which will add the product to your cart for the designated time slot then redirect you to the generic experiences page. That way I would only need 3 ID tags.

This is great, glad to see it all worked out. Thanks a lot for sharing!