refactor
This commit is contained in:
@@ -1,343 +1,216 @@
|
||||
const mobileToggle = document.getElementById('mobileToggle')
|
||||
const mobilePanel = document.getElementById('mobilePanel')
|
||||
const cartDrawer = document.getElementById('cartDrawer')
|
||||
const cartOpenButton = document.getElementById('cartOpenButton')
|
||||
const mobileCartOpenButton = document.getElementById('mobileCartOpenButton')
|
||||
const cartCloseButton = document.getElementById('cartCloseButton')
|
||||
const modalBackdrop = document.getElementById('orderModal')
|
||||
const modalCloseButton = document.getElementById('modalCloseButton')
|
||||
const viewCartButton = document.getElementById('viewCartButton')
|
||||
const checkoutButton = document.getElementById('checkoutButton')
|
||||
const orderButtons = document.querySelectorAll('[data-open-order]')
|
||||
const addToCartButtons = document.querySelectorAll('.add-to-cart')
|
||||
const faqItems = document.querySelectorAll('.faq-item')
|
||||
const cartCount = document.getElementById('cartCount')
|
||||
const mobileCartCount = document.getElementById('mobileCartCount')
|
||||
const cartItemsCount = document.getElementById('cartItemsCount')
|
||||
const cartTotal = document.getElementById('cartTotal')
|
||||
const cartList = document.getElementById('cartList')
|
||||
const orderForm = document.getElementById('orderForm')
|
||||
const contactForm = document.getElementById('contactForm')
|
||||
const orderItemsField = document.getElementById('orderItemsField')
|
||||
const orderSuccess = document.getElementById('orderSuccess')
|
||||
const contactSuccess = document.getElementById('contactSuccess')
|
||||
const wooCommerceConfig = window.test1WooCommerce || null
|
||||
const cartPageUrl = (wooCommerceConfig && wooCommerceConfig.cartUrl) ? wooCommerceConfig.cartUrl : '/cart/'
|
||||
const checkoutPageUrl = (wooCommerceConfig && wooCommerceConfig.checkoutUrl) ? wooCommerceConfig.checkoutUrl : '/checkout/'
|
||||
const cartPanel = cartDrawer?.querySelector('.cart-panel')
|
||||
const modalCard = modalBackdrop?.querySelector('.modal-card')
|
||||
const mobilePanel = document.getElementById('mobilePanel')
|
||||
const modalBackdrop = document.getElementById('orderModal')
|
||||
const modalCloseButton = document.getElementById('modalCloseButton')
|
||||
const orderButtons = document.querySelectorAll('[data-open-order]')
|
||||
const faqItems = document.querySelectorAll('.faq-item')
|
||||
const orderForm = document.getElementById('orderForm')
|
||||
const contactForm = document.getElementById('contactForm')
|
||||
const orderItemsField = document.getElementById('orderItemsField')
|
||||
const orderSuccess = document.getElementById('orderSuccess')
|
||||
const contactSuccess = document.getElementById('contactSuccess')
|
||||
const modalCard = modalBackdrop?.querySelector('.modal-card')
|
||||
|
||||
let cart = []
|
||||
let lastCartTrigger = null
|
||||
let lastModalTrigger = null
|
||||
let lastModalTrigger = null
|
||||
|
||||
const getFocusableElements = container => {
|
||||
if (!container) {
|
||||
return []
|
||||
}
|
||||
const getFocusableElements = container => {
|
||||
if (!container) {
|
||||
return []
|
||||
}
|
||||
|
||||
return Array.from(container.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'))
|
||||
.filter(element => !element.hasAttribute('hidden') && !element.closest('[hidden]'))
|
||||
return Array.from(container.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'))
|
||||
.filter(element => !element.hasAttribute('hidden') && !element.closest('[hidden]'))
|
||||
}
|
||||
|
||||
const focusFirstElement = container => {
|
||||
const [first] = getFocusableElements(container)
|
||||
|
||||
if (first) {
|
||||
first.focus()
|
||||
}
|
||||
}
|
||||
|
||||
const openMobileMenu = () => {
|
||||
if (!mobilePanel || !mobileToggle) {
|
||||
return
|
||||
}
|
||||
|
||||
mobilePanel.classList.add('active')
|
||||
mobileToggle.setAttribute('aria-expanded', 'true')
|
||||
document.body.classList.add('menu-open')
|
||||
}
|
||||
|
||||
const closeMobileMenu = () => {
|
||||
if (!mobilePanel || !mobileToggle) {
|
||||
return
|
||||
}
|
||||
|
||||
mobilePanel.classList.remove('active')
|
||||
mobileToggle.setAttribute('aria-expanded', 'false')
|
||||
document.body.classList.remove('menu-open')
|
||||
}
|
||||
|
||||
const openModal = triggerElement => {
|
||||
if (!modalBackdrop) {
|
||||
return
|
||||
}
|
||||
|
||||
lastModalTrigger = triggerElement || document.activeElement
|
||||
|
||||
if (orderItemsField) {
|
||||
orderItemsField.value = ''
|
||||
}
|
||||
|
||||
modalBackdrop.classList.add('open')
|
||||
modalBackdrop.setAttribute('aria-hidden', 'false')
|
||||
document.body.classList.add('modal-open')
|
||||
focusFirstElement(modalCard)
|
||||
}
|
||||
|
||||
const closeModal = () => {
|
||||
if (!modalBackdrop) {
|
||||
return
|
||||
}
|
||||
|
||||
const shouldRestoreFocus = modalBackdrop.classList.contains('open')
|
||||
|
||||
modalBackdrop.classList.remove('open')
|
||||
modalBackdrop.setAttribute('aria-hidden', 'true')
|
||||
document.body.classList.remove('modal-open')
|
||||
|
||||
if (shouldRestoreFocus && lastModalTrigger && typeof lastModalTrigger.focus === 'function') {
|
||||
lastModalTrigger.focus()
|
||||
}
|
||||
|
||||
lastModalTrigger = null
|
||||
}
|
||||
|
||||
const submitLeadForm = (formElement, successElement, formType, onSuccess) => {
|
||||
if (!formElement || !successElement) {
|
||||
return
|
||||
}
|
||||
|
||||
formElement.addEventListener('submit', async event => {
|
||||
event.preventDefault()
|
||||
|
||||
const leadFormConfig = window.test1LeadForm || null
|
||||
|
||||
if (!leadFormConfig?.ajaxUrl || !leadFormConfig?.action || !leadFormConfig?.nonce) {
|
||||
window.alert('Форма временно недоступна. Обновите страницу и попробуйте снова.')
|
||||
return
|
||||
}
|
||||
|
||||
const focusFirstElement = container => {
|
||||
const [first] = getFocusableElements(container)
|
||||
const formData = new window.FormData(formElement)
|
||||
formData.append('action', leadFormConfig.action)
|
||||
formData.append('nonce', leadFormConfig.nonce)
|
||||
formData.append('form_type', formType)
|
||||
formData.append('page_url', window.location.href)
|
||||
|
||||
if (first) {
|
||||
first.focus()
|
||||
}
|
||||
}
|
||||
|
||||
const openMobileMenu = () => {
|
||||
mobilePanel.classList.add('active')
|
||||
mobileToggle.setAttribute('aria-expanded', 'true')
|
||||
document.body.classList.add('menu-open')
|
||||
}
|
||||
|
||||
const closeMobileMenu = () => {
|
||||
mobilePanel.classList.remove('active')
|
||||
mobileToggle.setAttribute('aria-expanded', 'false')
|
||||
document.body.classList.remove('menu-open')
|
||||
}
|
||||
|
||||
const openCart = triggerElement => {
|
||||
lastCartTrigger = triggerElement || document.activeElement
|
||||
cartDrawer.classList.add('open')
|
||||
cartDrawer.setAttribute('aria-hidden', 'false')
|
||||
document.body.classList.add('modal-open')
|
||||
focusFirstElement(cartPanel)
|
||||
}
|
||||
|
||||
const closeCart = () => {
|
||||
const shouldRestoreFocus = cartDrawer.classList.contains('open')
|
||||
cartDrawer.classList.remove('open')
|
||||
cartDrawer.setAttribute('aria-hidden', 'true')
|
||||
document.body.classList.remove('modal-open')
|
||||
|
||||
if (shouldRestoreFocus && lastCartTrigger && typeof lastCartTrigger.focus === 'function') {
|
||||
lastCartTrigger.focus()
|
||||
}
|
||||
|
||||
lastCartTrigger = null
|
||||
}
|
||||
|
||||
const openModal = triggerElement => {
|
||||
lastModalTrigger = triggerElement || document.activeElement
|
||||
orderItemsField.value = cart.length
|
||||
? cart.map(item => `${item.name} (${item.volume}) - ${item.price} ₽`).join('\n')
|
||||
: ''
|
||||
modalBackdrop.classList.add('open')
|
||||
modalBackdrop.setAttribute('aria-hidden', 'false')
|
||||
document.body.classList.add('modal-open')
|
||||
focusFirstElement(modalCard)
|
||||
}
|
||||
|
||||
const closeModal = () => {
|
||||
const shouldRestoreFocus = modalBackdrop.classList.contains('open')
|
||||
modalBackdrop.classList.remove('open')
|
||||
modalBackdrop.setAttribute('aria-hidden', 'true')
|
||||
document.body.classList.remove('modal-open')
|
||||
|
||||
if (shouldRestoreFocus && lastModalTrigger && typeof lastModalTrigger.focus === 'function') {
|
||||
lastModalTrigger.focus()
|
||||
}
|
||||
|
||||
lastModalTrigger = null
|
||||
}
|
||||
|
||||
const renderCart = () => {
|
||||
const total = cart.reduce((sum, item) => sum + item.price, 0)
|
||||
const count = cart.length
|
||||
|
||||
cartCount.textContent = count
|
||||
mobileCartCount.textContent = count
|
||||
cartItemsCount.textContent = count
|
||||
cartTotal.textContent = `${total} ₽`
|
||||
|
||||
if (!count) {
|
||||
cartList.innerHTML = '<div class="empty-state">Корзина пока пуста. Добавьте воду 19 литров, компактные форматы или минеральную воду из каталога.</div>'
|
||||
return
|
||||
}
|
||||
|
||||
cartList.innerHTML = cart.map((item, index) => `
|
||||
<div class="cart-item">
|
||||
<div>
|
||||
<strong>${item.name}</strong>
|
||||
<span>${item.volume} · ${item.price} ₽</span>
|
||||
</div>
|
||||
<button type="button" data-remove-index="${index}" aria-label="Удалить ${item.name} из корзины">Удалить</button>
|
||||
</div>
|
||||
`).join('')
|
||||
|
||||
cartList.querySelectorAll('[data-remove-index]').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const index = Number(button.dataset.removeIndex)
|
||||
cart.splice(index, 1)
|
||||
renderCart()
|
||||
})
|
||||
try {
|
||||
const response = await window.fetch(leadFormConfig.ajaxUrl, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
body: formData,
|
||||
})
|
||||
}
|
||||
|
||||
const submitLeadForm = (formElement, successElement, formType, onSuccess) => {
|
||||
if (!formElement || !successElement) {
|
||||
return
|
||||
const payload = await response.json().catch(() => null)
|
||||
|
||||
if (!response.ok || !payload?.success) {
|
||||
throw new Error('submit_failed')
|
||||
}
|
||||
|
||||
formElement.addEventListener('submit', async event => {
|
||||
event.preventDefault()
|
||||
|
||||
const leadFormConfig = window.test1LeadForm || null
|
||||
|
||||
if (!leadFormConfig?.ajaxUrl || !leadFormConfig?.action || !leadFormConfig?.nonce) {
|
||||
window.alert('Форма временно недоступна. Обновите страницу и попробуйте снова.')
|
||||
return
|
||||
}
|
||||
|
||||
const formData = new window.FormData(formElement)
|
||||
formData.append('action', leadFormConfig.action)
|
||||
formData.append('nonce', leadFormConfig.nonce)
|
||||
formData.append('form_type', formType)
|
||||
formData.append('page_url', window.location.href)
|
||||
|
||||
try {
|
||||
const response = await window.fetch(leadFormConfig.ajaxUrl, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
body: formData,
|
||||
})
|
||||
|
||||
const payload = await response.json().catch(() => null)
|
||||
|
||||
if (!response.ok || !payload?.success) {
|
||||
throw new Error('submit_failed')
|
||||
}
|
||||
|
||||
successElement.classList.add('visible')
|
||||
if (typeof onSuccess === 'function') {
|
||||
onSuccess()
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
formElement.reset()
|
||||
successElement.classList.remove('visible')
|
||||
}, 2200)
|
||||
} catch (error) {
|
||||
window.alert('Не удалось отправить заявку. Попробуйте еще раз.')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
mobileToggle.addEventListener('click', () => {
|
||||
const isOpen = mobilePanel.classList.contains('active')
|
||||
if (isOpen) {
|
||||
closeMobileMenu()
|
||||
return
|
||||
}
|
||||
openMobileMenu()
|
||||
})
|
||||
|
||||
document.querySelectorAll('.mobile-nav a').forEach(link => {
|
||||
link.addEventListener('click', closeMobileMenu)
|
||||
})
|
||||
|
||||
addToCartButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const productId = Number(button.dataset.productId || 0)
|
||||
|
||||
if (wooCommerceConfig && productId && wooCommerceConfig.addToCartUrl && wooCommerceConfig.checkoutUrl) {
|
||||
button.disabled = true
|
||||
|
||||
fetch(wooCommerceConfig.addToCartUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
product_id: String(productId),
|
||||
quantity: '1'
|
||||
})
|
||||
})
|
||||
.then(async response => {
|
||||
let payload = null
|
||||
|
||||
try {
|
||||
payload = await response.json()
|
||||
} catch (error) {
|
||||
payload = null
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('add_to_cart_failed')
|
||||
}
|
||||
|
||||
if (payload && payload.error && payload.product_url) {
|
||||
window.location.href = payload.product_url
|
||||
return
|
||||
}
|
||||
|
||||
cart.push({
|
||||
name: button.dataset.name,
|
||||
volume: button.dataset.volume,
|
||||
price: Number(button.dataset.price)
|
||||
})
|
||||
renderCart()
|
||||
openCart(button)
|
||||
button.disabled = false
|
||||
})
|
||||
.catch(() => {
|
||||
button.disabled = false
|
||||
})
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
cart.push({
|
||||
name: button.dataset.name,
|
||||
volume: button.dataset.volume,
|
||||
price: Number(button.dataset.price)
|
||||
})
|
||||
renderCart()
|
||||
openCart(button)
|
||||
})
|
||||
})
|
||||
|
||||
cartOpenButton.addEventListener('click', () => openCart(cartOpenButton))
|
||||
mobileCartOpenButton.addEventListener('click', () => {
|
||||
closeMobileMenu()
|
||||
openCart(mobileCartOpenButton)
|
||||
})
|
||||
cartCloseButton.addEventListener('click', closeCart)
|
||||
viewCartButton.addEventListener('click', () => {
|
||||
window.location.href = cartPageUrl
|
||||
})
|
||||
checkoutButton.addEventListener('click', () => {
|
||||
window.location.href = checkoutPageUrl
|
||||
})
|
||||
|
||||
orderButtons.forEach(button => {
|
||||
button.addEventListener('click', () => openModal(button))
|
||||
})
|
||||
|
||||
modalCloseButton.addEventListener('click', closeModal)
|
||||
|
||||
cartDrawer.addEventListener('click', event => {
|
||||
if (event.target === cartDrawer) {
|
||||
closeCart()
|
||||
}
|
||||
})
|
||||
|
||||
modalBackdrop.addEventListener('click', event => {
|
||||
if (event.target === modalBackdrop) {
|
||||
closeModal()
|
||||
}
|
||||
})
|
||||
|
||||
faqItems.forEach(item => {
|
||||
const trigger = item.querySelector('.faq-question')
|
||||
const answer = item.querySelector('.faq-answer')
|
||||
|
||||
if (!trigger || !answer) {
|
||||
return
|
||||
successElement.classList.add('visible')
|
||||
if (typeof onSuccess === 'function') {
|
||||
onSuccess()
|
||||
}
|
||||
|
||||
trigger.addEventListener('click', () => {
|
||||
const isOpen = item.classList.contains('open')
|
||||
faqItems.forEach(entry => {
|
||||
const entryTrigger = entry.querySelector('.faq-question')
|
||||
const entryAnswer = entry.querySelector('.faq-answer')
|
||||
|
||||
entry.classList.remove('open')
|
||||
entryTrigger?.setAttribute('aria-expanded', 'false')
|
||||
|
||||
if (entryAnswer) {
|
||||
entryAnswer.hidden = true
|
||||
}
|
||||
})
|
||||
if (!isOpen) {
|
||||
item.classList.add('open')
|
||||
trigger.setAttribute('aria-expanded', 'true')
|
||||
answer.hidden = false
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
submitLeadForm(orderForm, orderSuccess, 'landing_order', () => {
|
||||
cart = []
|
||||
renderCart()
|
||||
setTimeout(() => {
|
||||
closeModal()
|
||||
}, 700)
|
||||
})
|
||||
formElement.reset()
|
||||
successElement.classList.remove('visible')
|
||||
}, 2200)
|
||||
} catch (error) {
|
||||
window.alert('Не удалось отправить заявку. Попробуйте еще раз.')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
submitLeadForm(contactForm, contactSuccess, 'landing_contacts')
|
||||
if (mobileToggle && mobilePanel) {
|
||||
mobileToggle.addEventListener('click', () => {
|
||||
const isOpen = mobilePanel.classList.contains('active')
|
||||
|
||||
document.addEventListener('keydown', event => {
|
||||
if (event.key !== 'Escape') {
|
||||
return
|
||||
}
|
||||
closeCart()
|
||||
closeModal()
|
||||
if (isOpen) {
|
||||
closeMobileMenu()
|
||||
return
|
||||
}
|
||||
|
||||
openMobileMenu()
|
||||
})
|
||||
|
||||
document.querySelectorAll('.mobile-nav a').forEach(link => {
|
||||
link.addEventListener('click', closeMobileMenu)
|
||||
})
|
||||
}
|
||||
|
||||
orderButtons.forEach(button => {
|
||||
button.addEventListener('click', () => openModal(button))
|
||||
})
|
||||
|
||||
if (modalCloseButton) {
|
||||
modalCloseButton.addEventListener('click', closeModal)
|
||||
}
|
||||
|
||||
if (modalBackdrop) {
|
||||
modalBackdrop.addEventListener('click', event => {
|
||||
if (event.target === modalBackdrop) {
|
||||
closeModal()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
faqItems.forEach(item => {
|
||||
const trigger = item.querySelector('.faq-question')
|
||||
const answer = item.querySelector('.faq-answer')
|
||||
|
||||
if (!trigger || !answer) {
|
||||
return
|
||||
}
|
||||
|
||||
trigger.addEventListener('click', () => {
|
||||
const isOpen = item.classList.contains('open')
|
||||
|
||||
faqItems.forEach(entry => {
|
||||
const entryTrigger = entry.querySelector('.faq-question')
|
||||
const entryAnswer = entry.querySelector('.faq-answer')
|
||||
|
||||
entry.classList.remove('open')
|
||||
entryTrigger?.setAttribute('aria-expanded', 'false')
|
||||
|
||||
if (entryAnswer) {
|
||||
entryAnswer.hidden = true
|
||||
}
|
||||
})
|
||||
|
||||
renderCart()
|
||||
if (!isOpen) {
|
||||
item.classList.add('open')
|
||||
trigger.setAttribute('aria-expanded', 'true')
|
||||
answer.hidden = false
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
submitLeadForm(orderForm, orderSuccess, 'landing_order', () => {
|
||||
setTimeout(() => {
|
||||
closeModal()
|
||||
}, 700)
|
||||
})
|
||||
|
||||
submitLeadForm(contactForm, contactSuccess, 'landing_contacts')
|
||||
|
||||
document.addEventListener('keydown', event => {
|
||||
if (event.key !== 'Escape') {
|
||||
return
|
||||
}
|
||||
|
||||
closeModal()
|
||||
closeMobileMenu()
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user