create_customer from issues

lorider
New Member
1 0 0

Hello all,

I am relatively new to Shopify development and I'm a little hung up. The default customer registration process does not meet my needs so I am building a create_customer from in a section that I can use in a few places around my site. I copied the code from the customers/register.liquid to use as a starting point (full code for the section is at the bottom of the post). The first issue I encountered is when there was an error in the form I was directed to the default customer register page. I solved this issue by using the return_to attribute and setting to the page the form is on. This works exactly how I want it to. However,  this is where the first of my two issues are.

When the form is successfully submitted I want to direct users to a thank you page. To accomplish this, I am using the code below. But unfortunately I am just left at the page the form is on. This code is not being triggered at all. I don't get any entry in the console after the form is submitted. I also turned off captcha and that didn't make a difference.

 

 

{%- if form.posted_successfully? -%}
    <script>
      console.log("check if submitted");
      window.location.replace = '/pages/account-created';
    </script>
    {% comment %} This Code if for error handeling {% endcomment %}
    {%- elsif form.errors -%}
      <h2 class="form__message" tabindex="-1" autofocus>
        <svg aria-hidden="true" focusable="false" role="presentation">
          <use href="#icon-error" />
        </svg>
        {{ 'templates.contact.form.error_heading' | t }}
      </h2>
      <ul>
        {%- for field in form.errors -%}
          <li>
            {%- if field == 'form' -%}
              {{ form.errors.messages[field] }}
            {%- else -%}
              <a href="#RegisterForm-{{ field }}">
                {{ form.errors.translated_fields[field] | capitalize }}
                {{ form.errors.messages[field] }}
              </a>
            {%- endif -%}
          </li>
        {%- endfor -%}
      </ul>
    {%- endif -%}

 

 

 

My second issue is with the password confirmation. I have a javascript that does get executed when the passwords don't match because i do get the "alert" but once I click past the alert, the form is submitted. It would appear that none of the commands I can find in other threads are working.

 

Any and all help is much appreciated, I have been googling for two days trying to sort this out. Outside of what I have shown here I have only added jquery to the Dawn theme so there shouldn't be anything stepping on this. Please let me know if you need any more information.

 

Section Code:

 

{{ 'customer.css' | asset_url | stylesheet_tag }}
<div class="customer register">

  <svg style="display: none">
    <symbol id="icon-error" viewBox="0 0 13 13">
      <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
      <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
      <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
      <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
    </symbol>
  </svg>

  {% comment %} Title shown above Form{% endcomment %}
  <h1>
    Create A Membership Account
  </h1>
  {%- form 'create_customer', return_to: '/pages/member-sign-up', novalidate: 'novalidate' -%}


    {%- if form.posted_successfully? -%}
    <script>
      console.log("check if submitted");
      window.location.replace = '/pages/account-created';
    </script>
    {% comment %} This Code if for error handeling {% endcomment %}
    {%- elsif form.errors -%}
      <h2 class="form__message" tabindex="-1" autofocus>
        <svg aria-hidden="true" focusable="false" role="presentation">
          <use href="#icon-error" />
        </svg>
        {{ 'templates.contact.form.error_heading' | t }}
      </h2>
      <ul>
        {%- for field in form.errors -%}
          <li>
            {%- if field == 'form' -%}
              {{ form.errors.messages[field] }}
            {%- else -%}
              <a href="#RegisterForm-{{ field }}">
                {{ form.errors.translated_fields[field] | capitalize }}
                {{ form.errors.messages[field] }}
              </a>
            {%- endif -%}
          </li>
        {%- endfor -%}
      </ul>
    {%- endif -%}


    {% comment %} First Name Field{% endcomment %}
    <div class="field">
      <input
        type="text"
        name="customer[first_name]"
        id="RegisterForm-FirstName"
        {% if form.first_name %}value="{{ form.first_name }}"{% endif %}
        autocomplete="given-name"
        placeholder="{{ 'customer.register.first_name' | t }}"
      >
      <label for="RegisterForm-FirstName">
        {{ 'customer.register.first_name' | t }}
      </label>
    </div>
    {% comment %} Last Name Field{% endcomment %}
    <div class="field">
      <input
        type="text"
        name="customer[last_name]"
        id="RegisterForm-LastName"
        {% if form.last_name %}value="{{ form.last_name }}"{% endif %}
        autocomplete="family-name"
        placeholder="{{ 'customer.register.last_name' | t }}"
      >
      <label for="RegisterForm-LastName">
        {{ 'customer.register.last_name' | t }}
      </label>
    </div>
    {% comment %} Email Field{% endcomment %}
    <div class="field">
      <input
        type="email"
        name="customer[email]"
        id="RegisterForm-email"
        {% if form.email %} value="{{ form.email }}"{% endif %}
        spellcheck="false"
        autocapitalize="off"
        autocomplete="email"
        aria-required="true"
        {% if form.errors contains 'email' %}
          aria-invalid="true"
          aria-describedby="RegisterForm-email-error"
        {% endif %}
        placeholder="{{ 'customer.register.email' | t }}"
      >
      <label for="RegisterForm-email">
        {{ 'customer.register.email' | t }}
      </label>
    </div>
    {% comment %}Error Handeling for Emails{% endcomment %}
    {%- if form.errors contains 'email' -%}
      <span id="RegisterForm-email-error" class="form__message">
        <svg aria-hidden="true" focusable="false" role="presentation">
          <use href="#icon-error" />
        </svg>
        {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.
      </span>
    {%- endif -%}
    {% comment %} Password Field{% endcomment %}
    <div class="field">
      <input
        type="password"
        name="customer[password]"
        id="RegisterForm-password"
        aria-required="true"
        {% if form.errors contains 'password' %}
          aria-invalid="true"
          aria-describedby="RegisterForm-password-error"
        {% endif %}
        placeholder="{{ 'customer.register.password' | t }}"
      >
      <label for="RegisterForm-password">
        {{ 'customer.register.password' | t }}
      </label>
    </div>
    {% comment %}Error Handeling for Password{% endcomment %}
    {%- if form.errors contains 'password' -%}
      <span id="RegisterForm-password-error" class="form__message">
        <svg aria-hidden="true" focusable="false" role="presentation">
          <use href="#icon-error" />
        </svg>
        {{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}.
      </span>
    {%- endif -%}
    {% comment %} Password Confirmation Field{% endcomment %}
    <div class="field">
      <input
        type="password"
        name="customer[password_confirmation]"
        id="password_confirmation"
        autocomplete="new-password"
        {% if form.errors contains 'password_confirmation' %}
          aria-invalid="true"
          aria-describedby="password_confirmation-error"
        {% endif %}
        placeholder="Confirm Password"
      >
      <label for="password_confirmation">
        Confirm Password
      </label>
      </div>
    {% comment %}Error Handeling for Password Confirmation{% endcomment %}
    {%- if form.errors contains 'password_confirmation' -%}
      <small id="password_confirmation-error" class="form__message">
        <svg aria-hidden="true" focusable="false" role="presentation">
          <use href="#icon-error" />
        </svg>
        {{ form.errors.translated_fields['password_confirmation'] | capitalize }} {{ form.errors.messages['password_confirmation'] }}
      </small>
    {%- endif -%}
    {% comment %} Accept Email Marketing Field{% endcomment %}
    <div class="accepts-marketing">
      <input
        type="hidden"
        name="customer[accepts_marketing]"
        value="" />
      <input
        type="checkbox"
        name="customer[accepts_marketing]" />
      <label for="accepts-marketing">Subscribe to email marketing</label>
    </div>
    {% comment %} Submit Button{% endcomment %}
    <button>
      {{ 'customer.register.submit' | t }}
    </button>

  {%- endform -%}
{% schema %}
  {
    "name": "Section name",
    "settings": []
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
$(function(){
  $('#create_customer').submit(function(e) {
    if ( $('input[name="customer[password]"]').val() != $('input[name="customer[password_confirmation]"]').val()) {
      alert('Passwords do not match.');
      e.preventDefault();
  	  e.stopPropagation();
      return false;
    }
  });
});
{% endjavascript %}

 

 

 

0 Likes