skip to Main Content

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.

3

Answers


  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.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
  3. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search