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

2026-04-02 12:04:10 +03:00
parent 3be8f9d1c4
commit e5c963ef58
6 changed files with 294 additions and 96 deletions
--- a/index3.css
+++ b/index3.css
@@ -1316,6 +1316,18 @@
      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;
@@ -1449,4 +1461,8 @@
        flex-direction: column;
        align-items: start;
      }
+
+      .cart-actions {
+        grid-template-columns: 1fr;
+      }
    }
--- a/index3.html
+++ b/index3.html
@@ -717,9 +717,12 @@
        <div class="empty-state">Корзина пока пуста. Добавьте воду 19 литров, компактные форматы или минеральную воду из каталога.</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">
--- a/index3.js
+++ b/index3.js
@@ -13,6 +13,7 @@ const audienceContent = {
    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')
@@ -166,7 +167,14 @@ const audienceContent = {
                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(() => {
              button.disabled = false
@@ -191,6 +199,11 @@ const audienceContent = {
      openCart()
    })
    cartCloseButton.addEventListener('click', closeCart)
+    viewCartButton.addEventListener('click', () => {
+      if (wooCommerceConfig && wooCommerceConfig.cartUrl) {
+        window.location.href = wooCommerceConfig.cartUrl
+      }
+    })
    checkoutButton.addEventListener('click', () => {
      if (wooCommerceConfig && wooCommerceConfig.checkoutUrl) {
        window.location.href = wooCommerceConfig.checkoutUrl
--- a/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css
+++ b/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css
@@ -2,58 +2,59 @@
  --checkout-max-width: 1180px;
 }

-body.test1-checkout-page {
+body:is(.test1-checkout-page, .test1-cart-page) {
  min-width: 320px;
 }

-.test1-checkout-page .checkout-shell {
+:is(.test1-checkout-page, .test1-cart-page) .checkout-shell {
  display: grid;
  gap: 28px;
  align-items: start;
 }

-.test1-checkout-page .checkout-intro {
+:is(.test1-checkout-page, .test1-cart-page) .checkout-intro {
  max-width: 780px;
 }

-.test1-checkout-page .checkout-card {
+:is(.test1-checkout-page, .test1-cart-page) .checkout-card {
  padding: clamp(22px, 3vw, 36px);
 }

-.test1-checkout-page .checkout-back-link {
+:is(.test1-checkout-page, .test1-cart-page) .checkout-back-link {
  white-space: nowrap;
 }

-.test1-checkout-page .entry-content,
-.test1-checkout-page .woocommerce,
-.test1-checkout-page .wc-block-checkout,
-.test1-checkout-page .wc-block-cart,
-.test1-checkout-page .is-large {
+:is(.test1-checkout-page, .test1-cart-page) .entry-content,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart,
+:is(.test1-checkout-page, .test1-cart-page) .is-large {
  max-width: 100%;
 }

-.test1-checkout-page .woocommerce {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce {
  color: var(--text);
 }

-.test1-checkout-page .woocommerce a,
-.test1-checkout-page .wc-block-components-text-input input,
-.test1-checkout-page .wc-block-components-combobox .components-combobox-control__input,
-.test1-checkout-page .wc-block-components-textarea,
-.test1-checkout-page .wc-block-components-text-input label,
-.test1-checkout-page .wc-block-components-checkbox label {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce a,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input input,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-combobox .components-combobox-control__input,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-textarea,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input label,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkbox label {
  color: var(--text);
 }

-.test1-checkout-page .woocommerce form .form-row input.input-text,
-.test1-checkout-page .woocommerce form .form-row textarea,
-.test1-checkout-page .woocommerce form .form-row select,
-.test1-checkout-page .wc-block-components-text-input input,
-.test1-checkout-page .wc-block-components-text-input select,
-.test1-checkout-page .wc-block-components-textarea textarea,
-.test1-checkout-page .components-text-control__input,
-.test1-checkout-page .components-form-token-field__input,
-.test1-checkout-page .components-combobox-control__input {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row input.input-text,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row textarea,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row select,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input input,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input select,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-textarea textarea,
+:is(.test1-checkout-page, .test1-cart-page) .components-text-control__input,
+:is(.test1-checkout-page, .test1-cart-page) .components-form-token-field__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;
  padding: 14px 16px;
  border-radius: 18px;
@@ -62,54 +63,63 @@ body.test1-checkout-page {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
 }

-.test1-checkout-page .woocommerce form .form-row textarea,
-.test1-checkout-page .wc-block-components-textarea textarea {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row textarea,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-textarea textarea {
  min-height: 120px;
 }

-.test1-checkout-page .woocommerce-checkout #payment,
-.test1-checkout-page .woocommerce-billing-fields,
-.test1-checkout-page .woocommerce-additional-fields,
-.test1-checkout-page #order_review,
-.test1-checkout-page .wc-block-components-sidebar,
-.test1-checkout-page .wc-block-components-totals-wrapper,
-.test1-checkout-page .wc-block-checkout__main,
-.test1-checkout-page .wc-block-checkout__sidebar,
-.test1-checkout-page .wc-block-components-checkout-step,
-.test1-checkout-page .wc-block-components-order-summary,
-.test1-checkout-page .wc-block-components-totals-coupon,
-.test1-checkout-page .wc-block-components-shipping-rates-control,
-.test1-checkout-page .wc-block-components-address-form {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields,
+:is(.test1-checkout-page, .test1-cart-page) #order_review,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-sidebar,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-totals-wrapper,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__main,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__sidebar,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkout-step,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-order-summary,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-totals-coupon,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-shipping-rates-control,
+: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: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 30px 80px rgba(10, 43, 109, 0.12);
 }

-.test1-checkout-page .woocommerce-checkout #payment,
-.test1-checkout-page .woocommerce-billing-fields,
-.test1-checkout-page .woocommerce-additional-fields,
-.test1-checkout-page #order_review {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields,
+: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;
 }

-.test1-checkout-page .woocommerce form .form-row {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row {
  margin-bottom: 16px;
 }

-.test1-checkout-page .woocommerce form .form-row label,
-.test1-checkout-page .wc-block-components-text-input label,
-.test1-checkout-page .wc-block-components-checkbox label,
-.test1-checkout-page .wc-block-components-radio-control__option-label {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row label,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input label,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkbox label,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-radio-control__option-label {
  font-weight: 700;
  color: var(--text);
 }

-.test1-checkout-page .woocommerce button.button,
-.test1-checkout-page .woocommerce #payment #place_order,
-.test1-checkout-page .wc-block-components-button,
-.test1-checkout-page .wc-block-cart__submit-button,
-.test1-checkout-page .wc-block-components-checkout-place-order-button {
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce button.button,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce #payment #place_order,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-button,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart__submit-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;
  padding: 16px 22px;
  border: 0;
@@ -120,93 +130,148 @@ body.test1-checkout-page {
  font-weight: 800;
 }

-.test1-checkout-page .woocommerce button.button:hover,
-.test1-checkout-page .woocommerce #payment #place_order:hover,
-.test1-checkout-page .wc-block-components-button:hover,
-.test1-checkout-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) .woocommerce button.button:hover,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce #payment #place_order:hover,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-button:hover,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart__submit-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);
  filter: brightness(1.03);
 }

-.test1-checkout-page table.shop_table,
-.test1-checkout-page .wc-block-components-order-summary-item,
-.test1-checkout-page .wc-block-components-product-name {
+:is(.test1-checkout-page, .test1-cart-page) table.shop_table,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-order-summary-item,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-product-name {
  color: var(--text);
 }

-.test1-checkout-page table.shop_table td,
-.test1-checkout-page table.shop_table th,
-.test1-checkout-page .woocommerce-checkout-review-order-table th,
-.test1-checkout-page .woocommerce-checkout-review-order-table td {
+:is(.test1-checkout-page, .test1-cart-page) table.shop_table {
+  overflow: hidden;
+  border-radius: 18px;
+  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);
 }

-.test1-checkout-page .woocommerce-info,
-.test1-checkout-page .woocommerce-message,
-.test1-checkout-page .woocommerce-error,
-.test1-checkout-page .wc-block-components-notice-banner {
+:is(.test1-checkout-page, .test1-cart-page) .shop_table thead th {
+  font-weight: 800;
+}
+
+: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: 1px solid rgba(18, 48, 89, 0.1);
  background: rgba(255, 255, 255, 0.84);
  color: var(--text);
 }

-.test1-checkout-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--single,
+:is(.test1-checkout-page, .test1-cart-page) .select2-container--default .select2-selection--multiple {
  min-height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(18, 48, 89, 0.14);
  background: rgba(255, 255, 255, 0.9);
 }

-.test1-checkout-page .woocommerce-checkout-review-order-table,
-.test1-checkout-page #add_payment_method #payment div.payment_box,
-.test1-checkout-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-review-order-table,
+:is(.test1-checkout-page, .test1-cart-page) #add_payment_method #payment div.payment_box,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart #payment div.payment_box,
+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment div.payment_box {
  background: rgba(219, 246, 255, 0.45);
  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;
 }

-.test1-checkout-page .wc-block-checkout__main,
-.test1-checkout-page .wc-block-checkout__sidebar {
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__main,
+:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__sidebar {
  padding: 22px;
 }

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

@media (max-width: 781px) {
-  .test1-checkout-page .header-row,
-  .test1-checkout-page .header-actions {
+  :is(.test1-checkout-page, .test1-cart-page) .header-row,
+  :is(.test1-checkout-page, .test1-cart-page) .header-actions {
    flex-wrap: wrap;
  }

-  .test1-checkout-page .header-actions {
+  :is(.test1-checkout-page, .test1-cart-page) .header-actions {
    width: 100%;
    justify-content: stretch;
  }

-  .test1-checkout-page .header-actions > * {
+  :is(.test1-checkout-page, .test1-cart-page) .header-actions > * {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
  }

-  .test1-checkout-page .checkout-card,
-  .test1-checkout-page .woocommerce-checkout #payment,
-  .test1-checkout-page .woocommerce-billing-fields,
-  .test1-checkout-page .woocommerce-additional-fields,
-  .test1-checkout-page #order_review,
-  .test1-checkout-page .wc-block-checkout__main,
-  .test1-checkout-page .wc-block-checkout__sidebar {
+  :is(.test1-checkout-page, .test1-cart-page) .checkout-card,
+  :is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment,
+  :is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields,
+  :is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields,
+  :is(.test1-checkout-page, .test1-cart-page) #order_review,
+  :is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__main,
+  :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;
  }
+
+  :is(.test1-checkout-page, .test1-cart-page) .coupon {
+    display: grid;
+  }
 }
--- a/wp-content/themes/twentytwentyfour/functions.php
+++ b/wp-content/themes/twentytwentyfour/functions.php
@@ -251,6 +251,29 @@ function twentytwentyfour_checkout_template( $template ) {
 }
 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".
 *
@@ -258,7 +281,9 @@ add_filter( 'template_include', 'twentytwentyfour_checkout_template', 20 );
 * @return void
 */
 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 ) {
 		return;
@@ -306,13 +331,14 @@ function twentytwentyfour_test1_assets() {
 				'test1WooCommerce',
 				array(
 					'addToCartUrl' => WC_AJAX::get_endpoint( 'add_to_cart' ),
+					'cartUrl'      => wc_get_cart_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(
 			'twentytwentyfour-test1-checkout-style',
 			get_theme_file_uri( 'assets/css/test1-checkout.css' ),
--- a/wp-content/themes/twentytwentyfour/page-cart.php
+++ b/wp-content/themes/twentytwentyfour/page-cart.php
@@ -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>