Skip to content

Instantly share code, notes, and snippets.

@halfnibble
Created October 24, 2021 05:55
Show Gist options
  • Save halfnibble/7a8f1510d0a6b174874eb523680bcbaa to your computer and use it in GitHub Desktop.
Save halfnibble/7a8f1510d0a6b174874eb523680bcbaa to your computer and use it in GitHub Desktop.
Toggle Login and Register forms on the Moore Wright Group Woocommerce page.
/**
* Add this JavaScript early in the DOM so it will execute when the page loads.
* You can use something like the "Simple Custom CSS and JS" plugin:
* https://wordpress.org/plugins/custom-css-js/#
*
* If you want to test it, execute the code inside the "DOMContentLoaded"
* function in the developer console on the login|register page.
*/
document.addEventListener("DOMContentLoaded", function (event) {
// Select Elements
const formParent = document.querySelector('#customer_login');
const loginEl = document.querySelector('#customer_login .col-1');
const registerEl = document.querySelector('#customer_login .col-2');
const formToggleButton = document.createElement('button');
// Style the toggle button
formToggleButton.classList.add('button');
formToggleButton.style.fontSize = '18px';
formToggleButton.style.padding = '0 24px';
formToggleButton.style.margin = '0 4px -40px auto';
formToggleButton.style.backgroundColor = '#eaeaea';
formToggleButton.style.color = '#1a491d';
formToggleButton.style.textDecoration = 'underline';
let showForm = 'initializing'; // Correct values: 'login' or 'register'
const showRegister = () => {
// Button display text for register form
formToggleButton.innerText = 'Already registered? Login here.';
loginEl.style.display = 'none';
registerEl.style.display = 'block';
showForm = 'register';
}
const showLogin = () => {
// Button display text for login form
formToggleButton.innerText = 'Not signed up yet? Register here.';
loginEl.style.display = 'block';
registerEl.style.display = 'none';
showForm = 'login';
}
const toggleForms = () => {
if (showForm === 'login') {
showRegister();
} else {
showLogin();
}
}
// Listen to click events
formToggleButton.addEventListener('click', () => {
toggleForms();
});
// Initiate button with first toggle
toggleForms();
// Add button to top of login/register form
formParent.prepend(formToggleButton);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment