CODEWITHSUNDEEP
jqueryshopifycheckoutliquid
Amitabha Ghosh
Amitabha Ghosh

Reputation: 73

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

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.

Upvotes: 1

Views: 14815

Answers (3)

Diogo Gomes
Diogo Gomes

Reputation: 2265

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.

Upvotes: 6

HymnZzy
HymnZzy

Reputation: 2925

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.

Upvotes: 5

drip
drip

Reputation: 12933

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.

Upvotes: 1

Related Questions