From e5c963ef5835ab3b3182b4bd855dd198e4bd5d23 Mon Sep 17 00:00:00 2001 From: "ab.an.ev@yandex.ru" Date: Thu, 2 Apr 2026 12:04:10 +0300 Subject: [PATCH] =?UTF-8?q?Anton=20|=20=D0=BD=D0=B0=D1=81=D1=82=D1=80?= =?UTF-8?q?=D0=BE=D0=B9=D0=BA=D0=B0=20cart?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index3.css | 16 ++ index3.html | 5 +- index3.js | 15 +- .../assets/css/test1-checkout.css | 249 +++++++++++------- .../themes/twentytwentyfour/functions.php | 30 ++- .../themes/twentytwentyfour/page-cart.php | 75 ++++++ 6 files changed, 294 insertions(+), 96 deletions(-) create mode 100644 wp-content/themes/twentytwentyfour/page-cart.php diff --git a/index3.css b/index3.css index 8c50c473..33944ed9 100644 --- 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; + } } diff --git a/index3.html b/index3.html index d5101213..832d3696 100644 --- a/index3.html +++ b/index3.html @@ -717,7 +717,10 @@
Корзина пока пуста. Добавьте воду 19 литров, компактные форматы или минеральную воду из каталога.
- +
+ + +
diff --git a/index3.js b/index3.js index ae703e8d..2d1c9cc2 100644 --- 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 diff --git a/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css b/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css index b09e6209..b7bd6c7f 100644 --- 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; + } } diff --git a/wp-content/themes/twentytwentyfour/functions.php b/wp-content/themes/twentytwentyfour/functions.php index 01d1dd0f..d338b2c1 100644 --- 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' ), diff --git a/wp-content/themes/twentytwentyfour/page-cart.php b/wp-content/themes/twentytwentyfour/page-cart.php new file mode 100644 index 00000000..2b4c0821 --- /dev/null +++ b/wp-content/themes/twentytwentyfour/page-cart.php @@ -0,0 +1,75 @@ + +> + + + + + +> + +
+
+
+ + + + + + + + +
+ + + + + + +
+
+
+
+ +
+
+
+
+
+ +

+

+
+ + + + +
+
+ +
+ +
+
+
+
+
+ + +