Search code examples
shopifyshopify-template

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>

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 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);
    
    }());