Redirect to checkout on customer register on Shopify

Question

I would like to redirect the customer to the checkout page upon creating an account in a shopify site.

Shopify gives this method for re-directing on customer login:

{% form 'customer_login' %}
 <input type="hidden" name="checkout_url" value="/checkout"/>

But applying the same method to customer registration, the form redirects to checkout on success, but it ignores error checking:

  {% form 'create_customer' %}
 <input type="hidden" name="return_to" value="/checkout" />

This method of using an HTML form rather than the liquid form redirects to checkout but the customer isn't logged in, which defeats the purpose of creating the account before checkout:

 <form method='post' action='/checkout' id='create_customer' accept-charset='UTF-8'>
 <input name='form_type' type='hidden' value='create_customer'/>   
 <input name="utf8" type="hidden" value="✓">

Any ideas to redirect after error checking? Thanks!

Answer 1

I found a solution that works using AJAX to send the create customer request to Shopify and then redirect the user to checkout on success. If there are errors they show on the form rather than automatically redirecting like the previously suggested solution.

HTML:

{% form 'create_customer' %}

<div class ="errors"> </div>
<input type="text" value="" placeholder="First Name" name="customer[first_name]" id="first_name"/>
<input type="text" value="" placeholder="Last Name" name="customer[last_name]" id="last_name"/>
 <input type="email" value="" placeholder="Email" name="customer[email]" id="email" />
 <input type="password" value="" placeholder="Password" name="customer[password]" id="password" />
 <input class="btn" type="submit" value="Create"/>

 {% endform %}

JQuery:

jQuery(function() {
jQuery('#create_customer').submit(function(event) {
  event.preventDefault();
  var data = jQuery(this).serialize();

 //create new account
  jQuery.post('/account', data)
    .done(function(data){
    var logErrors = jQuery(data).find('.errors').text();

    //if there are errors show them in the html form
    if (logErrors != "" && logErrors != 'undefined'){
        jQuery('#create_customer .errors').html(logErrors);
        jQuery('#create_customer .errors').show();

    //if account creation is successful show checkout page
    }else{
       console.log('success');
      document.location.href = '/checkout';
    }
    }).fail(function(){console.log('error');});
   return false;
}); 
});

Answer 2

The code below stores the checkout_url in the users browser and then redirects the user to that page after they complete the registration process. I've used this solution in all 5 shopify stores I own.

Step 1: Paste this code at the bottom of the login.liquid file.

 <script>
 var Test = __st;
 localStorage.setItem('Test', JSON.stringify(Test));
 </script>

Step 2: Paste this code at the top of your index.liquid file (or whichever file your users are currently getting redirected to)

<script>
var retrievedObject = localStorage.getItem('Test'); 
var domain = '';
var theUrl = JSON.parse(retrievedObject)["pageurl"];
var url_dec = decodeURIComponent(theUrl);

if (document.referrer.includes('challenge')) {

if (url_dec.includes("checkout_url")) {

if (url_dec.includes(".myshopify.com")) { 

redirectURL = domain.concat((window.location['host']), "/account/login?checkout_url=https://", Shopify.shop, "/",);                                           
                  
                          }  
                          else
                          {                 
        
                          redirectURL = domain.concat((window.location['host']), "/account/login?checkout_url=https://", (window.location['host']), "/",);



}

 
var newCheckout = url_dec.replace(redirectURL, '');  

    
window.location.replace(newCheckout);
      
localStorage.removeItem("Test"); 

};

}
</script>