.page-id-92314 {
background-color: var(--color-background-light) !important;
}
.page-id-92314 .mp_wrapper {
margin: 0 !important;
padding: 0 !important;
}
.page-id-92314 .mepr-form {
margin: 0 !important;
}
.page-id-92314 .special-title {
font-size: var(--font-size-heading-small) !important;
font-weight: var(--font-weight-semibold) !important;
}
.page-id-92314 .price-highlight {
margin-top: 20px !important;
font-size: 16px !important;
display: flex;
justify-content: space-between;
gap: var(--spacer-20);
padding: var(--spacer-20) !important;
background: var(--color-white);
border-radius: var(--border-radius-media);
}
.page-id-92314 .mepr-transaction-invoice-wrapper {
padding-top: 0 !important;
}
.page-id-92314 .special-form .wp-block-list {
padding-left: 24px !important;
}
@media (min-width: 768px) {
.page-id-92314 .special-form .wp-block-list {
padding-left: 4px !important;
}
}
.page-id-92314 .site-header__search-wrap,
.page-id-92314 .site-header__button,
.page-id-92314 .site-header__navigation-wrap,
.page-id-92314 .site-header__utility-nav,
.page-id-92314 .membership-navigation,
.page-id-92314 .site-header__scroll-nav-cta-wrapper,
.page-id-92314 footer {
display: none !important;
}
.page-id-92314 .site-header__logo-wrap {
padding-top: 0;
}
.page-id-92314 [data-js=site-wrap] {
margin-top: 0 !important;
}
@media (min-width: 768px) {
.page-id-92314 .special-title {
font-size: 24px !important;
font-weight: var(--font-weight-semibold) !important;
margin-bottom: var(--spacer-30) !important;
}
.page-id-92314 .special-form p,
.page-id-92314 .special-form li {
font-size: 16px;
margin-bottom: var(--spacer-20);
}
.page-id-92314 .special-form ul {
margin-top: var(--spacer-20);
margin-bottom: var(--spacer-20);
}
.page-id-92314 .special-form li {
margin-left: var(--spacer-20);
}
.page-id-92314 .site-header__logo-wrap {
padding-top: 15px !important;
}
.page-id-92314 .l-sink>.wp-block-group {
padding-top: 90px !important;
padding-bottom: 90px !important;
}
}
@media (min-width: 1200px) {
.page-id-92314.scroll-down .site-header {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
.mp_wrapper {
padding: 0 !important;
margin: 0 !important;
}
@media (min-width: 960px) {
.b-columns__grid--2-cols {
grid-template-columns: 0.43fr 0.57fr !important;
grid-column-gap: var(--spacer-70) !important;
}
}
.form-steps-nav {
margin-bottom: 48px;
}
.form-steps-nav ul {
display: flex;
justify-content: space-evenly;
align-items: start;
list-style: none;
padding: 0;
margin: 0;
gap: 0;
position: relative;
padding-left: 0 !important;
}
/* Línea entre pasos */
.form-steps-nav ul::before {
content: '';
position: absolute;
top: 15px; /* Alinear con el centro de los círculos */
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 1px;
background: #E5E7EB;
z-index: 0;
}
.form-steps-nav li {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--color-neutral-90);
font-size: 14px;
font-weight: 500;
z-index: 1;
width: 120px; /* Ancho fijo para espaciamiento uniforme */
text-align: center;
}
/* Números en círculos */
.form-steps-nav li::before {
content: attr(data-step);
width: 30px;
height: 30px;
border-radius: 8px;
background: #fff;
border: 2px solid var(--color-neutral-90);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
margin-bottom: 4px;
}
/* Estado activo */
.form-steps-nav li.active::before {
background: var(--color-primary);
border-color: var(--color-primary);
color: white;
}
.form-steps-nav li.active {
color: var(--color-neutral-90);
font-weight: 700;
}
/* Ajustes responsivos */
@media (max-width: 768px) {
.step-1,
.step-2 .mp-form-row:has([type="password"]) {
grid-template-columns: 1fr;
}
.form-steps-nav ul {
}
.form-steps-nav ul::before {
top: 22px;
}
.form-steps-nav li {
font-size: 12px;
padding: 6px 12px;
}
}
/* Clases de funcionalidad paso crítico */
.form-steps-wrapper {
position: relative;
min-height: 300px;
}
.form-step {
display: none;
opacity: 0;
transition: opacity 0.3s ease;
width:100%;
margin: 0 auto;
}
.form-step.active {
display: block;
opacity: 1;
}
.form-steps-navigation {
margin-top: 40px;
}
.nav-buttons {
display: flex;
justify-content: space-between;
gap: 16px;
}
.prev-btn,
.next-btn,
input[type="submit"] {
padding: 12px 32px;
border: none;
border-radius: 24px;
cursor: pointer;
font-weight: 500;
font-size: 16px;
transition: all 0.2s ease;
}
.prev-btn {
background: transparent;
border: 1px solid var(--color-primary);
color: var(--color-primary);
}
.next-btn,
input[type="submit"] {
background: var(--color-primary);
color: white;
margin-left: auto;
}
.prev-btn:hover,
.next-btn:hover,
input[type="submit"]:hover {
opacity: 0.9;
transform: translateY(-1px);
}
/* Estilización de campos de formulario */
.mp-form-row {
margin-bottom: 24px;
}
.mp-form-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.mepr-form-input {
width: 100%;
padding: 12px;
border: 1px solid #e1e1e1;
border-radius: 8px;
font-size: 16px;
}
input.invalid {
border-color: #ff3d5b !important;
}
.validation-error {
color: #ff3d5b;
font-size: 14px;
margin-top: 4px;
}
/* Estilo para enlace de cupón */
.have-coupon-link {
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
display: inline-block;
margin-top: 16px;
}
/* Diseño de dos columnas en el primer paso */
.step-1.active {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
row-gap: 0;
@media (min-width: 960px) {
grid-template-columns: 1fr 1fr;
}
}
.mp_invoice .mp-table thead {
display: none !important;
}
.mp_invoice {
background: var(--color-neutral-0);
padding: 16px !important;
border-radius: 8px;
overflow: hidden;
}
.mp_invoice .mp-table, .mp_invoice .mp-table * {
background: var(--color-neutral-0);
border: 0 !important;
font-size: 16px !important;
}
.mp_invoice .mp-table {
padding: 0 !important;
margin: 0 !important;
}
.price-highlight .mepr-invoice-loader {
display: none !important;
}
document.addEventListener('DOMContentLoaded', function() {
// Esperar a que el DOM y Stripe estén listos
const waitForStripe = new Promise((resolve) => {
if (window.MeprStripeGateway) {
resolve();
} else {
// Esperar a que Stripe se inicialice
const stripeCheck = setInterval(() => {
if (window.MeprStripeGateway) {
clearInterval(stripeCheck);
resolve();
}
}, 100);
}
});
waitForStripe.then(() => {
initializeMultiStepForm();
});
function initializeMultiStepForm() {
const form = document.querySelector('.mepr-signup-form');
if (!form) return;
// Inicialmente ocultar el formulario mientras se configura
form.style.display = 'none';
// Almacenar el botón de envío original antes de cualquier manipulación
const originalSubmitBtn = form.querySelector('input[type="submit"]');
const submitBtnValue = originalSubmitBtn ? originalSubmitBtn.value : 'Enviar';
const submitBtnClasses = originalSubmitBtn ? originalSubmitBtn.className : '';
// Eliminar cualquier navegación existente
const existingNav = document.querySelector('.form-steps-nav');
if (existingNav) existingNav.remove();
// Crear la navegación de los pasos
const stepsNav = document.createElement('div');
stepsNav.className = 'form-steps-nav';
stepsNav.innerHTML = `
- Información personal
- Datos de acceso
- Pago
`;
form.parentNode.insertBefore(stepsNav, form);
// Crear contenedores para cada paso
const formSteps = document.createElement('div');
formSteps.className = 'form-steps-wrapper';
const step1 = document.createElement('div');
step1.className = 'form-step step-1 active';
const step2 = document.createElement('div');
step2.className = 'form-step step-2';
const step3 = document.createElement('div');
step3.className = 'form-step step-3';
// Crear nuevo botón de envío con las propiedades originales
const submitBtn = document.createElement('input');
submitBtn.type = 'submit';
submitBtn.value = submitBtnValue;
submitBtn.className = submitBtnClasses + ' next-btn';
submitBtn.style.display = 'none';
// Almacenar referencias a los campos de email y usuario antes de moverlos
const emailInput = form.querySelector('[name="user_email"]');
const usernameInput = form.querySelector('[name="user_login"]');
// Mover la lógica de sincronización email-usuario arriba, antes de mover los campos
if (emailInput && usernameInput) {
// Ocultar todo el contenedor del usuario
const usernameContainer = usernameInput.closest('.mp-form-row');
if (usernameContainer) {
usernameContainer.style.display = 'none';
}
// Actualizar usuario cuando cambie el email (en input y blur)
emailInput.addEventListener('input', (e) => {
usernameInput.value = e.target.value;
});
emailInput.addEventListener('blur', (e) => {
usernameInput.value = e.target.value;
});
}
// Mover campos a sus respectivos contenedores
const personalFields = form.querySelectorAll([
'[id*="user_first_name"]',
'[id*="user_last_name"]',
'[id*="mepr-address-one"]',
'[id*="mepr-address-two"]',
'[id*="mepr-address-city"]',
'[id*="mepr-address-country"]',
'[id*="mepr-address-state"]',
'[id*="mepr-address-zip"]'
].join(','));
const paymentFields = form.querySelectorAll([
'.mepr-transaction-invoice-wrapper',
'.mepr-payment-methods-wrapper',
'.have-coupon-link',
'.mp-form-row.mepr_coupon',
'.mp-form-row.mepr_tos'
].join(','));
const accountFields = form.querySelectorAll([
'[name="user_email"]',
'[name="mepr_user_password"]',
'[name="mepr_user_password_confirm"]',
'[name="user_login"]'
].join(','));
// Mover campos a sus respectivos contenedores
personalFields.forEach(field => {
const row = field.closest('.mp-form-row');
if (row) step1.appendChild(row);
});
accountFields.forEach(field => {
const row = field.closest('.mp-form-row');
if (row) step2.appendChild(row);
});
paymentFields.forEach(field => {
step3.appendChild(field);
});
// Ocultar la tabla de precios
const pricingNewPosition = document.querySelector('.price-highlight');
const pricingTable = step3.querySelector('.mepr-transaction-invoice-wrapper');
console.log(pricingTable);
if (pricingTable) {
const clonedPricingTable = pricingTable.cloneNode(true);
pricingNewPosition.appendChild(clonedPricingTable);
pricingTable.style.display = 'none';
const observer = new MutationObserver(() => {
clonedPricingTable.innerHTML = pricingTable.innerHTML;
});
observer.observe(pricingTable, {
childList: true, // Observar cambios en los elementos hijos
subtree: true, // Observar cambios más profundos en el árbol DOM
attributes: true, // Observar cambios de atributos
});
}
// Agregar los pasos al formulario en el orden correcto
formSteps.appendChild(step1); // Información personal
formSteps.appendChild(step2); // Datos de acceso
formSteps.appendChild(step3); // Pago
// Limpiar el contenido original del formulario excepto los campos ocultos
const hiddenFields = Array.from(form.querySelectorAll('input[type="hidden"]'));
form.innerHTML = '';
hiddenFields.forEach(field => form.appendChild(field));
form.appendChild(formSteps);
// Crear botones de navegación
const navigation = document.createElement('div');
navigation.className = 'form-steps-navigation';
const navButtons = document.createElement('div');
navButtons.className = 'nav-buttons';
navButtons.innerHTML = `
`;
navButtons.appendChild(submitBtn);
navigation.appendChild(navButtons);
form.appendChild(navigation);
// Funcionalidad de navegación
let currentStep = 1;
const prevBtn = navigation.querySelector('.prev-btn');
const nextBtn = navigation.querySelector('.next-btn');
function validateStep(step) {
const currentStepElement = form.querySelector(`.step-${step}`);
const requiredFields = currentStepElement.querySelectorAll('.mepr-form-input:required, .mp-form-row.required input:not([type="hidden"]), .mp-form-row.required select');
let isValid = true;
requiredFields.forEach(field => {
if (!field.value.trim()) {
isValid = false;
field.classList.add('invalid');
const row = field.closest('.mp-form-row');
if (row && !row.querySelector('.validation-error')) {
const error = document.createElement('div');
error.className = 'validation-error';
error.textContent = 'Este campo es obligatorio';
row.appendChild(error);
}
} else {
field.classList.remove('invalid');
const row = field.closest('.mp-form-row');
const error = row?.querySelector('.validation-error');
if (error) error.remove();
}
});
return isValid;
}
function updateNavigation() {
prevBtn.style.display = currentStep === 1 ? 'none' : 'block';
const submitBtn = navigation.querySelector('input[type="submit"]');
// En el último paso, ocultar el botón siguiente y mostrar el botón enviar
if (currentStep === 3) {
nextBtn.style.display = 'none';
if (submitBtn) {
submitBtn.style.display = 'inline-block';
}
} else {
nextBtn.style.display = 'block';
if (submitBtn) {
submitBtn.style.display = 'none';
}
}
document.querySelector('#register').scrollIntoView();
// Actualizar navegación de pasos
document.querySelectorAll('.form-steps-nav li').forEach(li => {
li.classList.remove('active');
if (parseInt(li.dataset.step) === currentStep) {
li.classList.add('active');
}
});
}
function showStep(step) {
document.querySelectorAll('.form-step').forEach(s => {
s.classList.remove('active');
});
document.querySelector(`.step-${step}`).classList.add('active');
currentStep = step;
updateNavigation();
}
prevBtn.addEventListener('click', () => {
if (currentStep > 1) {
showStep(currentStep - 1);
}
});
nextBtn.addEventListener('click', () => {
if (validateStep(currentStep)) {
if (currentStep < 3) {
showStep(currentStep + 1);
}
}
});
// Mostrar el formulario después de la configuración
form.style.display = 'block';
// Agregar esto después de la inicialización del formulario
form.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
return false;
}
});
}
});
