Anton | натяжка страницы test1
This commit is contained in:
220
index3.js
Normal file
220
index3.js
Normal file
@@ -0,0 +1,220 @@
|
||||
const audienceContent = {
|
||||
home: 'Артезианская вода 19 литров с доставкой на дом и в офис. Привозим по Гагаринскому, Ленинскому, Нахимовскому и Балаклавскому районам, помогаем с возвратной тарой и держим понятные цены без скрытых доплат.',
|
||||
office: 'Доставка воды в офис в Севастополе с регулярным графиком, безналичной оплатой и приоритетными интервалами. Подходит для команд, кафе, студий, фитнес-клубов и клиентских пространств.'
|
||||
}
|
||||
|
||||
const audienceButtons = document.querySelectorAll('[data-audience]')
|
||||
const heroAudienceText = document.getElementById('heroAudienceText')
|
||||
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 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')
|
||||
|
||||
let cart = []
|
||||
|
||||
const updateAudience = audience => {
|
||||
heroAudienceText.textContent = audienceContent[audience]
|
||||
audienceButtons.forEach(button => {
|
||||
const isActive = button.dataset.audience === audience
|
||||
button.classList.toggle('active', isActive)
|
||||
button.setAttribute('aria-selected', String(isActive))
|
||||
})
|
||||
const typeField = orderForm.elements.customerType
|
||||
typeField.value = audience === 'office' ? 'Для офиса' : 'Для дома'
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
cartDrawer.classList.add('open')
|
||||
cartDrawer.setAttribute('aria-hidden', 'false')
|
||||
document.body.classList.add('modal-open')
|
||||
}
|
||||
|
||||
const closeCart = () => {
|
||||
cartDrawer.classList.remove('open')
|
||||
cartDrawer.setAttribute('aria-hidden', 'true')
|
||||
document.body.classList.remove('modal-open')
|
||||
}
|
||||
|
||||
const openModal = () => {
|
||||
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')
|
||||
}
|
||||
|
||||
const closeModal = () => {
|
||||
modalBackdrop.classList.remove('open')
|
||||
modalBackdrop.setAttribute('aria-hidden', 'true')
|
||||
document.body.classList.remove('modal-open')
|
||||
}
|
||||
|
||||
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()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
audienceButtons.forEach(button => {
|
||||
button.addEventListener('click', () => updateAudience(button.dataset.audience))
|
||||
})
|
||||
|
||||
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', () => {
|
||||
cart.push({
|
||||
name: button.dataset.name,
|
||||
volume: button.dataset.volume,
|
||||
price: Number(button.dataset.price)
|
||||
})
|
||||
renderCart()
|
||||
openCart()
|
||||
})
|
||||
})
|
||||
|
||||
cartOpenButton.addEventListener('click', openCart)
|
||||
mobileCartOpenButton.addEventListener('click', () => {
|
||||
closeMobileMenu()
|
||||
openCart()
|
||||
})
|
||||
cartCloseButton.addEventListener('click', closeCart)
|
||||
checkoutButton.addEventListener('click', () => {
|
||||
closeCart()
|
||||
openModal()
|
||||
})
|
||||
|
||||
orderButtons.forEach(button => {
|
||||
button.addEventListener('click', openModal)
|
||||
})
|
||||
|
||||
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')
|
||||
trigger.addEventListener('click', () => {
|
||||
const isOpen = item.classList.contains('open')
|
||||
faqItems.forEach(entry => {
|
||||
entry.classList.remove('open')
|
||||
entry.querySelector('.faq-question').setAttribute('aria-expanded', 'false')
|
||||
})
|
||||
if (!isOpen) {
|
||||
item.classList.add('open')
|
||||
trigger.setAttribute('aria-expanded', 'true')
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
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()
|
||||
updateAudience('home')
|
||||
Reference in New Issue
Block a user