refactor
This commit is contained in:
BIN
2026-04-19_16-19-23.png
Normal file
BIN
2026-04-19_16-19-23.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
2026-04-19_16-24-26.png
Normal file
BIN
2026-04-19_16-24-26.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 450 KiB |
@@ -1306,7 +1306,6 @@
|
|||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cart-drawer,
|
|
||||||
.modal-backdrop {
|
.modal-backdrop {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
@@ -1316,13 +1315,11 @@
|
|||||||
transition: opacity 0.24s ease;
|
transition: opacity 0.24s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cart-drawer.open,
|
|
||||||
.modal-backdrop.open {
|
.modal-backdrop.open {
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cart-drawer::before,
|
|
||||||
.modal-backdrop::before {
|
.modal-backdrop::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -1331,7 +1328,6 @@
|
|||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cart-panel,
|
|
||||||
.modal-card {
|
.modal-card {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: rgba(255, 255, 255, 0.94);
|
background: rgba(255, 255, 255, 0.94);
|
||||||
@@ -1340,23 +1336,6 @@
|
|||||||
backdrop-filter: blur(24px);
|
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 {
|
.modal-card {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@@ -1371,7 +1350,6 @@
|
|||||||
transform: translate(-50%, -50%) scale(1);
|
transform: translate(-50%, -50%) scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-head,
|
|
||||||
.modal-head {
|
.modal-head {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -1379,7 +1357,6 @@
|
|||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-head h3,
|
|
||||||
.modal-head h3 {
|
.modal-head h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
@@ -1403,84 +1380,6 @@
|
|||||||
font-weight: 800;
|
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 {
|
.success-note {
|
||||||
display: none;
|
display: none;
|
||||||
margin-top: 14px;
|
margin-top: 14px;
|
||||||
@@ -1627,9 +1526,6 @@
|
|||||||
grid-column: auto;
|
grid-column: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cart-actions {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -1,34 +1,16 @@
|
|||||||
const mobileToggle = document.getElementById('mobileToggle')
|
const mobileToggle = document.getElementById('mobileToggle')
|
||||||
const mobilePanel = document.getElementById('mobilePanel')
|
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 modalBackdrop = document.getElementById('orderModal')
|
||||||
const modalCloseButton = document.getElementById('modalCloseButton')
|
const modalCloseButton = document.getElementById('modalCloseButton')
|
||||||
const viewCartButton = document.getElementById('viewCartButton')
|
|
||||||
const checkoutButton = document.getElementById('checkoutButton')
|
|
||||||
const orderButtons = document.querySelectorAll('[data-open-order]')
|
const orderButtons = document.querySelectorAll('[data-open-order]')
|
||||||
const addToCartButtons = document.querySelectorAll('.add-to-cart')
|
|
||||||
const faqItems = document.querySelectorAll('.faq-item')
|
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 orderForm = document.getElementById('orderForm')
|
||||||
const contactForm = document.getElementById('contactForm')
|
const contactForm = document.getElementById('contactForm')
|
||||||
const orderItemsField = document.getElementById('orderItemsField')
|
const orderItemsField = document.getElementById('orderItemsField')
|
||||||
const orderSuccess = document.getElementById('orderSuccess')
|
const orderSuccess = document.getElementById('orderSuccess')
|
||||||
const contactSuccess = document.getElementById('contactSuccess')
|
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 modalCard = modalBackdrop?.querySelector('.modal-card')
|
||||||
|
|
||||||
let cart = []
|
|
||||||
let lastCartTrigger = null
|
|
||||||
let lastModalTrigger = null
|
let lastModalTrigger = null
|
||||||
|
|
||||||
const getFocusableElements = container => {
|
const getFocusableElements = container => {
|
||||||
@@ -49,43 +31,36 @@ const mobileToggle = document.getElementById('mobileToggle')
|
|||||||
}
|
}
|
||||||
|
|
||||||
const openMobileMenu = () => {
|
const openMobileMenu = () => {
|
||||||
|
if (!mobilePanel || !mobileToggle) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
mobilePanel.classList.add('active')
|
mobilePanel.classList.add('active')
|
||||||
mobileToggle.setAttribute('aria-expanded', 'true')
|
mobileToggle.setAttribute('aria-expanded', 'true')
|
||||||
document.body.classList.add('menu-open')
|
document.body.classList.add('menu-open')
|
||||||
}
|
}
|
||||||
|
|
||||||
const closeMobileMenu = () => {
|
const closeMobileMenu = () => {
|
||||||
|
if (!mobilePanel || !mobileToggle) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
mobilePanel.classList.remove('active')
|
mobilePanel.classList.remove('active')
|
||||||
mobileToggle.setAttribute('aria-expanded', 'false')
|
mobileToggle.setAttribute('aria-expanded', 'false')
|
||||||
document.body.classList.remove('menu-open')
|
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 => {
|
const openModal = triggerElement => {
|
||||||
|
if (!modalBackdrop) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
lastModalTrigger = triggerElement || document.activeElement
|
lastModalTrigger = triggerElement || document.activeElement
|
||||||
orderItemsField.value = cart.length
|
|
||||||
? cart.map(item => `${item.name} (${item.volume}) - ${item.price} ₽`).join('\n')
|
if (orderItemsField) {
|
||||||
: ''
|
orderItemsField.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
modalBackdrop.classList.add('open')
|
modalBackdrop.classList.add('open')
|
||||||
modalBackdrop.setAttribute('aria-hidden', 'false')
|
modalBackdrop.setAttribute('aria-hidden', 'false')
|
||||||
document.body.classList.add('modal-open')
|
document.body.classList.add('modal-open')
|
||||||
@@ -93,7 +68,12 @@ const mobileToggle = document.getElementById('mobileToggle')
|
|||||||
}
|
}
|
||||||
|
|
||||||
const closeModal = () => {
|
const closeModal = () => {
|
||||||
|
if (!modalBackdrop) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const shouldRestoreFocus = modalBackdrop.classList.contains('open')
|
const shouldRestoreFocus = modalBackdrop.classList.contains('open')
|
||||||
|
|
||||||
modalBackdrop.classList.remove('open')
|
modalBackdrop.classList.remove('open')
|
||||||
modalBackdrop.setAttribute('aria-hidden', 'true')
|
modalBackdrop.setAttribute('aria-hidden', 'true')
|
||||||
document.body.classList.remove('modal-open')
|
document.body.classList.remove('modal-open')
|
||||||
@@ -105,39 +85,6 @@ const mobileToggle = document.getElementById('mobileToggle')
|
|||||||
lastModalTrigger = null
|
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()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const submitLeadForm = (formElement, successElement, formType, onSuccess) => {
|
const submitLeadForm = (formElement, successElement, formType, onSuccess) => {
|
||||||
if (!formElement || !successElement) {
|
if (!formElement || !successElement) {
|
||||||
return
|
return
|
||||||
@@ -187,110 +134,38 @@ const mobileToggle = document.getElementById('mobileToggle')
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (mobileToggle && mobilePanel) {
|
||||||
mobileToggle.addEventListener('click', () => {
|
mobileToggle.addEventListener('click', () => {
|
||||||
const isOpen = mobilePanel.classList.contains('active')
|
const isOpen = mobilePanel.classList.contains('active')
|
||||||
|
|
||||||
if (isOpen) {
|
if (isOpen) {
|
||||||
closeMobileMenu()
|
closeMobileMenu()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
openMobileMenu()
|
openMobileMenu()
|
||||||
})
|
})
|
||||||
|
|
||||||
document.querySelectorAll('.mobile-nav a').forEach(link => {
|
document.querySelectorAll('.mobile-nav a').forEach(link => {
|
||||||
link.addEventListener('click', closeMobileMenu)
|
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 => {
|
orderButtons.forEach(button => {
|
||||||
button.addEventListener('click', () => openModal(button))
|
button.addEventListener('click', () => openModal(button))
|
||||||
})
|
})
|
||||||
|
|
||||||
|
if (modalCloseButton) {
|
||||||
modalCloseButton.addEventListener('click', closeModal)
|
modalCloseButton.addEventListener('click', closeModal)
|
||||||
|
|
||||||
cartDrawer.addEventListener('click', event => {
|
|
||||||
if (event.target === cartDrawer) {
|
|
||||||
closeCart()
|
|
||||||
}
|
}
|
||||||
})
|
|
||||||
|
|
||||||
|
if (modalBackdrop) {
|
||||||
modalBackdrop.addEventListener('click', event => {
|
modalBackdrop.addEventListener('click', event => {
|
||||||
if (event.target === modalBackdrop) {
|
if (event.target === modalBackdrop) {
|
||||||
closeModal()
|
closeModal()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
faqItems.forEach(item => {
|
faqItems.forEach(item => {
|
||||||
const trigger = item.querySelector('.faq-question')
|
const trigger = item.querySelector('.faq-question')
|
||||||
@@ -302,6 +177,7 @@ const mobileToggle = document.getElementById('mobileToggle')
|
|||||||
|
|
||||||
trigger.addEventListener('click', () => {
|
trigger.addEventListener('click', () => {
|
||||||
const isOpen = item.classList.contains('open')
|
const isOpen = item.classList.contains('open')
|
||||||
|
|
||||||
faqItems.forEach(entry => {
|
faqItems.forEach(entry => {
|
||||||
const entryTrigger = entry.querySelector('.faq-question')
|
const entryTrigger = entry.querySelector('.faq-question')
|
||||||
const entryAnswer = entry.querySelector('.faq-answer')
|
const entryAnswer = entry.querySelector('.faq-answer')
|
||||||
@@ -313,6 +189,7 @@ const mobileToggle = document.getElementById('mobileToggle')
|
|||||||
entryAnswer.hidden = true
|
entryAnswer.hidden = true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
if (!isOpen) {
|
if (!isOpen) {
|
||||||
item.classList.add('open')
|
item.classList.add('open')
|
||||||
trigger.setAttribute('aria-expanded', 'true')
|
trigger.setAttribute('aria-expanded', 'true')
|
||||||
@@ -322,8 +199,6 @@ const mobileToggle = document.getElementById('mobileToggle')
|
|||||||
})
|
})
|
||||||
|
|
||||||
submitLeadForm(orderForm, orderSuccess, 'landing_order', () => {
|
submitLeadForm(orderForm, orderSuccess, 'landing_order', () => {
|
||||||
cart = []
|
|
||||||
renderCart()
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
closeModal()
|
closeModal()
|
||||||
}, 700)
|
}, 700)
|
||||||
@@ -335,9 +210,7 @@ const mobileToggle = document.getElementById('mobileToggle')
|
|||||||
if (event.key !== 'Escape') {
|
if (event.key !== 'Escape') {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
closeCart()
|
|
||||||
closeModal()
|
closeModal()
|
||||||
closeMobileMenu()
|
closeMobileMenu()
|
||||||
})
|
})
|
||||||
|
|
||||||
renderCart()
|
|
||||||
|
|||||||
@@ -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' ) ) {
|
if ( is_page( 'faq' ) ) {
|
||||||
|
|||||||
@@ -50,6 +50,8 @@ function twentytwentyfour_test1_catalog_markup() {
|
|||||||
if ( '' === $volume ) {
|
if ( '' === $volume ) {
|
||||||
$volume = __( 'Товар', 'twentytwentyfour' );
|
$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 ); ?>">
|
<article class="catalog-card reveal<?php echo esc_attr( $delay_class ); ?>">
|
||||||
<?php if ( $image_html ) : ?>
|
<?php if ( $image_html ) : ?>
|
||||||
@@ -66,14 +68,18 @@ function twentytwentyfour_test1_catalog_markup() {
|
|||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-price"><strong><?php echo esc_html( $price ); ?></strong></div>
|
<div class="card-price"><strong><?php echo esc_html( $price ); ?></strong></div>
|
||||||
<button
|
<?php if ( $product->is_purchasable() && $product->is_in_stock() ) : ?>
|
||||||
class="mini-button add-to-cart"
|
<a
|
||||||
data-product-id="<?php echo esc_attr( (string) $product->get_id() ); ?>"
|
class="mini-button add_to_cart_button product_type_<?php echo esc_attr( $product->get_type() ); ?>"
|
||||||
data-name="<?php echo esc_attr( $product->get_name() ); ?>"
|
href="<?php echo esc_url( $add_to_cart_url ); ?>"
|
||||||
data-volume="<?php echo esc_attr( $volume ); ?>"
|
data-product_id="<?php echo esc_attr( (string) $product->get_id() ); ?>"
|
||||||
data-price="<?php echo esc_attr( (string) wc_get_price_to_display( $product ) ); ?>"
|
data-quantity="1"
|
||||||
type="button"
|
rel="nofollow"
|
||||||
><?php esc_html_e( 'Добавить в корзину', 'twentytwentyfour' ); ?></button>
|
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>
|
</article>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
@@ -183,7 +189,7 @@ get_header( 'test1' );
|
|||||||
<span class="chip">для кулера</span>
|
<span class="chip">для кулера</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-price"><strong>290 ₽</strong><span>за бутыль</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>
|
||||||
|
|
||||||
<article class="catalog-card reveal reveal-delay-1">
|
<article class="catalog-card reveal reveal-delay-1">
|
||||||
@@ -195,7 +201,7 @@ get_header( 'test1' );
|
|||||||
<span class="chip">компактно</span>
|
<span class="chip">компактно</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-price"><strong>95 ₽</strong><span>за бутылку</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>
|
||||||
|
|
||||||
<article class="catalog-card reveal reveal-delay-2">
|
<article class="catalog-card reveal reveal-delay-2">
|
||||||
@@ -207,7 +213,7 @@ get_header( 'test1' );
|
|||||||
<span class="chip">мероприятия</span>
|
<span class="chip">мероприятия</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-price"><strong>39 ₽</strong><span>от 0.5 л</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>
|
||||||
|
|
||||||
<article class="catalog-card reveal reveal-delay-3">
|
<article class="catalog-card reveal reveal-delay-3">
|
||||||
@@ -219,7 +225,7 @@ get_header( 'test1' );
|
|||||||
<span class="chip">рестораны</span>
|
<span class="chip">рестораны</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-price"><strong>68 ₽</strong><span>за 1.5 л</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>
|
||||||
|
|
||||||
<article class="catalog-card reveal reveal-delay-4">
|
<article class="catalog-card reveal reveal-delay-4">
|
||||||
@@ -231,7 +237,7 @@ get_header( 'test1' );
|
|||||||
<span class="chip">на выбор</span>
|
<span class="chip">на выбор</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-price"><strong>45 ₽</strong><span>за 0.5 л</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>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
<?php
|
<?php
|
||||||
@@ -263,7 +269,7 @@ get_header( 'test1' );
|
|||||||
<span>19 л, мягкий вкус, ежедневное потребление</span>
|
<span>19 л, мягкий вкус, ежедневное потребление</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="price">290 ₽</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>
|
||||||
<div class="product-row">
|
<div class="product-row">
|
||||||
<div>
|
<div>
|
||||||
@@ -271,7 +277,7 @@ get_header( 'test1' );
|
|||||||
<span>19 л, артезианская вода, усиленный контроль</span>
|
<span>19 л, артезианская вода, усиленный контроль</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="price">340 ₽</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>
|
||||||
<div class="product-row">
|
<div class="product-row">
|
||||||
<div>
|
<div>
|
||||||
@@ -279,7 +285,7 @@ get_header( 'test1' );
|
|||||||
<span>2 бутыли 19 л + помпа для первого заказа</span>
|
<span>2 бутыли 19 л + помпа для первого заказа</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="price">690 ₽</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -687,32 +693,6 @@ get_header( 'test1' );
|
|||||||
</section>
|
</section>
|
||||||
</main>
|
</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-backdrop" id="orderModal" aria-hidden="true">
|
||||||
<div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="orderModalTitle">
|
<div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="orderModalTitle">
|
||||||
<div class="modal-head">
|
<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';
|
$test1_header_mode = isset( $test1_header_mode ) ? $test1_header_mode : 'link';
|
||||||
$posts_page_id = (int) get_option( 'page_for_posts' );
|
$posts_page_id = (int) get_option( 'page_for_posts' );
|
||||||
$blog_url = $posts_page_id > 0 ? get_permalink( $posts_page_id ) : home_url( '/blog/' );
|
$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 ) {
|
if ( ! $blog_url ) {
|
||||||
$blog_url = home_url( '/blog/' );
|
$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>
|
<span aria-hidden="true">+7 (911) 774-89-23</span>
|
||||||
</a>
|
</a>
|
||||||
<?php if ( 'cart' === $test1_header_mode ) : ?>
|
<?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 aria-hidden="true">Корзина</span>
|
||||||
<span class="cart-count" id="cartCount" aria-live="polite" aria-atomic="true">0</span>
|
<span class="cart-count" aria-live="polite" aria-atomic="true"><?php echo esc_html( (string) $cart_count ); ?></span>
|
||||||
</button>
|
</a>
|
||||||
<button class="mobile-toggle" id="mobileToggle" aria-label="Открыть меню" aria-expanded="false" aria-controls="mobilePanel">
|
<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">
|
<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"/>
|
<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>
|
<a href="<?php echo esc_url( home_url( '/contacts/' ) ); ?>">Контакты</a>
|
||||||
</nav>
|
</nav>
|
||||||
<a class="header-phone" href="tel:+79117748923">+7 (911) 774-89-23</a>
|
<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>Корзина</span>
|
||||||
<span class="cart-count" id="mobileCartCount" aria-live="polite" aria-atomic="true">0</span>
|
<span class="cart-count" aria-live="polite" aria-atomic="true"><?php echo esc_html( (string) $cart_count ); ?></span>
|
||||||
</button>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|||||||
Reference in New Issue
Block a user