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

index3.js

@@ -27,6 +27,7 @@ const audienceContent = {
     const orderItemsField = document.getElementById('orderItemsField')
     const orderSuccess = document.getElementById('orderSuccess')
     const contactSuccess = document.getElementById('contactSuccess')
+    const wooCommerceConfig = window.test1WooCommerce || null
 
     let cart = []
 
@@ -132,6 +133,48 @@ const audienceContent = {
 
     addToCartButtons.forEach(button => {
       button.addEventListener('click', () => {
+        const productId = Number(button.dataset.productId || 0)
+
+        if (wooCommerceConfig && productId && wooCommerceConfig.addToCartUrl && wooCommerceConfig.checkoutUrl) {
+          button.disabled = true
+
+          fetch(wooCommerceConfig.addToCartUrl, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+            },
+            body: new URLSearchParams({
+              product_id: String(productId),
+              quantity: '1'
+            })
+          })
+            .then(async response => {
+              let payload = null
+
+              try {
+                payload = await response.json()
+              } catch (error) {
+                payload = null
+              }
+
+              if (!response.ok) {
+                throw new Error('add_to_cart_failed')
+              }
+
+              if (payload && payload.error && payload.product_url) {
+                window.location.href = payload.product_url
+                return
+              }
+
+              window.location.href = wooCommerceConfig.checkoutUrl
+            })
+            .catch(() => {
+              button.disabled = false
+            })
+
+          return
+        }
+
         cart.push({
           name: button.dataset.name,
           volume: button.dataset.volume,
@@ -149,6 +192,11 @@ const audienceContent = {
     })
     cartCloseButton.addEventListener('click', closeCart)
     checkoutButton.addEventListener('click', () => {
+      if (wooCommerceConfig && wooCommerceConfig.checkoutUrl) {
+        window.location.href = wooCommerceConfig.checkoutUrl
+        return
+      }
+
       closeCart()
       openModal()
     })

wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css

@@ -0,0 +1,212 @@
+:root {
+  --checkout-max-width: 1180px;
+}
+
+body.test1-checkout-page {
+  min-width: 320px;
+}
+
+.test1-checkout-page .checkout-shell {
+  display: grid;
+  gap: 28px;
+  align-items: start;
+}
+
+.test1-checkout-page .checkout-intro {
+  max-width: 780px;
+}
+
+.test1-checkout-page .checkout-card {
+  padding: clamp(22px, 3vw, 36px);
+}
+
+.test1-checkout-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 {
+  max-width: 100%;
+}
+
+.test1-checkout-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 {
+  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 {
+  min-height: 56px;
+  padding: 14px 16px;
+  border-radius: 18px;
+  border: 1px solid rgba(18, 48, 89, 0.14);
+  background: rgba(255, 255, 255, 0.9);
+  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 {
+  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 {
+  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 {
+  padding: 24px;
+}
+
+.test1-checkout-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 {
+  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 {
+  min-height: 56px;
+  padding: 16px 22px;
+  border: 0;
+  border-radius: 999px;
+  color: #fff;
+  background: linear-gradient(135deg, var(--primary-strong), var(--primary));
+  box-shadow: 0 16px 30px rgba(13, 79, 214, 0.25);
+  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 {
+  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 {
+  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 {
+  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 {
+  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 {
+  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 {
+  background: rgba(219, 246, 255, 0.45);
+  border-radius: 18px;
+}
+
+.test1-checkout-page .wc-block-components-sidebar-layout {
+  gap: 24px;
+}
+
+.test1-checkout-page .wc-block-checkout__main,
+.test1-checkout-page .wc-block-checkout__sidebar {
+  padding: 22px;
+}
+
+@media (min-width: 992px) {
+  .test1-checkout-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 {
+    flex-wrap: wrap;
+  }
+
+  .test1-checkout-page .header-actions {
+    width: 100%;
+    justify-content: stretch;
+  }
+
+  .test1-checkout-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 {
+    padding: 18px;
+  }
+}

wp-content/themes/twentytwentyfour/functions.php

@@ -228,6 +228,29 @@ function twentytwentyfour_test1_template( $template ) {
 }
 add_filter( 'template_include', 'twentytwentyfour_test1_template' );
 
+/**
+ * Use a standalone PHP 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 );
+
 /**
  * Enqueue standalone landing assets for the page slug "test1".
  *
@@ -235,17 +258,22 @@ add_filter( 'template_include', 'twentytwentyfour_test1_template' );
  * @return void
  */
 function twentytwentyfour_test1_assets() {
-	if ( ! is_page( 'test1' ) ) {
+	$use_test1_assets = is_page( 'test1' ) || ( function_exists( 'is_checkout' ) && is_checkout() && ! is_order_received_page() );
+
+	if ( ! $use_test1_assets ) {
 		return;
 	}
 
 	$css_file = ABSPATH . 'index3.css';
 	$js_file  = ABSPATH . 'index3.js';
+	$checkout_css_file = get_theme_file_path( 'assets/css/test1-checkout.css' );
 
+	if ( is_page( 'test1' ) ) {
 		wp_dequeue_style( 'global-styles' );
 		wp_dequeue_style( 'wp-block-library' );
 		wp_dequeue_style( 'wp-block-library-theme' );
 		wp_dequeue_style( 'classic-theme-styles' );
+	}
 
 	wp_enqueue_style(
 		'twentytwentyfour-test1-fonts',
@@ -263,7 +291,7 @@ function twentytwentyfour_test1_assets() {
 		);
 	}
 
-	if ( file_exists( $js_file ) ) {
+	if ( is_page( 'test1' ) && file_exists( $js_file ) ) {
 		wp_enqueue_script(
 			'twentytwentyfour-test1-script',
 			home_url( '/index3.js' ),
@@ -271,6 +299,26 @@ function twentytwentyfour_test1_assets() {
 			(string) filemtime( $js_file ),
 			true
 		);
+
+		if ( class_exists( 'WooCommerce' ) ) {
+			wp_localize_script(
+				'twentytwentyfour-test1-script',
+				'test1WooCommerce',
+				array(
+					'addToCartUrl' => WC_AJAX::get_endpoint( 'add_to_cart' ),
+					'checkoutUrl'  => wc_get_checkout_url(),
+				)
+			);
+		}
+	}
+
+	if ( function_exists( 'is_checkout' ) && is_checkout() && ! is_order_received_page() && file_exists( $checkout_css_file ) ) {
+		wp_enqueue_style(
+			'twentytwentyfour-test1-checkout-style',
+			get_theme_file_uri( 'assets/css/test1-checkout.css' ),
+			array( 'twentytwentyfour-test1-style' ),
+			(string) filemtime( $checkout_css_file )
+		);
 	}
 }
 add_action( 'wp_enqueue_scripts', 'twentytwentyfour_test1_assets', 100 );

wp-content/themes/twentytwentyfour/page-checkout.php

@@ -0,0 +1,75 @@
+<?php
+/**
+ * Standalone checkout 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-checkout-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_cart_url' ) ) : ?>
+						<a class="ghost-button checkout-back-link" href="<?php echo esc_url( wc_get_cart_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( 'без лишних шагов', 'twentytwentyfour' ); ?></span></h1>
+						<p class="hero-text"><?php esc_html_e( 'Проверьте состав заказа, укажите контакты и адрес доставки. Страница оформлена в том же стиле, что и landing test1, чтобы путь от выбора воды до оплаты выглядел цельно.', '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; ?>
+							<a class="button" href="<?php echo esc_url( home_url( '/test1/#catalog' ) ); ?>"><?php esc_html_e( 'Добавить еще товары', 'twentytwentyfour' ); ?></a>
+						</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>

wp-content/themes/twentytwentyfour/page-test1.php

@@ -68,6 +68,7 @@ function twentytwentyfour_test1_catalog_markup() {
 				<div class="card-price"><strong><?php echo esc_html( $price ); ?></strong><span><?php esc_html_e( 'из WooCommerce', 'twentytwentyfour' ); ?></span></div>
 				<button
 					class="mini-button add-to-cart"
+					data-product-id="<?php echo esc_attr( (string) $product->get_id() ); ?>"
 					data-name="<?php echo esc_attr( $product->get_name() ); ?>"
 					data-volume="<?php echo esc_attr( $volume ); ?>"
 					data-price="<?php echo esc_attr( (string) wc_get_price_to_display( $product ) ); ?>"