Newly Registered User are Redirected in Shopify
I have a problem with my Shopify customer registration process that I just can’t work out, I hope someone here could shed some light on the issue.
When customers successfully register on our Shopify site they are redirected to the root / home page, which for a while was exactly what our client wanted. The client now wants newly registered users to be taken to the Account page on successful registration.
From what I have read the default behaviour is for the user to be redirected to Account page but, for some reason this isn’t happening for us.
Looking at the headers it seems as though the user is sent to the Account page and then immediately 302'd to the root. Given that this isn’t the default behaviour I wonder has this been customised and if so where?
I can’t find anything in our theme, code, js that does this.
I'm totally confused.
[Edit] The registration form in shopify
{% form 'create_customer' %}
{{ form.errors | default_errors }}
<div class="input-wrapper">
<label for="FirstName" class="label-hidden">
{{ 'customer.register.first_name' | t }}
</label>
<input type="text"
name="customer[first_name]"
id="FirstName"
placeholder="{{ 'customer.register.first_name' | t }}"
autofocus
{% if form.first_name %}value="{{ form.first_name }}"{% endif %}>
</div>
<div class="input-wrapper">
<label for="LastName" class="label-hidden">
{{ 'customer.register.last_name' | t }}
</label>
<input type="text"
name="customer[last_name]"
id="LastName"
placeholder="{{ 'customer.register.last_name' | t }}"
{% if form.last_name %}value="{{ form.last_name }}"{% endif %}>
</div>
<div class="input-wrapper">
<label for="Email" class="label-hidden">
{{ 'customer.register.email' | t }}
</label>
<input type="email"
name="customer[email]"
id="Email"
class="{% if form.errors contains 'email' %}input-error{% endif %}"
placeholder="{{ 'customer.register.email' | t }}"
value="{% if form.email %}{{ form.email }}{% endif %}"
spellcheck="false"
autocomplete="off"
autocapitalize="off">
</div>
<div class="input-wrapper">
<label for="CreatePassword" class="label-hidden">
{{ 'customer.register.password' | t }}
</label>
<input type="password"
name="customer[password]"
id="CreatePassword"
class="{% if form.errors contains 'password' %}input-error{% endif %}"
placeholder="{{ 'customer.register.password' | t }}">
</div>
<div class="input-wrapper">
<label for="PrivacyPolicy" class="label-hidden">
<input type="checkbox"
name="customer[note][Privacy Policy]"
id="PrivacyPolicy"
value="Accepted on {{ "now" | date: "%Y-%m-%d" }}" />
I have read, understood and agree to the <a href="/pages/privacy-policy" target="_blank">Privacy Policy</a>.
</label>
</div>
<div class="input-wrapper">
<button disabled type="submit" class="button--primary" id="create_customer__submit">{{ 'customer.register.submit' | t }}</button>
</div>
<a href="{{ shop.url }}">{{ 'customer.register.cancel' | t }}</a>
{% endform %}
I have seen that adding the following has been suggested as a possible fix, but it didn't make any difference in my case.
<input type="hidden" name="checkout_url" value="/account">
I can see through inspector that the form is being posted to "/account" and then redirected (302) to "/"
The form above renders to
<form method="post" action="/account" id="create_customer" accept-charset="UTF-8">
<input type="hidden" name="form_type" value="create_customer" />
....
....
<div class="input-wrapper">
<button disabled type="submit" class="button--primary" id="create_customer__submit">Create</button>
</div>
</form>
Answer
Solution:
You can post the form with Ajax and then on success redirect to the account page.
Example given below:
$('form#create_customer').on('submit', function(event){
//debugger;
event.preventDefault();
var postUrl = $(this).attr('action');
var postData = $(this).serialize();
//console.log(postData); check what your form posts
$.ajax({
type: "POST",
url: postUrl,
data: postData,
dataType: "json",
success: function(data) {
console.log('Account created')
//redirect to somewhere
window.location.replace("/some-url");
},
error: function() {
console.log('error handling here');
}
});
});
Answer
Solution:
I ended up handling the form submission with jquery. I'd seen some examples and of this on the Shopify site, notably this one https://ecommerce.shopify.com/c/ecommerce-design/t/redirect-after-customer-registration-370825 (https://ecommerce.shopify.com/c/ecommerce-design/t/redirect-after-customer-registration-370825) and hacked around with it a bit. I put the following at the bottom of the register account page and it works a treat.
Async wasn't an option for me but may well be the answer for some folks.
(function() {
'use strict';
function handleSumission(event) {
event.preventDefault();
var data = $(this).serialize();
$.post('/account', data)
.done(function(data) {
var errorsLog = $(data).find('.errors').text();
// Show any errors that there may be
if(errorsLog != "" && errorsLog != 'undefined') {
// Do error handling here
} else {
window.location.href = '/account';
}
})
.fail(function() {
// Tidy up if it fails
});
}
function init() {
$('#create_customer').on('submit', handleSumission);
}
window.addEventListener('load', init);
}());
Answer
Solution:
This is what I'm using for redirecting users after registration (with or without captcha verification):
window.addEventListener("load", function (event) {
var redirectInput = document.createElement('input'),
registerSubmit = document.querySelector('#create_customer input[type="submit"]'),
registerForm = document.querySelector('#create_customer'),
captchaSubmit = document.querySelector('.shopify-challenge__container input[type="submit"]'),
captchaForm = document.querySelector('#g-recaptcha');
redirectInput.setAttribute('type', 'hidden');
redirectInput.setAttribute('name', 'return_to');
redirectInput.setAttribute('value', '/account'); //URL to redirect
if (registerForm.length) {
registerSubmit.insertAdjacentElement("beforebegin", redirectInput)
} else if (captchaForm.length) {
captchaSubmit.insertAdjacentElement("beforebegin", redirectInput)
}
});
Source
Didn't find the answer?
Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.