Skip to content

Instantly share code, notes, and snippets.

@chrisjhoughton
Last active February 14, 2024 07:49
Show Gist options
  • Star 21 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save chrisjhoughton/3c9c5b452b1f7e5cc7eb to your computer and use it in GitHub Desktop.
Save chrisjhoughton/3c9c5b452b1f7e5cc7eb to your computer and use it in GitHub Desktop.
How to build an ajax form on Shopify. See http://inside.sauce.ly/how-to-build-an-ajax-login-form-on-shopify/ for the full blog post.
/*
* Ensure the http protocol is always used on the myshopify.com domains.
* Uses liquid to input the correct URL.
*/
if (window.location.href.match(/https:\/\/.*.myshopify.com/) && top === self) {
window.location.href = window.location.href.replace(/https:\/\/.*.myshopify.com/, 'http://{{ shop.domain }}');
}
/*
* Try to login, check the login credentials, and then redirect if required.
*/
login(email, password).done(function (html) {
if (html.indexOf('Invalid login credentials') !== -1) {
// invalid password - show a message to the user
} else {
// All good! Let's redirect if required
var checkoutUrl = getCheckoutUrl();
if (checkoutUrl) {
window.location.href = checkoutUrl;
} else {
// don't need to redirect, do what you like!
}
}
});
/*
* Or if you're registering a user:
*/
register(email, password, firstName, lastName).done(function (html) {
// logic for registration errors
if (html.indexOf('email is invalid') !== -1) {
} else if html.indexOf('email can't be blank') !== -1) {
} else if (html.indexOf('password can't be blank.') !== -1) {
}
});
/*
* Log the customer in with their email and password.
*/
function login(email, password) {
var data = {
'customer[email]': email,
'customer[password]': password,
form_type: 'customer_login',
utf8: '✓'
};
var promise = $.ajax({
url: '/account/login',
method: 'post',
data: data,
dataType: 'html',
async: true
});
return promise;
}
/*
* Log the customer in with their email and password.
*/
function register(email, password, firstName, lastName) {
var data = {
'customer[email]': email,
'customer[password]': password,
'customer[first_name]': firstName,
'customer[last_name]': lastName,
form_type: 'create_customer',
utf8: '✓'
};
var promise = $.ajax({
url: '/account',
method: 'post',
data: data,
dataType: 'html',
async: true
});
return promise;
}
/*
* Get the `checkout_url` from the URL query parameter, if it exists.
* (It only ever exists on the /account/login page)
*/
function getCheckoutUrl() {
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
return getParameterByName('checkout_url');
}
@jackgregory
Copy link

This is great, but your missing an opening bracket on line 28 before html.indexOf.

Should be...

 } else if (html.indexOf('email can't be blank') !== -1) { 

@rounders
Copy link

anyone know if this solution is still usable on shopify?

@mailsondias
Copy link

@rounders I got it. But I did another way.

@jbsulli
Copy link

jbsulli commented Sep 27, 2016

Works for me! Thanks for sharing!

@alinamike
Copy link

You can go for google.com post the topic many of topic article there you want it is easy to find your question the answer. https://www.jojothemes.com/

@mamun4343
Copy link

mamun4343 commented May 15, 2017

Registration is not working for me. i see 429 (Too Many Requests) all the time. any suggestion will be great :)

@presto2116
Copy link

Any chance you have the http://inside.sauce.ly/how-to-build-an-ajax-login-form-on-shopify/ full blog post anywhere else. looks like the site is down, and I am running into issues with the ajax returning incorrect results. thanks!

@Oleg-Sulzhenko
Copy link

@presto2116 http://web.archive.org/web/20150417052042/http://inside.sauce.ly:80/how-to-build-an-ajax-login-form-on-shopify/

Now ajax request returns page html instead of some info, maybe it is issue with https:// ... my site use https:// only and i cant use http:// for my pages - so the questions is how can i do ajax login with https:// and get proper respond (not plain html)

@noerbot
Copy link

noerbot commented May 9, 2019

@mamun4343 The "429 (Too Many Requests)" error is caused when you try to create more than one account in a single day.

This Shopify community thread has a solution that looks to work. We're working on implementing it now: https://community.shopify.com/c/Shopify-Design/Redirect-after-customer-registration/td-p/293044/page/3

Best of luck!

@neerajevm
Copy link

I have set up the login code and at that time the code was working properly. Now I checked this code is not working.
Can anyone use this code? Is it properly working? If it's working then please share the code or provide me the solution to why it's not working from my end. This code is written status 403.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment