full
This commit is contained in:
@@ -12,9 +12,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
if (!this.overlay) return;
|
||||
|
||||
this.content = document.getElementById('modal-content');
|
||||
this.container = this.overlay.querySelector('.bg-white');
|
||||
this.container = this.content ? this.content.parentElement : null;
|
||||
this.closeBtn = document.getElementById('modal-close');
|
||||
|
||||
if (!this.content || !this.container) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.bindEvents();
|
||||
this.initFormHandling();
|
||||
},
|
||||
@@ -37,8 +41,16 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
if (modalTrigger) {
|
||||
e.preventDefault();
|
||||
const modalName = modalTrigger.getAttribute('data-modal');
|
||||
const cardId = modalTrigger.getAttribute('data-card-id');
|
||||
this.open(modalName, { cardId });
|
||||
|
||||
const params = {};
|
||||
Array.from(modalTrigger.attributes).forEach(attr => {
|
||||
if (attr.name.startsWith('data-') && attr.name !== 'data-modal') {
|
||||
const key = attr.name.replace('data-', '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
||||
params[key] = attr.value;
|
||||
}
|
||||
});
|
||||
|
||||
this.open(modalName, params);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -51,45 +63,52 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
},
|
||||
|
||||
initFormHandling() {
|
||||
console.log('Form handling initialized');
|
||||
|
||||
document.addEventListener('fluentform_submission_success', (e) => {
|
||||
const form = e.target.closest('.ff-el-form-wrapper form');
|
||||
if (form) {
|
||||
setTimeout(() => {
|
||||
if (this.isOpen()) {
|
||||
this.replace('form-success');
|
||||
} else {
|
||||
this.open('form-success');
|
||||
}
|
||||
const thankYouUrl = this.getLocalizedUrl('/thank-you');
|
||||
window.location.href = thankYouUrl;
|
||||
}, 300);
|
||||
}
|
||||
}, true);
|
||||
|
||||
if (typeof jQuery !== 'undefined') {
|
||||
jQuery(document).ajaxSuccess((event, xhr, settings) => {
|
||||
|
||||
if (settings.url && settings.url.includes('admin-ajax.php') &&
|
||||
settings.data && settings.data.includes('fluentform_submit')) {
|
||||
try {
|
||||
const response = JSON.parse(xhr.responseText);
|
||||
console.log('Response:', response);
|
||||
if (response.success && response.data && response.data.insert_id) {
|
||||
setTimeout(() => {
|
||||
if (this.isOpen()) {
|
||||
this.replace('form-success');
|
||||
} else {
|
||||
this.open('form-success');
|
||||
}
|
||||
const thankYouUrl = this.getLocalizedUrl('/thank-you');
|
||||
window.location.href = thankYouUrl;
|
||||
}, 300);
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
}
|
||||
},
|
||||
getLocalizedUrl(path) {
|
||||
const htmlLang = document.documentElement.lang;
|
||||
const currentLang = window.pll_current_language || this.getCurrentLangFromUrl();
|
||||
|
||||
if (currentLang) {
|
||||
return `/${currentLang}${path}`;
|
||||
}
|
||||
|
||||
return path;
|
||||
},
|
||||
|
||||
getCurrentLangFromUrl() {
|
||||
const currentPath = window.location.pathname;
|
||||
const languageCodes = ['gym'];
|
||||
const pathParts = currentPath.split('/').filter(part => part.length > 0);
|
||||
|
||||
return pathParts.length > 0 && languageCodes.includes(pathParts[0]) ? pathParts[0] : null;
|
||||
},
|
||||
|
||||
open(modalName, params = {}) {
|
||||
const template = document.getElementById(`modal-template-${modalName}`);
|
||||
@@ -130,25 +149,121 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
},
|
||||
|
||||
injectParams(params) {
|
||||
if (params.cardId) {
|
||||
setTimeout(() => {
|
||||
const hiddenInput = this.content.querySelector('input[name="hidden"]');
|
||||
if (hiddenInput && !hiddenInput.dataset.cardInjected) {
|
||||
const currentValue = hiddenInput.value || '';
|
||||
hiddenInput.value = currentValue + ` | Карта ID: ${params.cardId}`;
|
||||
hiddenInput.dataset.cardInjected = 'true';
|
||||
}
|
||||
}, 100);
|
||||
if (params.cardTitle) {
|
||||
const titleElements = this.content.querySelectorAll('[data-inject="card-title"]');
|
||||
titleElements.forEach(el => {
|
||||
el.textContent = params.cardTitle;
|
||||
});
|
||||
}
|
||||
|
||||
if (params.cardTime) {
|
||||
this.fillTimeInfo(JSON.parse(params.cardTime));
|
||||
}
|
||||
|
||||
if (params.cardPrices) {
|
||||
this.fillPrices(JSON.parse(params.cardPrices), params.cardTitle, params.cardId);
|
||||
}
|
||||
},
|
||||
|
||||
fillTimeInfo(timeSlots) {
|
||||
if (!timeSlots.length) return;
|
||||
|
||||
const firstSlot = timeSlots[0];
|
||||
|
||||
if (firstSlot.normal_days) {
|
||||
const normalDaysEl = this.content.querySelector('[data-inject="normal-days"]');
|
||||
if (normalDaysEl) normalDaysEl.textContent = firstSlot.normal_days;
|
||||
}
|
||||
|
||||
if (firstSlot.vacation_days) {
|
||||
const vacationDaysEl = this.content.querySelector('[data-inject="vacation-days"]');
|
||||
if (vacationDaysEl) vacationDaysEl.textContent = firstSlot.vacation_days;
|
||||
}
|
||||
},
|
||||
|
||||
fillPrices(prices, cardTitle, cardId) {
|
||||
Object.keys(prices).forEach(period => {
|
||||
const price = prices[period];
|
||||
if (!price.full || !price.day) return;
|
||||
|
||||
const fullElements = this.content.querySelectorAll(`[data-inject="price-${period.replace('_', '-')}-full"]`);
|
||||
const dayElements = this.content.querySelectorAll(`[data-inject="price-${period.replace('_', '-')}-day"]`);
|
||||
|
||||
fullElements.forEach(el => el.textContent = price.full);
|
||||
dayElements.forEach(el => el.textContent = price.day);
|
||||
});
|
||||
|
||||
this.content.querySelectorAll('.price-option').forEach(option => {
|
||||
option.addEventListener('click', () => {
|
||||
const period = option.dataset.period;
|
||||
const price = prices[period];
|
||||
if (price) {
|
||||
this.selectPrice(option, period, price, cardTitle, cardId);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const firstOption = this.content.querySelector('.price-option');
|
||||
if (firstOption && prices['1_month']) {
|
||||
this.selectPrice(firstOption, '1_month', prices['1_month'], cardTitle, cardId);
|
||||
}
|
||||
},
|
||||
|
||||
selectPrice(selectedOption, period, price, cardTitle, cardId) {
|
||||
this.content.querySelectorAll('.price-option').forEach(option => {
|
||||
option.classList.remove('bg-[linear-gradient(90deg,_#2b2c35_39.42%,_#6e7996_92.9%)]', '[&_div]:text-[#f8f8f8]', '[&_p]:text-[#bcbcc0]');
|
||||
option.classList.add('bg-[linear-gradient(180deg,_#f2f2f2_69.59%,_#ededed_100%)]', '[&_div]:text-[#222]', '[&_p]:text-[#6c6b6b]');
|
||||
});
|
||||
|
||||
selectedOption.classList.remove('bg-[linear-gradient(180deg,_#f2f2f2_69.59%,_#ededed_100%)]', '[&_div]:text-[#222]', '[&_p]:text-[#6c6b6b]');
|
||||
selectedOption.classList.add('bg-[linear-gradient(90deg,_#2b2c35_39.42%,_#6e7996_92.9%)]', '[&_div]:text-[#f8f8f8]', '[&_p]:text-[#bcbcc0]');
|
||||
|
||||
const periodNames = {
|
||||
'1_month': '1 месяц',
|
||||
'3_month': '3 месяца',
|
||||
'6_month': '6 месяцев',
|
||||
'12_month': '12 месяцев'
|
||||
};
|
||||
|
||||
const selectedPeriodEl = this.content.querySelector('#selected-period');
|
||||
const selectedFullPriceEl = this.content.querySelector('#selected-full-price');
|
||||
const selectedDayPriceEl = this.content.querySelector('#selected-day-price');
|
||||
|
||||
if (selectedPeriodEl) selectedPeriodEl.textContent = periodNames[period];
|
||||
if (selectedFullPriceEl) selectedFullPriceEl.textContent = price.full;
|
||||
if (selectedDayPriceEl) selectedDayPriceEl.textContent = price.day;
|
||||
|
||||
setTimeout(() => {
|
||||
const hiddenInput = this.content.querySelector('input[name="hidden"]');
|
||||
if (hiddenInput) {
|
||||
const formWrapper = this.content.querySelector('.form-block-wrapper');
|
||||
const baseValue = formWrapper ? formWrapper.dataset.hiddenValue : '';
|
||||
|
||||
const normalDays = this.content.querySelector('[data-inject="normal-days"]')?.textContent || '';
|
||||
const vacationDays = this.content.querySelector('[data-inject="vacation-days"]')?.textContent || '';
|
||||
const daysInfo = normalDays || vacationDays ? ` | Дни: обычные ${normalDays}, выходные ${vacationDays}` : '';
|
||||
|
||||
const tariffInfo = `Карта: ${cardTitle} | Тариф: ${periodNames[period]} | Цена: ${price.full} ₽ (${price.day} ₽/день)${daysInfo} | ID карты: ${cardId}`;
|
||||
hiddenInput.value = `${baseValue} | ${tariffInfo}`;
|
||||
}
|
||||
}, 100);
|
||||
},
|
||||
|
||||
camelToKebab(str) {
|
||||
return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
|
||||
},
|
||||
|
||||
show() {
|
||||
if (!this.overlay || !this.container) return;
|
||||
|
||||
this.overlay.classList.remove('opacity-0', 'invisible');
|
||||
this.overlay.classList.add('opacity-100', 'visible');
|
||||
|
||||
setTimeout(() => {
|
||||
this.container.classList.remove('scale-90');
|
||||
this.container.classList.add('scale-100');
|
||||
if (this.container) {
|
||||
this.container.classList.remove('scale-90');
|
||||
this.container.classList.add('scale-100');
|
||||
}
|
||||
}, 10);
|
||||
|
||||
setTimeout(() => {
|
||||
@@ -171,6 +286,8 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
},
|
||||
|
||||
hide() {
|
||||
if (!this.container || !this.overlay) return;
|
||||
|
||||
this.container.classList.remove('scale-100');
|
||||
this.container.classList.add('scale-90');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user