правки checkout cart

This commit is contained in:
2026-04-04 20:35:13 +03:00
parent 4cb3d9199e
commit 214380a4e5
4 changed files with 328 additions and 108 deletions

View File

@@ -0,0 +1,227 @@
.test1-shared-shell {
font-family: "Manrope", sans-serif;
}
.test1-shared-shell .container {
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
}
.test1-shared-shell .site-main {
padding-top: 20px;
}
.test1-shared-shell .site-header {
position: sticky;
top: 0;
z-index: 40;
backdrop-filter: blur(16px);
background: rgba(244, 248, 255, 0.9);
border-bottom: 1px solid rgba(18, 48, 89, 0.08);
}
.test1-shared-shell .header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 82px;
}
.test1-shared-shell .brand {
display: flex;
align-items: center;
gap: 14px;
color: #123059;
text-decoration: none;
}
.test1-shared-shell .brand-mark {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 18px;
background: linear-gradient(145deg, #3cc8ff, #0d4fd6);
color: #fff;
box-shadow: 0 14px 28px rgba(13, 79, 214, 0.24);
}
.test1-shared-shell .brand-text strong {
display: block;
font-size: 16px;
line-height: 1.2;
}
.test1-shared-shell .brand-text span {
color: #5f7496;
font-size: 12px;
}
.test1-shared-shell .nav {
display: flex;
align-items: center;
gap: 20px;
}
.test1-shared-shell .nav a {
color: #5f7496;
text-decoration: none;
font-size: 14px;
font-weight: 700;
}
.test1-shared-shell .nav a:hover,
.test1-shared-shell .nav a:focus-visible {
color: #08338d;
}
.test1-shared-shell .header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.test1-shared-shell .header-phone,
.test1-shared-shell .cart-button,
.test1-shared-shell .checkout-back-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 10px 18px;
border-radius: 999px;
text-decoration: none;
font-weight: 800;
}
.test1-shared-shell .header-phone {
color: #123059;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(18, 48, 89, 0.1);
}
.test1-shared-shell .cart-button,
.test1-shared-shell .checkout-back-link {
color: #fff;
background: linear-gradient(135deg, #08338d, #0d4fd6);
box-shadow: 0 14px 28px rgba(13, 79, 214, 0.24);
}
.test1-shared-shell .classic-footer {
width: 100%;
margin-top: 24px;
padding: 44px 0 28px;
background: #0a1f47;
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.test1-shared-shell .classic-footer-shell {
display: grid;
gap: 22px;
}
.test1-shared-shell .classic-footer-main {
display: grid;
grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(180px, 1fr));
gap: 28px;
align-items: start;
}
.test1-shared-shell .classic-footer-col h3 {
margin: 0;
color: #fff;
font-size: 18px;
line-height: 1.2;
}
.test1-shared-shell .footer-description,
.test1-shared-shell .footer-links a,
.test1-shared-shell .footer-legal a,
.test1-shared-shell .footer-bottom,
.test1-shared-shell .classic-footer .brand-text strong,
.test1-shared-shell .classic-footer .brand-text span {
color: rgba(255, 255, 255, 0.78);
}
.test1-shared-shell .footer-links,
.test1-shared-shell .footer-legal {
display: grid;
gap: 10px;
margin-top: 14px;
}
.test1-shared-shell .footer-links a,
.test1-shared-shell .footer-legal a {
text-decoration: none;
}
.test1-shared-shell .footer-links a:hover,
.test1-shared-shell .footer-links a:focus-visible,
.test1-shared-shell .footer-legal a:hover,
.test1-shared-shell .footer-legal a:focus-visible {
color: #fff;
}
.test1-shared-shell .classic-footer-bottom {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: center;
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.16);
font-size: 13px;
}
@media (max-width: 960px) {
.test1-shared-shell .nav {
display: none;
}
.test1-shared-shell .header-row {
min-height: 74px;
}
.test1-shared-shell .classic-footer-main {
grid-template-columns: 1fr 1fr;
}
.test1-shared-shell .classic-footer-main .brand-col {
grid-column: 1 / -1;
}
}
@media (max-width: 700px) {
.test1-shared-shell .container {
width: min(1180px, calc(100% - 20px));
}
.test1-shared-shell .header-actions {
gap: 8px;
}
.test1-shared-shell .header-phone {
display: none;
}
.test1-shared-shell .cart-button,
.test1-shared-shell .checkout-back-link {
min-height: 42px;
padding: 8px 14px;
}
.test1-shared-shell .classic-footer {
padding-top: 32px;
}
.test1-shared-shell .classic-footer-main,
.test1-shared-shell .classic-footer-bottom {
grid-template-columns: 1fr;
display: grid;
}
.test1-shared-shell .classic-footer-main .brand-col {
grid-column: auto;
}
}

View File

@@ -228,6 +228,52 @@ function twentytwentyfour_test1_template( $template ) {
} }
add_filter( 'template_include', 'twentytwentyfour_test1_template' ); add_filter( 'template_include', 'twentytwentyfour_test1_template' );
/**
* Use a lightweight custom template for the WooCommerce checkout page.
*
* @since Twenty Twenty-Four 1.0
*
* @param string $template Resolved template path.
* @return string
*/
function twentytwentyfour_checkout_template( $template ) {
if ( ! function_exists( 'is_checkout' ) || ! is_checkout() || is_order_received_page() ) {
return $template;
}
$custom_template = get_theme_file_path( 'page-checkout.php' );
if ( file_exists( $custom_template ) ) {
return $custom_template;
}
return $template;
}
add_filter( 'template_include', 'twentytwentyfour_checkout_template', 20 );
/**
* Use a lightweight custom 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".
* *
@@ -292,6 +338,37 @@ function twentytwentyfour_test1_assets() {
} }
add_action( 'wp_enqueue_scripts', 'twentytwentyfour_test1_assets', 100 ); add_action( 'wp_enqueue_scripts', 'twentytwentyfour_test1_assets', 100 );
/**
* Enqueue shared test1 header/footer styles for cart and checkout.
*
* @since Twenty Twenty-Four 1.0
* @return void
*/
function twentytwentyfour_test1_shared_shell_assets() {
if ( ! ( ( function_exists( 'is_checkout' ) && is_checkout() && ! is_order_received_page() ) || ( function_exists( 'is_cart' ) && is_cart() ) ) ) {
return;
}
$shared_shell_css = get_theme_file_path( 'assets/css/test1-shared-shell.css' );
wp_enqueue_style(
'twentytwentyfour-test1-fonts',
'https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap',
array(),
null
);
if ( file_exists( $shared_shell_css ) ) {
wp_enqueue_style(
'twentytwentyfour-test1-shared-shell-style',
get_theme_file_uri( 'assets/css/test1-shared-shell.css' ),
array( 'twentytwentyfour-test1-fonts' ),
(string) filemtime( $shared_shell_css )
);
}
}
add_action( 'wp_enqueue_scripts', 'twentytwentyfour_test1_shared_shell_assets', 110 );
/** /**
* Free shipping threshold for custom notices. * Free shipping threshold for custom notices.
* *

View File

@@ -1,9 +1,8 @@
<?php <?php
/** /**
* Standalone cart template styled like the test1 landing page. * Cart template with shared test1 header/footer and default Woo content.
* *
* @package Twenty_Twenty_Four * @package Twenty_Twenty_Four
* @since Twenty Twenty-Four 1.0
*/ */
?><!DOCTYPE html> ?><!DOCTYPE html>
@@ -13,73 +12,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?> <?php wp_head(); ?>
</head> </head>
<body <?php body_class( 'test1-cart-page' ); ?>> <body <?php body_class( 'test1-shared-shell test1-shared-cart-page' ); ?>>
<?php wp_body_open(); ?> <?php wp_body_open(); ?>
<?php <?php
$test1_header_action_url = function_exists( 'wc_get_checkout_url' ) ? wc_get_checkout_url() : ''; $test1_header_action_url = function_exists( 'wc_get_checkout_url' ) ? wc_get_checkout_url() : '';
$test1_header_action_label = 'Оформление'; $test1_header_action_label = __( 'Оформление', 'twentytwentyfour' );
$test1_header_mode = 'link';
require get_theme_file_path( 'template-parts/test1-shared-header.php' ); require get_theme_file_path( 'template-parts/test1-shared-header.php' );
?> ?>
<main id="top"> <main class="site-main" role="main">
<section class="hero checkout-hero"> <?php
<div class="container"> while ( have_posts() ) :
<div class="premium-stage premium-stage-cart"> the_post();
<div class="premium-orb premium-orb-one" aria-hidden="true"></div> the_content();
<div class="premium-orb premium-orb-two" aria-hidden="true"></div> endwhile;
<?php twentytwentyfour_water_delivery_progress_markup( 'cart' ); ?> ?>
<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( 'для доставки воды в Севастополе', 'twentytwentyfour' ); ?></span></h1>
<p class="hero-text"><?php esc_html_e( 'Проверьте товары в корзине перед оформлением: количество бутылей, объем воды, итоговую стоимость и дополнительные позиции. После этого можно быстро перейти к оформлению доставки на дом или в офис.', '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>
</div>
</div>
<div class="premium-stack reveal reveal-delay-1">
<aside class="glass-card premium-aside premium-aside-cart">
<div class="premium-aside-head">
<h2><?php esc_html_e( 'Подготовьте корзину к оформлению', 'twentytwentyfour' ); ?></h2>
</div>
<div class="premium-timeline">
<div class="premium-timeline-item">
<strong>01</strong>
<span><?php esc_html_e( 'Проверьте объем воды и количество бутылей для дома, офиса или коммерческого объекта', 'twentytwentyfour' ); ?></span>
</div>
<div class="premium-timeline-item">
<strong>02</strong>
<span><?php esc_html_e( 'При необходимости измените количество товаров, удалите лишние позиции или примените купон', 'twentytwentyfour' ); ?></span>
</div>
<div class="premium-timeline-item">
<strong>03</strong>
<span><?php esc_html_e( 'Перейдите к оформлению заказа и укажите адрес доставки воды по Севастополю', 'twentytwentyfour' ); ?></span>
</div>
</div>
<div class="cart-side-note">
<p><?php esc_html_e( 'После проверки состава заказа вы сразу увидите итоговую сумму, стоимость доставки по вашей зоне и сможете перейти к оформлению без лишних шагов.', 'twentytwentyfour' ); ?></p>
</div>
</aside>
<div class="glass-card checkout-card premium-form-card">
<?php
while ( have_posts() ) :
the_post();
the_content();
endwhile;
?>
</div>
</div>
</div>
</div>
</div>
</section>
</main> </main>
<?php require get_theme_file_path( 'template-parts/test1-shared-footer.php' ); ?> <?php require get_theme_file_path( 'template-parts/test1-shared-footer.php' ); ?>
<?php wp_footer(); ?> <?php wp_footer(); ?>
</body> </body>

View File

@@ -1,9 +1,8 @@
<?php <?php
/** /**
* Standalone checkout template styled like the test1 landing page. * Checkout template with shared test1 header/footer and default Woo content.
* *
* @package Twenty_Twenty_Four * @package Twenty_Twenty_Four
* @since Twenty Twenty-Four 1.0
*/ */
?><!DOCTYPE html> ?><!DOCTYPE html>
@@ -13,57 +12,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?> <?php wp_head(); ?>
</head> </head>
<body <?php body_class( 'test1-checkout-page' ); ?>> <body <?php body_class( 'test1-shared-shell test1-shared-checkout-page' ); ?>>
<?php wp_body_open(); ?> <?php wp_body_open(); ?>
<?php <?php
$test1_header_action_url = function_exists( 'wc_get_cart_url' ) ? wc_get_cart_url() : ''; $test1_header_action_url = function_exists( 'wc_get_cart_url' ) ? wc_get_cart_url() : '';
$test1_header_action_label = 'Корзина'; $test1_header_action_label = __( 'Корзина', 'twentytwentyfour' );
$test1_header_mode = 'link';
require get_theme_file_path( 'template-parts/test1-shared-header.php' ); require get_theme_file_path( 'template-parts/test1-shared-header.php' );
?> ?>
<main id="top"> <main class="site-main" role="main">
<section class="hero checkout-hero"> <?php
<div class="container"> while ( have_posts() ) :
<div class="premium-stage premium-stage-checkout"> the_post();
<div class="premium-orb premium-orb-one" aria-hidden="true"></div> the_content();
<div class="premium-orb premium-orb-two" aria-hidden="true"></div> endwhile;
<?php twentytwentyfour_water_delivery_progress_markup( 'checkout' ); ?> ?>
<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( 'на доставку воды в Севастополе', 'twentytwentyfour' ); ?></span></h1>
<p class="hero-text"><?php esc_html_e( 'Проверьте состав заказа, укажите телефон и адрес доставки, чтобы быстро оформить воду на дом, в офис, кафе или коммерческое помещение в Севастополе. Мы принимаем заявки ежедневно и подтверждаем удобный интервал доставки.', 'twentytwentyfour' ); ?></p>
<div class="hero-actions">
<?php if ( function_exists( 'wc_get_cart_url' ) ) : ?>
<a class="ghost-button" href="<?php echo esc_url( wc_get_cart_url() ); ?>"><?php esc_html_e( 'Изменить состав заказа', 'twentytwentyfour' ); ?></a>
<?php endif; ?>
</div>
</div>
<div class="premium-stack reveal reveal-delay-1">
<div class="glass-card checkout-card premium-form-card">
<?php
while ( have_posts() ) :
the_post();
the_content();
endwhile;
?>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="water-seo-copy-section water-seo-copy-section-checkout">
<div class="container">
<h2><?php esc_html_e( 'Оформить заказ воды в Севастополе онлайн', 'twentytwentyfour' ); ?></h2>
<p><?php echo esc_html( twentytwentyfour_water_delivery_seo_copy( 'checkout' ) ); ?></p>
</div>
</section>
</main> </main>
<?php require get_theme_file_path( 'template-parts/test1-shared-footer.php' ); ?> <?php require get_theme_file_path( 'template-parts/test1-shared-footer.php' ); ?>
<?php wp_footer(); ?> <?php wp_footer(); ?>
</body> </body>