Shopify AJAX API - redirect to cart page instead of current page

[James_Zedd]

I am using the Shopify AJAX API (https://help.shopify.com/en/themes/development/getting-started/using-ajax-api) and trying to get the page to send the user to the cart page after click. By default (I believe) the API keeps you on the same page.

Here is my code: 

<script>
  $('#productAdd').on('click', function(){
    Shopify.addItemFromForm('productForm');
    window.alert = function() {};
  });
</script>

Anyone know how to make this redirect to the cart page after click? Thanks!

[Jason]

If you need to send the customer to the cart, why are you using the AJAX API in the first place? Many themes have a setting that will let you disable AJAX so the default action is to move to the cart page.

[James_Zedd]

The store owner has requested that a second add to cart button be added to all product pages. They want it to function just like the default add to cart button.

[James_Zedd]

Found a solution to this. It's a bit of a different approach, but it's working now and does what it should.

New code: 

<a id="productAdd" 
   onClick="
     let id = {{ product.selected_or_first_available_variant.id }}; 
     Shopify.addItem(id, 1); 
     window.alert = function() {}; 
     setTimeout(function(){ window.location.href = '/cart';},1000); 
     return false"
   href="#" class="btn btn-primary section-cta">{{ section.settings.url_text }}</a>

Quick explanation of some of the code:

• window.alert = function() {}; - this was to eliminate the default alert popup that came with the Shopify AJAX API that told you if the item was added to cart or not
• setTimeout(function(){ window.location.href = '/cart';},1000); - cart redirect with delay. This was added because I wanted the user to be redirected to the cart page after clicking, but it was redirecting before the cart had time to add the product, and thus the cart was showing no new items added unless you refreshed the page.

This is a bit hacky, so I'm open to any suggestions for improvement. Thanks!

[Jason]

The approach would be to either:

1. Standard form post.
   Add a form submit button that doesn't have any JS event bindings on it that force ajax actions. Depending on theme you could also have bindings on the form submit rather than the button. Either way - if there's no JS events triggered the form will just post to the right place with customer landing on cart page. This seems like the most pain free approach.
2. AJAX api.
   Your process shown above is ok, but that timeout is hacky. Better to wait until you get an actual success response before redirecting. Big assumption that the add to cart is a success, or that it's completed in the 1000 timeout. 

[kylewheelock]

im having a similar issue 

this is the button code. i cant seem to get it to work. 

<button class="button btn-cart {% if sold_out %} btn disabled {% endif %}" type="button" data-toggle="tooltip" data-loading-text="{{ 'products.product.loading' | t }}" title="{{ 'products.product.add_to_cart' | t }}" {% if sold_out == false %}onclick="{% if product.variants.first.available %}cart.add('{{  product.variants.first.id  }}'){% else %}window.top.location.href='{{product.url}}'{% endif %};"{% endif %}>

            <span>{% if sold_out == false %}{{ 'products.product.add_to_cart' | t }}{% else %} {{ 'products.product.sold_out' | t }}{% endif %}</span>

          </button>

Im trying to have it add the product and then redirect to checkout vs just placing it into the cart