Anton | настройка cart

This commit is contained in:
ab.an.ev@yandex.ru
2026-04-02 12:04:10 +03:00
parent 3be8f9d1c4
commit e5c963ef58
6 changed files with 294 additions and 96 deletions

View File

@@ -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;
}
} }

View File

@@ -717,7 +717,10 @@
<div class="empty-state">Корзина пока пуста. Добавьте воду 19 литров, компактные форматы или минеральную воду из каталога.</div> <div class="empty-state">Корзина пока пуста. Добавьте воду 19 литров, компактные форматы или минеральную воду из каталога.</div>
</div> </div>
<button class="button" id="checkoutButton">Оформить заказ</button> <div class="cart-actions">
<button class="ghost-button" id="viewCartButton">Смотреть корзину</button>
<button class="button" id="checkoutButton">Оформить заказ</button>
</div>
</div> </div>
</div> </div>

View File

@@ -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

View File

@@ -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;
}
} }

View File

@@ -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' ),

View 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>