refactor
This commit is contained in:
@@ -1306,7 +1306,6 @@
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.cart-drawer,
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -1316,13 +1315,11 @@
|
||||
transition: opacity 0.24s ease;
|
||||
}
|
||||
|
||||
.cart-drawer.open,
|
||||
.modal-backdrop.open {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cart-drawer::before,
|
||||
.modal-backdrop::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -1331,7 +1328,6 @@
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.cart-panel,
|
||||
.modal-card {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
@@ -1340,23 +1336,6 @@
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
.cart-panel {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: min(440px, 100%);
|
||||
height: 100%;
|
||||
padding: 22px;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
gap: 16px;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.28s ease;
|
||||
}
|
||||
|
||||
.cart-drawer.open .cart-panel {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -1371,7 +1350,6 @@
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
.drawer-head,
|
||||
.modal-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -1379,7 +1357,6 @@
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.drawer-head h3,
|
||||
.modal-head h3 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
@@ -1403,84 +1380,6 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.cart-list {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 12px;
|
||||
overflow: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
border: 1px solid rgba(18, 48, 89, 0.08);
|
||||
}
|
||||
|
||||
.cart-item strong {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.cart-item span {
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cart-item button {
|
||||
justify-self: end;
|
||||
color: #d53b5c;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.cart-summary {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 18px;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(135deg, rgba(13, 79, 214, 0.08), rgba(60, 200, 255, 0.12));
|
||||
border: 1px solid rgba(18, 48, 89, 0.08);
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.summary-row strong {
|
||||
font-size: 28px;
|
||||
color: var(--primary-strong);
|
||||
}
|
||||
|
||||
.cart-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.cart-actions .ghost-button,
|
||||
.cart-actions .button {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 20px;
|
||||
border-radius: 22px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 1px dashed rgba(18, 48, 89, 0.14);
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.success-note {
|
||||
display: none;
|
||||
margin-top: 14px;
|
||||
@@ -1627,9 +1526,6 @@
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.cart-actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -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()
|
||||
})
|
||||
|
||||
@@ -503,17 +503,6 @@ function twentytwentyfour_test1_assets() {
|
||||
)
|
||||
);
|
||||
|
||||
if ( class_exists( 'WooCommerce' ) ) {
|
||||
wp_localize_script(
|
||||
'twentytwentyfour-test1-script',
|
||||
'test1WooCommerce',
|
||||
array(
|
||||
'addToCartUrl' => WC_AJAX::get_endpoint( 'add_to_cart' ),
|
||||
'cartUrl' => wc_get_cart_url(),
|
||||
'checkoutUrl' => wc_get_checkout_url(),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if ( is_page( 'faq' ) ) {
|
||||
|
||||
@@ -50,6 +50,8 @@ function twentytwentyfour_test1_catalog_markup() {
|
||||
if ( '' === $volume ) {
|
||||
$volume = __( 'Товар', 'twentytwentyfour' );
|
||||
}
|
||||
$add_to_cart_url = $product->add_to_cart_url();
|
||||
$add_to_cart_text = $product->add_to_cart_text();
|
||||
?>
|
||||
<article class="catalog-card reveal<?php echo esc_attr( $delay_class ); ?>">
|
||||
<?php if ( $image_html ) : ?>
|
||||
@@ -66,14 +68,18 @@ function twentytwentyfour_test1_catalog_markup() {
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="card-price"><strong><?php echo esc_html( $price ); ?></strong></div>
|
||||
<button
|
||||
class="mini-button add-to-cart"
|
||||
data-product-id="<?php echo esc_attr( (string) $product->get_id() ); ?>"
|
||||
data-name="<?php echo esc_attr( $product->get_name() ); ?>"
|
||||
data-volume="<?php echo esc_attr( $volume ); ?>"
|
||||
data-price="<?php echo esc_attr( (string) wc_get_price_to_display( $product ) ); ?>"
|
||||
type="button"
|
||||
><?php esc_html_e( 'Добавить в корзину', 'twentytwentyfour' ); ?></button>
|
||||
<?php if ( $product->is_purchasable() && $product->is_in_stock() ) : ?>
|
||||
<a
|
||||
class="mini-button add_to_cart_button product_type_<?php echo esc_attr( $product->get_type() ); ?>"
|
||||
href="<?php echo esc_url( $add_to_cart_url ); ?>"
|
||||
data-product_id="<?php echo esc_attr( (string) $product->get_id() ); ?>"
|
||||
data-quantity="1"
|
||||
rel="nofollow"
|
||||
aria-label="<?php echo esc_attr( sprintf( __( 'Добавить в корзину: %s', 'twentytwentyfour' ), $product->get_name() ) ); ?>"
|
||||
><?php echo esc_html( $add_to_cart_text ); ?></a>
|
||||
<?php else : ?>
|
||||
<a class="mini-button" href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"><?php esc_html_e( 'Подробнее', 'twentytwentyfour' ); ?></a>
|
||||
<?php endif; ?>
|
||||
</article>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
@@ -183,7 +189,7 @@ get_header( 'test1' );
|
||||
<span class="chip">для кулера</span>
|
||||
</div>
|
||||
<div class="card-price"><strong>290 ₽</strong><span>за бутыль</span></div>
|
||||
<button class="mini-button add-to-cart" data-name="Вода артезианская 19 л" data-volume="19 л" data-price="290">Добавить в корзину</button>
|
||||
<a class="mini-button" href="<?php echo esc_url( home_url( '/shop/' ) ); ?>">В каталог</a>
|
||||
</article>
|
||||
|
||||
<article class="catalog-card reveal reveal-delay-1">
|
||||
@@ -195,7 +201,7 @@ get_header( 'test1' );
|
||||
<span class="chip">компактно</span>
|
||||
</div>
|
||||
<div class="card-price"><strong>95 ₽</strong><span>за бутылку</span></div>
|
||||
<button class="mini-button add-to-cart" data-name="Питьевая вода 5 л" data-volume="5 л" data-price="95">Добавить в корзину</button>
|
||||
<a class="mini-button" href="<?php echo esc_url( home_url( '/shop/' ) ); ?>">В каталог</a>
|
||||
</article>
|
||||
|
||||
<article class="catalog-card reveal reveal-delay-2">
|
||||
@@ -207,7 +213,7 @@ get_header( 'test1' );
|
||||
<span class="chip">мероприятия</span>
|
||||
</div>
|
||||
<div class="card-price"><strong>39 ₽</strong><span>от 0.5 л</span></div>
|
||||
<button class="mini-button add-to-cart" data-name="Питьевая вода 1.5 л" data-volume="1.5 л" data-price="49">Добавить в корзину</button>
|
||||
<a class="mini-button" href="<?php echo esc_url( home_url( '/shop/' ) ); ?>">В каталог</a>
|
||||
</article>
|
||||
|
||||
<article class="catalog-card reveal reveal-delay-3">
|
||||
@@ -219,7 +225,7 @@ get_header( 'test1' );
|
||||
<span class="chip">рестораны</span>
|
||||
</div>
|
||||
<div class="card-price"><strong>68 ₽</strong><span>за 1.5 л</span></div>
|
||||
<button class="mini-button add-to-cart" data-name="Минеральная вода 1.5 л" data-volume="1.5 л" data-price="68">Добавить в корзину</button>
|
||||
<a class="mini-button" href="<?php echo esc_url( home_url( '/shop/' ) ); ?>">В каталог</a>
|
||||
</article>
|
||||
|
||||
<article class="catalog-card reveal reveal-delay-4">
|
||||
@@ -231,7 +237,7 @@ get_header( 'test1' );
|
||||
<span class="chip">на выбор</span>
|
||||
</div>
|
||||
<div class="card-price"><strong>45 ₽</strong><span>за 0.5 л</span></div>
|
||||
<button class="mini-button add-to-cart" data-name="Газированная вода 0.5 л" data-volume="0.5 л" data-price="45">Добавить в корзину</button>
|
||||
<a class="mini-button" href="<?php echo esc_url( home_url( '/shop/' ) ); ?>">В каталог</a>
|
||||
</article>
|
||||
</div>
|
||||
<?php
|
||||
@@ -263,7 +269,7 @@ get_header( 'test1' );
|
||||
<span>19 л, мягкий вкус, ежедневное потребление</span>
|
||||
</div>
|
||||
<div class="price">290 ₽</div>
|
||||
<button class="mini-button add-to-cart" data-name="АкваЛиния Классик" data-volume="19 л" data-price="290">Заказать</button>
|
||||
<a class="mini-button" href="<?php echo esc_url( home_url( '/shop/' ) ); ?>">В каталог</a>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<div>
|
||||
@@ -271,7 +277,7 @@ get_header( 'test1' );
|
||||
<span>19 л, артезианская вода, усиленный контроль</span>
|
||||
</div>
|
||||
<div class="price">340 ₽</div>
|
||||
<button class="mini-button add-to-cart" data-name="АкваЛиния Премиум" data-volume="19 л" data-price="340">Заказать</button>
|
||||
<a class="mini-button" href="<?php echo esc_url( home_url( '/shop/' ) ); ?>">В каталог</a>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<div>
|
||||
@@ -279,7 +285,7 @@ get_header( 'test1' );
|
||||
<span>2 бутыли 19 л + помпа для первого заказа</span>
|
||||
</div>
|
||||
<div class="price">690 ₽</div>
|
||||
<button class="mini-button add-to-cart" data-name="Стартовый комплект 19 л + помпа" data-volume="2 x 19 л" data-price="690">Заказать</button>
|
||||
<a class="mini-button" href="<?php echo esc_url( home_url( '/shop/' ) ); ?>">В каталог</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -687,32 +693,6 @@ get_header( 'test1' );
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="cart-drawer" id="cartDrawer" aria-hidden="true">
|
||||
<div class="cart-panel" role="dialog" aria-modal="true" aria-labelledby="cartTitle">
|
||||
<div class="drawer-head">
|
||||
<div>
|
||||
<h3 id="cartTitle">Корзина</h3>
|
||||
<p class="dialog-copy">Проверьте состав заказа и переходите к оформлению.</p>
|
||||
</div>
|
||||
<button class="close-button" id="cartCloseButton" aria-label="Закрыть корзину">×</button>
|
||||
</div>
|
||||
|
||||
<div class="cart-summary">
|
||||
<div class="summary-row"><span>Товаров</span><span id="cartItemsCount" aria-live="polite" aria-atomic="true">0</span></div>
|
||||
<div class="summary-row"><span>Сумма</span><strong id="cartTotal" aria-live="polite" aria-atomic="true">0 ₽</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="cart-list" id="cartList">
|
||||
<div class="empty-state">Корзина пока пуста. Добавьте нужные позиции из каталога и переходите к оформлению.</div>
|
||||
</div>
|
||||
|
||||
<div class="cart-actions">
|
||||
<button class="ghost-button" id="viewCartButton">Смотреть корзину</button>
|
||||
<button class="button" id="checkoutButton">Оформить заказ</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-backdrop" id="orderModal" aria-hidden="true">
|
||||
<div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="orderModalTitle">
|
||||
<div class="modal-head">
|
||||
|
||||
@@ -10,6 +10,12 @@ $test1_header_action_label = isset( $test1_header_action_label ) ? $test1_header
|
||||
$test1_header_mode = isset( $test1_header_mode ) ? $test1_header_mode : 'link';
|
||||
$posts_page_id = (int) get_option( 'page_for_posts' );
|
||||
$blog_url = $posts_page_id > 0 ? get_permalink( $posts_page_id ) : home_url( '/blog/' );
|
||||
$cart_url = function_exists( 'wc_get_cart_url' ) ? wc_get_cart_url() : home_url( '/cart/' );
|
||||
$cart_count = 0;
|
||||
|
||||
if ( function_exists( 'WC' ) && WC()->cart ) {
|
||||
$cart_count = (int) WC()->cart->get_cart_contents_count();
|
||||
}
|
||||
|
||||
if ( ! $blog_url ) {
|
||||
$blog_url = home_url( '/blog/' );
|
||||
@@ -47,10 +53,10 @@ $blog_is_active = is_home() || is_singular( 'post' ) || is_category() || is_tag(
|
||||
<span aria-hidden="true">+7 (911) 774-89-23</span>
|
||||
</a>
|
||||
<?php if ( 'cart' === $test1_header_mode ) : ?>
|
||||
<button class="cart-button" id="cartOpenButton" aria-label="Открыть корзину">
|
||||
<a class="cart-button" href="<?php echo esc_url( $cart_url ); ?>" aria-label="Перейти в корзину">
|
||||
<span aria-hidden="true">Корзина</span>
|
||||
<span class="cart-count" id="cartCount" aria-live="polite" aria-atomic="true">0</span>
|
||||
</button>
|
||||
<span class="cart-count" aria-live="polite" aria-atomic="true"><?php echo esc_html( (string) $cart_count ); ?></span>
|
||||
</a>
|
||||
<button class="mobile-toggle" id="mobileToggle" aria-label="Открыть меню" aria-expanded="false" aria-controls="mobilePanel">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M4 7H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
@@ -76,10 +82,10 @@ $blog_is_active = is_home() || is_singular( 'post' ) || is_category() || is_tag(
|
||||
<a href="<?php echo esc_url( home_url( '/contacts/' ) ); ?>">Контакты</a>
|
||||
</nav>
|
||||
<a class="header-phone" href="tel:+79117748923">+7 (911) 774-89-23</a>
|
||||
<button class="cart-button" id="mobileCartOpenButton" aria-label="Открыть корзину с мобильного меню">
|
||||
<a class="cart-button" href="<?php echo esc_url( $cart_url ); ?>" aria-label="Перейти в корзину с мобильного меню">
|
||||
<span>Корзина</span>
|
||||
<span class="cart-count" id="mobileCartCount" aria-live="polite" aria-atomic="true">0</span>
|
||||
</button>
|
||||
<span class="cart-count" aria-live="polite" aria-atomic="true"><?php echo esc_html( (string) $cart_count ); ?></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
Reference in New Issue
Block a user