Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Creating Delay for JS Redirect with Add to Cart Button


Momenta1

Question

Hello!

I'm trying to create a javascript function where after a customer adds something to cart, they are sent to the cart. At the moment, they stay on the product page.

I created this javascript, and it works to send the customer to the cart. However, the product doesn't appear in the cart right away. It seems like I need a delay to give Squarespace some time to add the product to the cart. I'm hoping to add a 2 or 3 second delay to allow for this. The button says "Adding..." then "Added!", so I'm not concerned about experience. 

Any help that can be provided would be great!

<script>
$(function() {
  var $button = $('.sqs-add-to-cart-button');
  $button.on('click', function(){
 window.location.href = 'https://www.pamelacardjewelry.com/cart';
  });
});
</script>

 

Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Alright, here's a repost for those that cannot access that particular post:  

Also consider with the current set-up you have at the moment will redirect anyone who presses the add to cart button. This means that if someone clicks the add to cart button and a product is out of s

5 answers to this question

Recommended Posts

  • 1

Alright, here's a repost for those that cannot access that particular post:

Quote

 

The following script, inserted via sitewide footer code injection seems to work for me, in my brief tests:

Option 1: Redirect.


<script>
  // When a product is added to cart, redirect user to /cart page.
  (function() {
    var cartBtns = document.querySelectorAll(".sqs-add-to-cart-button:not(.cart-added)");
    var i;
    for (i = cartBtns.length - 1; i >= 0; i--) {
      new MutationObserver(function(mutations) {
        if (mutations[0].target.classList.contains("cart-added")) {
          window.location.href = "/cart";
        }
      }).observe(cartBtns[i], {
        attributes: true,
        attributeFilter: ["class"]
      });
    }
  })();
</script>

 

Option 2: Prompt.


<script>
  // When a product is added to cart, add a prompt below the button with links to other actions.
  (function() {
    var cartBtns = document.querySelectorAll(".sqs-add-to-cart-button:not(.cart-added)");
    var i;
    for (i = cartBtns.length - 1; i >= 0; i--) {
      new MutationObserver(function(mutations) {
        if (mutations[0].target.classList.contains("cart-added")) {
          var pd = document.getElementById("productDetails");
          var prompt;
          if (pd) {
            prompt = document.createElement("div");
            prompt.innerHTML = "<p>Item added to cart. <a href='/cart'><b>Go to Cart</b></a> or <a href='/order/cmor-map-pak'><b>Add Display Device</b></a>.</p>";
            pd.appendChild(prompt);
          };
          this.disconnect();
        }
      }).observe(cartBtns[i], {
        attributes: true,
        attributeFilter: ["class"]
      });
    }
  })();
</script>

There may be some testing and tweaks necessary for various scenarios, but it’s a good start.

(Side note: This is one of those instances where I have the feeling there are a number of different ways to go about this, elements/data you could watch-/listen-for, etc. This is just one method that focuses on the user interaction with the add-to-cart button.)

Let us know how it goes.

-Brandon

 

 

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to post
  • 0

There’s an Express Checkout option on all stores and when enabled, it will always send customers to the checkout when they add an item to the cart. You can read more here:

https://support.squarespace.com/hc/en-us/articles/206540817-Express-Checkout
 

If you need something slightly different, it can be achieved with JavaScript. As you’ve noted, the ‘Add to Cart’ button’s label changes to ‘added’ when the action has completed. This means it is a useful event to use to redirect the visitor. There are a number of ways to do this. Originally suggested by @brandon, one method is to use a MutationObserver to check when the class ‘.cart-added‘ is added to ’.sqs-add-to-cart-button’, triggering a redirect to the cart.

 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping Squarespace users by building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...