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? -%}
{% comment %} This Code if for error handeling {% endcomment %}
{%- elsif form.errors -%}
##
{{ 'templates.contact.form.error_heading' | t }}
{%- for field in form.errors -%}
- {%- if field == 'form' -%}
{{ form.errors.messages[field] }}
{%- else -%}
{{ form.errors.translated_fields[field] | capitalize }}
{{ form.errors.messages[field] }}
{%- endif -%}
{%- endfor -%}
{%- 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 }}
{% comment %} Title shown above Form{% endcomment %}
#
Create A Membership Account
{%- form 'create_customer', return_to: '/pages/member-sign-up', novalidate: 'novalidate' -%}
{%- if form.posted_successfully? -%}
{% comment %} This Code if for error handeling {% endcomment %}
{%- elsif form.errors -%}
##
{{ 'templates.contact.form.error_heading' | t }}
{%- for field in form.errors -%}
- {%- if field == 'form' -%}
{{ form.errors.messages[field] }}
{%- else -%}
{{ form.errors.translated_fields[field] | capitalize }}
{{ form.errors.messages[field] }}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{% comment %} First Name Field{% endcomment %}
{% comment %} Last Name Field{% endcomment %}
{% comment %} Email Field{% endcomment %}
{% comment %}Error Handeling for Emails{% endcomment %}
{%- if form.errors contains 'email' -%}
{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.
{%- endif -%}
{% comment %} Password Field{% endcomment %}
{% comment %}Error Handeling for Password{% endcomment %}
{%- if form.errors contains 'password' -%}
{{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}.
{%- endif -%}
{% comment %} Password Confirmation Field{% endcomment %}
{% comment %}Error Handeling for Password Confirmation{% endcomment %}
{%- if form.errors contains 'password_confirmation' -%}
<small>
{{ form.errors.translated_fields['password_confirmation'] | capitalize }} {{ form.errors.messages['password_confirmation'] }}
</small>
{%- endif -%}
{% comment %} Accept Email Marketing Field{% endcomment %}
{% comment %} Submit Button{% endcomment %}
{%- 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 %}