Good-Production/dostavka_vodi
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

249
wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css
View File

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

30
wp-content/themes/twentytwentyfour/functions.php
View File

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

75
wp-content/themes/twentytwentyfour/page-cart.php Normal file
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>