Сайт Fakel Gym
https://fakelgym.cp.good-production.xyz/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
392 lines
15 KiB
392 lines
15 KiB
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
const ModalSystem = {
|
|
overlay: null,
|
|
content: null,
|
|
container: null,
|
|
closeBtn: null,
|
|
modalStack: [],
|
|
|
|
init() {
|
|
this.overlay = document.getElementById('modal-overlay');
|
|
if (!this.overlay) return;
|
|
|
|
this.content = document.getElementById('modal-content');
|
|
this.container = this.content ? this.content.parentElement : null;
|
|
this.closeBtn = document.getElementById('modal-close');
|
|
|
|
if (!this.content || !this.container) {
|
|
return;
|
|
}
|
|
|
|
this.bindEvents();
|
|
this.initFormHandling();
|
|
},
|
|
|
|
bindEvents() {
|
|
if (this.closeBtn) {
|
|
this.closeBtn.addEventListener('click', () => this.close());
|
|
}
|
|
|
|
this.overlay.addEventListener('click', (e) => {
|
|
if (e.target === this.overlay) this.close();
|
|
});
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && this.isOpen()) this.close();
|
|
});
|
|
|
|
document.addEventListener('click', (e) => {
|
|
const modalTrigger = e.target.closest('[data-modal]');
|
|
if (modalTrigger) {
|
|
e.preventDefault();
|
|
const modalName = modalTrigger.getAttribute('data-modal');
|
|
|
|
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);
|
|
}
|
|
});
|
|
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target.closest('[data-modal-close]')) {
|
|
e.preventDefault();
|
|
this.close();
|
|
}
|
|
});
|
|
},
|
|
|
|
initFormHandling() {
|
|
document.addEventListener('fluentform_submission_success', (e) => {
|
|
const form = e.target.closest('.ff-el-form-wrapper form');
|
|
if (form) {
|
|
setTimeout(() => {
|
|
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);
|
|
if (response.success && response.data && response.data.insert_id) {
|
|
setTimeout(() => {
|
|
const thankYouUrl = this.getLocalizedUrl('/thank-you');
|
|
window.location.href = thankYouUrl;
|
|
}, 300);
|
|
}
|
|
} catch (e) {
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
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;
|
|
},
|
|
|
|
getCurrentBranch() {
|
|
const isGymPage = window.location.pathname.includes('/gym/');
|
|
return isGymPage ? 'gym' : 'main';
|
|
},
|
|
|
|
open(modalName, params = {}) {
|
|
const template = document.getElementById(`modal-template-${modalName}`);
|
|
if (!template) return;
|
|
|
|
this.modalStack.push({
|
|
name: modalName,
|
|
params: params,
|
|
content: template.innerHTML
|
|
});
|
|
|
|
this.content.innerHTML = template.innerHTML;
|
|
|
|
if (this.modalStack.length === 1) {
|
|
this.show();
|
|
}
|
|
|
|
this.injectParams(params);
|
|
},
|
|
|
|
replace(modalName, params = {}) {
|
|
if (this.modalStack.length === 0) {
|
|
this.open(modalName, params);
|
|
return;
|
|
}
|
|
|
|
const template = document.getElementById(`modal-template-${modalName}`);
|
|
if (!template) return;
|
|
|
|
this.modalStack[this.modalStack.length - 1] = {
|
|
name: modalName,
|
|
params: params,
|
|
content: template.innerHTML
|
|
};
|
|
|
|
this.content.innerHTML = template.innerHTML;
|
|
this.injectParams(params);
|
|
},
|
|
|
|
injectParams(params) {
|
|
if (params.cardTitle) {
|
|
const titleElements = this.content.querySelectorAll('[data-inject="card-title"]');
|
|
titleElements.forEach(el => {
|
|
el.textContent = params.cardTitle;
|
|
});
|
|
}
|
|
|
|
const attrElements = this.content.querySelectorAll('[data-inject="card-attr"]');
|
|
attrElements.forEach(el => {
|
|
const parentDiv = el.closest('div');
|
|
|
|
if (params.cardAttr && params.cardAttr.trim() !== '') {
|
|
el.textContent = params.cardAttr;
|
|
if (parentDiv) {
|
|
parentDiv.style.display = 'flex';
|
|
}
|
|
} else {
|
|
if (parentDiv) {
|
|
parentDiv.style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
|
|
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(() => {
|
|
if (this.closeBtn) this.closeBtn.focus();
|
|
}, 350);
|
|
},
|
|
|
|
close() {
|
|
if (this.modalStack.length === 0) return;
|
|
|
|
const currentModal = this.modalStack[this.modalStack.length - 1];
|
|
|
|
if (currentModal.name === 'welcome-branch') {
|
|
const currentBranch = this.getCurrentBranch();
|
|
localStorage.setItem('branch_choice_made', currentBranch);
|
|
}
|
|
|
|
this.modalStack.pop();
|
|
|
|
if (this.modalStack.length > 0) {
|
|
const prevModal = this.modalStack[this.modalStack.length - 1];
|
|
this.content.innerHTML = prevModal.content;
|
|
this.injectParams(prevModal.params);
|
|
} else {
|
|
this.hide();
|
|
}
|
|
},
|
|
|
|
hide() {
|
|
if (!this.container || !this.overlay) return;
|
|
|
|
this.overlay.classList.remove('opacity-100', 'visible');
|
|
this.overlay.classList.add('opacity-0', 'invisible');
|
|
|
|
this.modalStack = [];
|
|
},
|
|
|
|
isOpen() {
|
|
return this.modalStack.length > 0;
|
|
}
|
|
};
|
|
|
|
ModalSystem.init();
|
|
|
|
function checkWelcomeModal() {
|
|
const isHomePage = window.location.pathname === '/' || window.location.pathname === '';
|
|
const isGymPage = window.location.pathname.includes('/gym/');
|
|
const hasChoiceMade = localStorage.getItem('branch_choice_made');
|
|
|
|
if ((isHomePage || isGymPage) && !hasChoiceMade) {
|
|
setTimeout(function() {
|
|
ModalSystem.open('welcome-branch');
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.closest('.branch-card')) {
|
|
e.preventDefault();
|
|
|
|
const branchCard = e.target.closest('.branch-card');
|
|
const branch = branchCard.dataset.branch;
|
|
|
|
if (!branch) return;
|
|
|
|
localStorage.setItem('branch_choice_made', branch);
|
|
|
|
branchCard.classList.add('selecting');
|
|
const button = branchCard.querySelector('button');
|
|
if (button) {
|
|
button.querySelector('span').textContent = 'Переходим...';
|
|
}
|
|
|
|
setTimeout(function() {
|
|
const isHomePage = window.location.pathname === '/' || window.location.pathname === '';
|
|
const isGymPage = window.location.pathname.includes('/gym/');
|
|
|
|
if (branch === 'gym') {
|
|
if (isGymPage) {
|
|
ModalSystem.close();
|
|
} else {
|
|
window.location.href = '/gym/';
|
|
}
|
|
} else {
|
|
if (isHomePage) {
|
|
ModalSystem.close();
|
|
} else {
|
|
window.location.href = '/';
|
|
}
|
|
}
|
|
}, 500);
|
|
}
|
|
});
|
|
|
|
document.addEventListener('click', function(e) {
|
|
const branchCard = e.target.closest('.branch-card');
|
|
if (branchCard && !e.target.closest('.select-branch-btn')) {
|
|
document.querySelectorAll('.branch-card').forEach(function(card) {
|
|
card.classList.remove('selected');
|
|
});
|
|
branchCard.classList.add('selected');
|
|
}
|
|
});
|
|
|
|
checkWelcomeModal();
|
|
|
|
window.resetBranchChoice = function() {
|
|
localStorage.removeItem('branch_choice_made');
|
|
};
|
|
|
|
}); |