312 lines
10 KiB
JavaScript
312 lines
10 KiB
JavaScript
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 cartPanel = cartDrawer?.querySelector('.cart-panel')
|
|
const modalCard = modalBackdrop?.querySelector('.modal-card')
|
|
|
|
let cart = []
|
|
let lastCartTrigger = null
|
|
let lastModalTrigger = null
|
|
|
|
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]'))
|
|
}
|
|
|
|
const focusFirstElement = container => {
|
|
const [first] = getFocusableElements(container)
|
|
|
|
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()
|
|
})
|
|
})
|
|
}
|
|
|
|
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', () => {
|
|
if (wooCommerceConfig && wooCommerceConfig.cartUrl) {
|
|
window.location.href = wooCommerceConfig.cartUrl
|
|
}
|
|
})
|
|
checkoutButton.addEventListener('click', () => {
|
|
if (wooCommerceConfig && wooCommerceConfig.checkoutUrl) {
|
|
window.location.href = wooCommerceConfig.checkoutUrl
|
|
return
|
|
}
|
|
|
|
closeCart()
|
|
openModal(checkoutButton)
|
|
})
|
|
|
|
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
|
|
}
|
|
|
|
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
|
|
}
|
|
})
|
|
})
|
|
|
|
orderForm.addEventListener('submit', event => {
|
|
event.preventDefault()
|
|
orderSuccess.classList.add('visible')
|
|
cart = []
|
|
renderCart()
|
|
setTimeout(() => {
|
|
closeModal()
|
|
orderForm.reset()
|
|
orderSuccess.classList.remove('visible')
|
|
}, 1800)
|
|
})
|
|
|
|
contactForm.addEventListener('submit', event => {
|
|
event.preventDefault()
|
|
contactSuccess.classList.add('visible')
|
|
setTimeout(() => {
|
|
contactForm.reset()
|
|
contactSuccess.classList.remove('visible')
|
|
}, 2200)
|
|
})
|
|
|
|
document.addEventListener('keydown', event => {
|
|
if (event.key !== 'Escape') {
|
|
return
|
|
}
|
|
closeCart()
|
|
closeModal()
|
|
closeMobileMenu()
|
|
})
|
|
|
|
renderCart()
|