Anton | настройка cart
This commit is contained in:
16
index3.css
16
index3.css
@@ -1316,6 +1316,18 @@
|
|||||||
color: var(--primary-strong);
|
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 {
|
.empty-state {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 22px;
|
border-radius: 22px;
|
||||||
@@ -1449,4 +1461,8 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cart-actions {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -717,9 +717,12 @@
|
|||||||
<div class="empty-state">Корзина пока пуста. Добавьте воду 19 литров, компактные форматы или минеральную воду из каталога.</div>
|
<div class="empty-state">Корзина пока пуста. Добавьте воду 19 литров, компактные форматы или минеральную воду из каталога.</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="cart-actions">
|
||||||
|
<button class="ghost-button" id="viewCartButton">Смотреть корзину</button>
|
||||||
<button class="button" id="checkoutButton">Оформить заказ</button>
|
<button class="button" id="checkoutButton">Оформить заказ</button>
|
||||||
</div>
|
</div>
|
||||||
</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">
|
||||||
|
|||||||
15
index3.js
15
index3.js
@@ -13,6 +13,7 @@ const audienceContent = {
|
|||||||
const cartCloseButton = document.getElementById('cartCloseButton')
|
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 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 addToCartButtons = document.querySelectorAll('.add-to-cart')
|
||||||
@@ -166,7 +167,14 @@ const audienceContent = {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
window.location.href = wooCommerceConfig.checkoutUrl
|
cart.push({
|
||||||
|
name: button.dataset.name,
|
||||||
|
volume: button.dataset.volume,
|
||||||
|
price: Number(button.dataset.price)
|
||||||
|
})
|
||||||
|
renderCart()
|
||||||
|
openCart()
|
||||||
|
button.disabled = false
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
button.disabled = false
|
button.disabled = false
|
||||||
@@ -191,6 +199,11 @@ const audienceContent = {
|
|||||||
openCart()
|
openCart()
|
||||||
})
|
})
|
||||||
cartCloseButton.addEventListener('click', closeCart)
|
cartCloseButton.addEventListener('click', closeCart)
|
||||||
|
viewCartButton.addEventListener('click', () => {
|
||||||
|
if (wooCommerceConfig && wooCommerceConfig.cartUrl) {
|
||||||
|
window.location.href = wooCommerceConfig.cartUrl
|
||||||
|
}
|
||||||
|
})
|
||||||
checkoutButton.addEventListener('click', () => {
|
checkoutButton.addEventListener('click', () => {
|
||||||
if (wooCommerceConfig && wooCommerceConfig.checkoutUrl) {
|
if (wooCommerceConfig && wooCommerceConfig.checkoutUrl) {
|
||||||
window.location.href = wooCommerceConfig.checkoutUrl
|
window.location.href = wooCommerceConfig.checkoutUrl
|
||||||
|
|||||||
@@ -2,58 +2,59 @@
|
|||||||
--checkout-max-width: 1180px;
|
--checkout-max-width: 1180px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.test1-checkout-page {
|
body:is(.test1-checkout-page, .test1-cart-page) {
|
||||||
min-width: 320px;
|
min-width: 320px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .checkout-shell {
|
:is(.test1-checkout-page, .test1-cart-page) .checkout-shell {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 28px;
|
gap: 28px;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .checkout-intro {
|
:is(.test1-checkout-page, .test1-cart-page) .checkout-intro {
|
||||||
max-width: 780px;
|
max-width: 780px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .checkout-card {
|
:is(.test1-checkout-page, .test1-cart-page) .checkout-card {
|
||||||
padding: clamp(22px, 3vw, 36px);
|
padding: clamp(22px, 3vw, 36px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .checkout-back-link {
|
:is(.test1-checkout-page, .test1-cart-page) .checkout-back-link {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .entry-content,
|
:is(.test1-checkout-page, .test1-cart-page) .entry-content,
|
||||||
.test1-checkout-page .woocommerce,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce,
|
||||||
.test1-checkout-page .wc-block-checkout,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout,
|
||||||
.test1-checkout-page .wc-block-cart,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart,
|
||||||
.test1-checkout-page .is-large {
|
:is(.test1-checkout-page, .test1-cart-page) .is-large {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .woocommerce {
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce {
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .woocommerce a,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce a,
|
||||||
.test1-checkout-page .wc-block-components-text-input input,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input input,
|
||||||
.test1-checkout-page .wc-block-components-combobox .components-combobox-control__input,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-combobox .components-combobox-control__input,
|
||||||
.test1-checkout-page .wc-block-components-textarea,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-textarea,
|
||||||
.test1-checkout-page .wc-block-components-text-input label,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input label,
|
||||||
.test1-checkout-page .wc-block-components-checkbox label {
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkbox label {
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .woocommerce form .form-row input.input-text,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row input.input-text,
|
||||||
.test1-checkout-page .woocommerce form .form-row textarea,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row textarea,
|
||||||
.test1-checkout-page .woocommerce form .form-row select,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row select,
|
||||||
.test1-checkout-page .wc-block-components-text-input input,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input input,
|
||||||
.test1-checkout-page .wc-block-components-text-input select,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input select,
|
||||||
.test1-checkout-page .wc-block-components-textarea textarea,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-textarea textarea,
|
||||||
.test1-checkout-page .components-text-control__input,
|
:is(.test1-checkout-page, .test1-cart-page) .components-text-control__input,
|
||||||
.test1-checkout-page .components-form-token-field__input,
|
:is(.test1-checkout-page, .test1-cart-page) .components-form-token-field__input,
|
||||||
.test1-checkout-page .components-combobox-control__input {
|
:is(.test1-checkout-page, .test1-cart-page) .components-combobox-control__input,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .coupon #coupon_code {
|
||||||
min-height: 56px;
|
min-height: 56px;
|
||||||
padding: 14px 16px;
|
padding: 14px 16px;
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
@@ -62,54 +63,63 @@ body.test1-checkout-page {
|
|||||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .woocommerce form .form-row textarea,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row textarea,
|
||||||
.test1-checkout-page .wc-block-components-textarea textarea {
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-textarea textarea {
|
||||||
min-height: 120px;
|
min-height: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .woocommerce-checkout #payment,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment,
|
||||||
.test1-checkout-page .woocommerce-billing-fields,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields,
|
||||||
.test1-checkout-page .woocommerce-additional-fields,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields,
|
||||||
.test1-checkout-page #order_review,
|
:is(.test1-checkout-page, .test1-cart-page) #order_review,
|
||||||
.test1-checkout-page .wc-block-components-sidebar,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-sidebar,
|
||||||
.test1-checkout-page .wc-block-components-totals-wrapper,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-totals-wrapper,
|
||||||
.test1-checkout-page .wc-block-checkout__main,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__main,
|
||||||
.test1-checkout-page .wc-block-checkout__sidebar,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__sidebar,
|
||||||
.test1-checkout-page .wc-block-components-checkout-step,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkout-step,
|
||||||
.test1-checkout-page .wc-block-components-order-summary,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-order-summary,
|
||||||
.test1-checkout-page .wc-block-components-totals-coupon,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-totals-coupon,
|
||||||
.test1-checkout-page .wc-block-components-shipping-rates-control,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-shipping-rates-control,
|
||||||
.test1-checkout-page .wc-block-components-address-form {
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-address-form,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .cart_totals,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals {
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.72);
|
border: 1px solid rgba(255, 255, 255, 0.72);
|
||||||
background: rgba(255, 255, 255, 0.76);
|
background: rgba(255, 255, 255, 0.76);
|
||||||
box-shadow: 0 30px 80px rgba(10, 43, 109, 0.12);
|
box-shadow: 0 30px 80px rgba(10, 43, 109, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .woocommerce-checkout #payment,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment,
|
||||||
.test1-checkout-page .woocommerce-billing-fields,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields,
|
||||||
.test1-checkout-page .woocommerce-additional-fields,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields,
|
||||||
.test1-checkout-page #order_review {
|
:is(.test1-checkout-page, .test1-cart-page) #order_review,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .cart_totals,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals {
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .woocommerce form .form-row {
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .woocommerce form .form-row label,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row label,
|
||||||
.test1-checkout-page .wc-block-components-text-input label,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input label,
|
||||||
.test1-checkout-page .wc-block-components-checkbox label,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkbox label,
|
||||||
.test1-checkout-page .wc-block-components-radio-control__option-label {
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-radio-control__option-label {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .woocommerce button.button,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce button.button,
|
||||||
.test1-checkout-page .woocommerce #payment #place_order,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce #payment #place_order,
|
||||||
.test1-checkout-page .wc-block-components-button,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-button,
|
||||||
.test1-checkout-page .wc-block-cart__submit-button,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart__submit-button,
|
||||||
.test1-checkout-page .wc-block-components-checkout-place-order-button {
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkout-place-order-button,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .checkout-button,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .actions .button,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .coupon .button {
|
||||||
min-height: 56px;
|
min-height: 56px;
|
||||||
padding: 16px 22px;
|
padding: 16px 22px;
|
||||||
border: 0;
|
border: 0;
|
||||||
@@ -120,93 +130,148 @@ body.test1-checkout-page {
|
|||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .woocommerce button.button:hover,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce button.button:hover,
|
||||||
.test1-checkout-page .woocommerce #payment #place_order:hover,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce #payment #place_order:hover,
|
||||||
.test1-checkout-page .wc-block-components-button:hover,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-button:hover,
|
||||||
.test1-checkout-page .wc-block-cart__submit-button:hover,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart__submit-button:hover,
|
||||||
.test1-checkout-page .wc-block-components-checkout-place-order-button:hover {
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkout-place-order-button:hover,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .checkout-button:hover,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .actions .button:hover,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .coupon .button:hover {
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
filter: brightness(1.03);
|
filter: brightness(1.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page table.shop_table,
|
:is(.test1-checkout-page, .test1-cart-page) table.shop_table,
|
||||||
.test1-checkout-page .wc-block-components-order-summary-item,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-order-summary-item,
|
||||||
.test1-checkout-page .wc-block-components-product-name {
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-product-name {
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page table.shop_table td,
|
:is(.test1-checkout-page, .test1-cart-page) table.shop_table {
|
||||||
.test1-checkout-page table.shop_table th,
|
overflow: hidden;
|
||||||
.test1-checkout-page .woocommerce-checkout-review-order-table th,
|
border-radius: 18px;
|
||||||
.test1-checkout-page .woocommerce-checkout-review-order-table td {
|
border-collapse: separate;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) table.shop_table td,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) table.shop_table th,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout-review-order-table th,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout-review-order-table td {
|
||||||
border-color: rgba(18, 48, 89, 0.1);
|
border-color: rgba(18, 48, 89, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .woocommerce-info,
|
:is(.test1-checkout-page, .test1-cart-page) .shop_table thead th {
|
||||||
.test1-checkout-page .woocommerce-message,
|
font-weight: 800;
|
||||||
.test1-checkout-page .woocommerce-error,
|
}
|
||||||
.test1-checkout-page .wc-block-components-notice-banner {
|
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .cart_item img {
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .product-remove a.remove {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(213, 59, 92, 0.08);
|
||||||
|
color: #d53b5c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-info,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-message,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-error,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-notice-banner {
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
border: 1px solid rgba(18, 48, 89, 0.1);
|
border: 1px solid rgba(18, 48, 89, 0.1);
|
||||||
background: rgba(255, 255, 255, 0.84);
|
background: rgba(255, 255, 255, 0.84);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .select2-container--default .select2-selection--single,
|
:is(.test1-checkout-page, .test1-cart-page) .select2-container--default .select2-selection--single,
|
||||||
.test1-checkout-page .select2-container--default .select2-selection--multiple {
|
:is(.test1-checkout-page, .test1-cart-page) .select2-container--default .select2-selection--multiple {
|
||||||
min-height: 56px;
|
min-height: 56px;
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
border: 1px solid rgba(18, 48, 89, 0.14);
|
border: 1px solid rgba(18, 48, 89, 0.14);
|
||||||
background: rgba(255, 255, 255, 0.9);
|
background: rgba(255, 255, 255, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .woocommerce-checkout-review-order-table,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout-review-order-table,
|
||||||
.test1-checkout-page #add_payment_method #payment div.payment_box,
|
:is(.test1-checkout-page, .test1-cart-page) #add_payment_method #payment div.payment_box,
|
||||||
.test1-checkout-page .woocommerce-cart #payment div.payment_box,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart #payment div.payment_box,
|
||||||
.test1-checkout-page .woocommerce-checkout #payment div.payment_box {
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment div.payment_box {
|
||||||
background: rgba(219, 246, 255, 0.45);
|
background: rgba(219, 246, 255, 0.45);
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .wc-block-components-sidebar-layout {
|
:is(.test1-checkout-page, .test1-cart-page) .coupon {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .cart_totals {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .wc-proceed-to-checkout {
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-sidebar-layout {
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .wc-block-checkout__main,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__main,
|
||||||
.test1-checkout-page .wc-block-checkout__sidebar {
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__sidebar {
|
||||||
padding: 22px;
|
padding: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.test1-checkout-page .checkout-shell {
|
:is(.test1-checkout-page, .test1-cart-page) .checkout-shell {
|
||||||
grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
|
grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 781px) {
|
@media (max-width: 781px) {
|
||||||
.test1-checkout-page .header-row,
|
:is(.test1-checkout-page, .test1-cart-page) .header-row,
|
||||||
.test1-checkout-page .header-actions {
|
:is(.test1-checkout-page, .test1-cart-page) .header-actions {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .header-actions {
|
:is(.test1-checkout-page, .test1-cart-page) .header-actions {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: stretch;
|
justify-content: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .header-actions > * {
|
:is(.test1-checkout-page, .test1-cart-page) .header-actions > * {
|
||||||
flex: 1 1 100%;
|
flex: 1 1 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test1-checkout-page .checkout-card,
|
:is(.test1-checkout-page, .test1-cart-page) .checkout-card,
|
||||||
.test1-checkout-page .woocommerce-checkout #payment,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment,
|
||||||
.test1-checkout-page .woocommerce-billing-fields,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields,
|
||||||
.test1-checkout-page .woocommerce-additional-fields,
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields,
|
||||||
.test1-checkout-page #order_review,
|
:is(.test1-checkout-page, .test1-cart-page) #order_review,
|
||||||
.test1-checkout-page .wc-block-checkout__main,
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__main,
|
||||||
.test1-checkout-page .wc-block-checkout__sidebar {
|
:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__sidebar,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .cart_totals,
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals {
|
||||||
padding: 18px;
|
padding: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:is(.test1-checkout-page, .test1-cart-page) .coupon {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -251,6 +251,29 @@ function twentytwentyfour_checkout_template( $template ) {
|
|||||||
}
|
}
|
||||||
add_filter( 'template_include', 'twentytwentyfour_checkout_template', 20 );
|
add_filter( 'template_include', 'twentytwentyfour_checkout_template', 20 );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Use a standalone PHP template for the WooCommerce cart page.
|
||||||
|
*
|
||||||
|
* @since Twenty Twenty-Four 1.0
|
||||||
|
*
|
||||||
|
* @param string $template Resolved template path.
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
function twentytwentyfour_cart_template( $template ) {
|
||||||
|
if ( ! function_exists( 'is_cart' ) || ! is_cart() ) {
|
||||||
|
return $template;
|
||||||
|
}
|
||||||
|
|
||||||
|
$custom_template = get_theme_file_path( 'page-cart.php' );
|
||||||
|
|
||||||
|
if ( file_exists( $custom_template ) ) {
|
||||||
|
return $custom_template;
|
||||||
|
}
|
||||||
|
|
||||||
|
return $template;
|
||||||
|
}
|
||||||
|
add_filter( 'template_include', 'twentytwentyfour_cart_template', 20 );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Enqueue standalone landing assets for the page slug "test1".
|
* Enqueue standalone landing assets for the page slug "test1".
|
||||||
*
|
*
|
||||||
@@ -258,7 +281,9 @@ add_filter( 'template_include', 'twentytwentyfour_checkout_template', 20 );
|
|||||||
* @return void
|
* @return void
|
||||||
*/
|
*/
|
||||||
function twentytwentyfour_test1_assets() {
|
function twentytwentyfour_test1_assets() {
|
||||||
$use_test1_assets = is_page( 'test1' ) || ( function_exists( 'is_checkout' ) && is_checkout() && ! is_order_received_page() );
|
$use_test1_assets = is_page( 'test1' )
|
||||||
|
|| ( function_exists( 'is_checkout' ) && is_checkout() && ! is_order_received_page() )
|
||||||
|
|| ( function_exists( 'is_cart' ) && is_cart() );
|
||||||
|
|
||||||
if ( ! $use_test1_assets ) {
|
if ( ! $use_test1_assets ) {
|
||||||
return;
|
return;
|
||||||
@@ -306,13 +331,14 @@ function twentytwentyfour_test1_assets() {
|
|||||||
'test1WooCommerce',
|
'test1WooCommerce',
|
||||||
array(
|
array(
|
||||||
'addToCartUrl' => WC_AJAX::get_endpoint( 'add_to_cart' ),
|
'addToCartUrl' => WC_AJAX::get_endpoint( 'add_to_cart' ),
|
||||||
|
'cartUrl' => wc_get_cart_url(),
|
||||||
'checkoutUrl' => wc_get_checkout_url(),
|
'checkoutUrl' => wc_get_checkout_url(),
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( function_exists( 'is_checkout' ) && is_checkout() && ! is_order_received_page() && file_exists( $checkout_css_file ) ) {
|
if ( ( ( function_exists( 'is_checkout' ) && is_checkout() && ! is_order_received_page() ) || ( function_exists( 'is_cart' ) && is_cart() ) ) && file_exists( $checkout_css_file ) ) {
|
||||||
wp_enqueue_style(
|
wp_enqueue_style(
|
||||||
'twentytwentyfour-test1-checkout-style',
|
'twentytwentyfour-test1-checkout-style',
|
||||||
get_theme_file_uri( 'assets/css/test1-checkout.css' ),
|
get_theme_file_uri( 'assets/css/test1-checkout.css' ),
|
||||||
|
|||||||
75
wp-content/themes/twentytwentyfour/page-cart.php
Normal file
75
wp-content/themes/twentytwentyfour/page-cart.php
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Standalone cart template styled like the test1 landing page.
|
||||||
|
*
|
||||||
|
* @package Twenty_Twenty_Four
|
||||||
|
* @since Twenty Twenty-Four 1.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
?><!DOCTYPE html>
|
||||||
|
<html <?php language_attributes(); ?>>
|
||||||
|
<head>
|
||||||
|
<meta charset="<?php bloginfo( 'charset' ); ?>">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<?php wp_head(); ?>
|
||||||
|
</head>
|
||||||
|
<body <?php body_class( 'test1-cart-page' ); ?>>
|
||||||
|
<?php wp_body_open(); ?>
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container">
|
||||||
|
<div class="header-row">
|
||||||
|
<a class="brand" href="<?php echo esc_url( home_url( '/test1/' ) ); ?>" aria-label="Вернуться на страницу test1">
|
||||||
|
<span class="brand-mark" aria-hidden="true">
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 2C9 6.1 6 9.4 6 13.2C6 16.9 8.69 20 12 20C15.31 20 18 16.9 18 13.2C18 9.4 15 6.1 12 2Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span class="brand-text">
|
||||||
|
<strong><?php bloginfo( 'name' ); ?></strong>
|
||||||
|
<span><?php esc_html_e( 'Корзина', 'twentytwentyfour' ); ?></span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="header-actions">
|
||||||
|
<?php if ( function_exists( 'wc_get_checkout_url' ) ) : ?>
|
||||||
|
<a class="button checkout-back-link" href="<?php echo esc_url( wc_get_checkout_url() ); ?>"><?php esc_html_e( 'Перейти к оформлению', 'twentytwentyfour' ); ?></a>
|
||||||
|
<?php endif; ?>
|
||||||
|
<a class="header-phone" href="tel:+79781234567">
|
||||||
|
<span aria-hidden="true">+7 (978) 123-45-67</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="top">
|
||||||
|
<section class="hero checkout-hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="checkout-shell">
|
||||||
|
<div class="hero-copy checkout-intro reveal">
|
||||||
|
<span class="eyebrow"><?php esc_html_e( 'Ваш заказ', 'twentytwentyfour' ); ?></span>
|
||||||
|
<h1 class="hero-title"><?php esc_html_e( 'Корзина', 'twentytwentyfour' ); ?> <span><?php esc_html_e( 'в стиле test1', 'twentytwentyfour' ); ?></span></h1>
|
||||||
|
<p class="hero-text"><?php esc_html_e( 'Проверьте количество товаров, при необходимости обновите заказ и переходите к оформлению. Визуально корзина приведена к тому же стилю, что и landing test1.', 'twentytwentyfour' ); ?></p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a class="ghost-button" href="<?php echo esc_url( home_url( '/test1/#catalog' ) ); ?>"><?php esc_html_e( 'Добавить еще товары', 'twentytwentyfour' ); ?></a>
|
||||||
|
<?php if ( function_exists( 'wc_get_checkout_url' ) ) : ?>
|
||||||
|
<a class="button" href="<?php echo esc_url( wc_get_checkout_url() ); ?>"><?php esc_html_e( 'Оформить заказ', 'twentytwentyfour' ); ?></a>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glass-card checkout-card reveal reveal-delay-1">
|
||||||
|
<?php
|
||||||
|
while ( have_posts() ) :
|
||||||
|
the_post();
|
||||||
|
the_content();
|
||||||
|
endwhile;
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<?php wp_footer(); ?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user