Skip Add to Cart process and direct redirect to Checkout Page from Product Detail Page clicking a button, in Shopify

Question

I am developing a project in Shopify with Brooklyn Theme for a client. Our client has only three products to show with 4 variants for each product. As per the requirement, we don't have to redirect on Cart page just have to redirect to the Checkout Page on clicking a button on the product page after adding the variant.

For this, I have googled to find the right solution but couldn't have a right solution for that. So I coded the process in jquery and it is working. But the process which I did is a nasty way and I want some clean process . I know there is an app but my client does not intend to purchase any app for it.

What I scripted is:

In the product-template.liquid the file I have commented out the Add to Cart button and instead, I added a button.

<button  name="checkoutty" class="btn to">Checkout</button>

And a script in that liquid template:

$(function() {
$(window).on('load',function(){
  $.ajax({
      type: "POST",
      url: '/cart/clear.js',
      success: function(){
        //alert('I cleared the cart!');
       },
      dataType: 'json'
    });

  })
});

 $(document).ready(function(){
$('.single-option-selector__radio').click(function(){
    if($(this).is(':checked')){
        $('.product-single__add-to-cart button[type="submit"]').removeClass('disabled').attr('disabled','');
           $('button[type="submit"]').attr('disabled','');

         }
               });
    $('.to').click(function(){
         $('[action="/cart/add"]').trigger('submit')
    });
 });

And in the cart.liquid template

<script>
  $(window).load(function(){
 $('.cart__checkout').trigger('click');

  });
</script>

Though it is working I am not happy with this as it is redirecting to the cart page and then to checkout page as I have forced the cart add form to submit and then Checkout btn click event on the cart liquid page`.

On the Cart Page I may have additional preloader to hide the content. So all these are the nasty process. Can anyone please guide me for any simpler and clean process.

Thanks in advance.

score 6 · Answer 1 · answered Nov 16 '18 at 14:02

You can also redirect the customer to /cart/checkout after adding the variant to the cart.

Example:

$('.add-btn').on('click', function(e) {
    var form = $('#addToCart');
    e.preventDefault()

    $.ajax({
        type: 'POST',                             
        url: '/cart/add.js',
        dataType: 'json',                               
        data: form.serialize(),
        contentType: false,
        processData: false,
        success: function(data) {
            document.location.href = '/cart/checkout';
        }
    });
})

With this you don't need to change html or adding hidden input elements.

A click on hidden input elements might not work on all mobile/browsers.

It works on my test store. But I am not sure if it works in other stores. Is it an official guide or a hack? — Benny Chan, Sep 03 '21 at 11:21

score 5 · Answer 2 · answered Jul 14 '17 at 11:59

If you are able to identify the selected variant URL, you can skip every other function and directly land on the checkout page using the following URL structure -

https://<your_shop_link>/cart/<variant_id>:<variant_quantity>?checkout

Just redirect your customer to the above structured URL and you'll be done.

score 1 · Answer 3 · answered Jul 13 '17 at 12:10

1

Yep it can be done a lot easier.

HTML:

<form action="/cart" method="post" id="addToCart">
    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />
    <input type="submit" value="GO" name="checkout" style="display: none;"  />
    <a href="#" class="add-btn">Add Product</a>
</form>

jQuery:

<script type="text/javascript">
    $('.add-btn').on('click', function(e) {
        var form = $('#addToCart');
        e.preventDefault()

        $.ajax({
            type: 'POST',                             
            url: '/cart/add.js',
            dataType: 'json',                               
            data: form.serialize(),
            success: function(data) {
                form.find('input[name="checkout"]').trigger('click');
            }
        });
    })
</script>

We add the product with AJAX and on success we trigger a click on the checkout button. All of this is done on the product page.

That's all you need, no redirections or complicated logic.

answered Jul 13 '17 at 12:10

drip

12,378
2
30
49

Thanks @drip. I think it will work. I will write here soon. – Amitabha Ghosh Jul 14 '17 at 05:50
I tried your code. It is redirecting but what I see , I have three variants. The first variant is working fine, but after selecting the next two variant each, the cart is not updating with the current variant id. I don't know , though the value is {{ product.selected_or_first_available_variant.id }}. Still it is taking the previous variant id. You can have a check https://slime-box-subscription.myshopify.com/products/monthly-plan. Frontend password is : tricla . Thanks in advance. – Amitabha Ghosh Jul 14 '17 at 06:34
1

You will have to update the logic for more than one variant and use a select with all the different options. The provided HTML was just a basic example of a single variant that you can build on top, because if you can't write a select with all the variants, then this no longer helping a coder in need but providing a free service to a customer, which is not OK. – drip Jul 14 '17 at 08:42

Skip Add to Cart process and direct redirect to Checkout Page from Product Detail Page clicking a button, in Shopify

3 Answers3