Creating Delay for JS Redirect with Add to Cart Button

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>

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.

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 stock that they will still be redirected to the cart page.

Related: https://forum.squarespace.com/topic/4513-send-users-to-cart-view-after-adding-item-to-cart/

@brandon I'm getting an error "access not allowed" for that link, try again?

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