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

Creating Delay for JS Redirect with Add to Cart Button

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>

 

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 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.

 


If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

Share this post


Link to post
  • 0

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.


If you see an answer that was helpful please consider hitting the 121238226_Screenshot2019-11-02at14_53_39.png.0416997a5e856e0159fa1edbd624659e.png button on the right. 

Need help with your website or online store? Feel free to get in touch.

thompsonweb.design

Share this post


Link to post
  • 0

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)

Share this post


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...