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

2026-04-02 13:11:21 +03:00
parent 6938c56241
commit e86d3549ba
6 changed files with 591 additions and 181 deletions
--- a/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css
+++ b/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css
@@ -199,6 +199,37 @@ body:is(.test1-checkout-page, .test1-cart-page) {
  line-height: 1.5;
 }

+.cart-trust-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+  margin-top: 18px;
+}
+
+.cart-trust-card {
+  padding: 18px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.62);
+  border: 1px solid rgba(255, 255, 255, 0.78);
+  box-shadow: 0 18px 48px rgba(8, 31, 79, 0.08);
+}
+
+.cart-trust-card span {
+  display: inline-block;
+  margin-bottom: 8px;
+  color: var(--premium-blue);
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-weight: 800;
+}
+
+.cart-trust-card strong {
+  display: block;
+  color: var(--premium-navy);
+  line-height: 1.55;
+}
+
 .premium-stack {
  display: grid;
  gap: 20px;
@@ -298,6 +329,16 @@ body:is(.test1-checkout-page, .test1-cart-page) {
  line-height: 1.45;
 }

+.cart-side-note {
+  margin-top: 18px;
+  padding: 18px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.68);
+  border: 1px solid rgba(13, 79, 214, 0.08);
+  color: var(--text);
+  line-height: 1.7;
+}
+
 .premium-form-card {
  border-radius: 30px;
  box-shadow: 0 34px 100px rgba(8, 31, 79, 0.16);
@@ -678,6 +719,27 @@ body:is(.test1-checkout-page, .test1-cart-page) {
  line-height: 1.7;
 }

+.water-cart-summary-box {
+  margin-bottom: 18px;
+  padding: 18px;
+  border-radius: 22px;
+  background: linear-gradient(145deg, rgba(8, 31, 79, 0.92), rgba(13, 79, 214, 0.82));
+  color: #fff;
+  box-shadow: 0 24px 60px rgba(8, 31, 79, 0.16);
+}
+
+.water-cart-summary-usp {
+  margin-bottom: 10px;
+  font-weight: 800;
+}
+
+.water-cart-summary-list {
+  margin: 0;
+  padding-left: 18px;
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 1.7;
+}
+
 .water-empty-cart-cta {
  margin-top: 16px;
 }
@@ -687,6 +749,35 @@ body:is(.test1-checkout-page, .test1-cart-page) {
  top: 104px;
 }

+:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form {
+  position: relative;
+}
+
+:is(.test1-cart-page) .premium-form-card.is-loading::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.52);
+  backdrop-filter: blur(3px);
+  z-index: 4;
+}
+
+:is(.test1-cart-page) .premium-form-card.is-loading::before {
+  content: "Обновляем корзину";
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  z-index: 5;
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, var(--premium-navy), var(--premium-blue));
+  color: #fff;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-weight: 800;
+}
+
 :is(.test1-checkout-page, .test1-cart-page) .cross-sells {
  margin-top: 24px;
  padding: 24px;
@@ -700,6 +791,20 @@ body:is(.test1-checkout-page, .test1-cart-page) {
  color: var(--premium-navy);
 }

+:is(.test1-checkout-page, .test1-cart-page) .cross-sells .products {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: 16px;
+}
+
+:is(.test1-checkout-page, .test1-cart-page) .cross-sells .product {
+  margin: 0;
+  padding: 18px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid rgba(13, 79, 214, 0.08);
+}
+
 :is(.test1-checkout-page, .test1-cart-page) .quantity {
  display: inline-flex;
  align-items: center;
@@ -711,6 +816,22 @@ body:is(.test1-checkout-page, .test1-cart-page) {
  text-align: center;
 }

+:is(.test1-checkout-page, .test1-cart-page) .shop_table .product-name {
+  font-weight: 800;
+  color: var(--premium-navy);
+}
+
+:is(.test1-checkout-page, .test1-cart-page) .shop_table .product-subtotal,
+:is(.test1-checkout-page, .test1-cart-page) .shop_table .product-price {
+  color: var(--premium-navy);
+  font-weight: 800;
+}
+
+.water-order-total-value .amount {
+  font-size: 28px;
+  color: var(--premium-navy);
+}
+
 .quantity-button {
  width: 38px;
  height: 38px;
@@ -732,6 +853,10 @@ body:is(.test1-checkout-page, .test1-cart-page) {
    grid-template-columns: 1fr;
  }

+  .cart-trust-grid {
+    grid-template-columns: 1fr;
+  }
+
  :is(.test1-checkout-page, .test1-cart-page) .cart_totals {
    position: static;
    top: auto;
--- a/wp-content/themes/twentytwentyfour/assets/js/test1-checkout.js
+++ b/wp-content/themes/twentytwentyfour/assets/js/test1-checkout.js
@@ -1,7 +1,6 @@
 (function () {
  const root = document.documentElement
  const phoneInput = document.getElementById('billing_phone')
-  const cartForm = document.querySelector('form.woocommerce-cart-form')

  const digitsOnly = value => value.replace(/\D+/g, '')

@@ -40,8 +39,8 @@
    })
  }

-  const attachQuantityButtons = () => {
-    document.querySelectorAll('.quantity').forEach(quantity => {
+  const attachQuantityButtons = scope => {
+    scope.querySelectorAll('.quantity').forEach(quantity => {
      if (quantity.dataset.enhanced === 'true') {
        return
      }
@@ -85,8 +84,75 @@
    })
  }

-  if (cartForm) {
+  const parseHTML = html => new window.DOMParser().parseFromString(html, 'text/html')
+
+  const initCartAjax = () => {
+    const pageCard = document.querySelector('.test1-cart-page .premium-form-card')
+    const cartForm = pageCard?.querySelector('form.woocommerce-cart-form')
+
+    if (!pageCard || !cartForm) {
+      return
+    }
+
    let updateTimer = null
+    let submitIntent = null
+
+    const setLoading = state => {
+      pageCard.classList.toggle('is-loading', state)
+    }
+
+    const replaceCartMarkup = html => {
+      const nextDocument = parseHTML(html)
+      const nextCard = nextDocument.querySelector('.test1-cart-page .premium-form-card')
+
+      if (!nextCard) {
+        window.location.reload()
+        return
+      }
+
+      pageCard.innerHTML = nextCard.innerHTML
+      attachQuantityButtons(pageCard)
+      initCartAjax()
+    }
+
+    const requestAndReplace = (url, options = {}) => {
+      setLoading(true)
+
+      return window.fetch(url, {
+        credentials: 'same-origin',
+        ...options,
+      })
+        .then(response => response.text())
+        .then(html => {
+          replaceCartMarkup(html)
+        })
+        .catch(() => {
+          window.location.reload()
+        })
+        .finally(() => {
+          setLoading(false)
+        })
+    }
+
+    cartForm.querySelectorAll('button[name]').forEach(button => {
+      button.addEventListener('click', () => {
+        submitIntent = { name: button.name, value: button.value || '1' }
+      })
+    })
+
+    cartForm.addEventListener('submit', event => {
+      event.preventDefault()
+      const formData = new window.FormData(cartForm)
+
+      if (submitIntent?.name) {
+        formData.append(submitIntent.name, submitIntent.value)
+      }
+
+      requestAndReplace(window.location.href, {
+        method: 'POST',
+        body: formData,
+      })
+    })

    cartForm.addEventListener('change', event => {
      if (!event.target.classList.contains('qty')) {
@@ -99,14 +165,22 @@
        return
      }

-      updateButton.disabled = false
      clearTimeout(updateTimer)
      updateTimer = window.setTimeout(() => {
-        updateButton.click()
-      }, 350)
+        submitIntent = { name: 'update_cart', value: updateButton.value || '1' }
+        cartForm.requestSubmit()
+      }, 250)
+    })
+
+    pageCard.querySelectorAll('.woocommerce-cart-form a.remove').forEach(link => {
+      link.addEventListener('click', event => {
+        event.preventDefault()
+        requestAndReplace(link.href)
+      })
    })
  }

-  attachQuantityButtons()
+  attachQuantityButtons(document)
+  initCartAjax()
  root.classList.add('test1-checkout-enhanced')
 })()
--- a/wp-content/themes/twentytwentyfour/functions.php
+++ b/wp-content/themes/twentytwentyfour/functions.php
@@ -641,7 +641,7 @@ function twentytwentyfour_water_delivery_before_cart() {
 	$remaining   = max( 0, $threshold - $subtotal );
 	$account_url = function_exists( 'wc_get_account_endpoint_url' ) ? wc_get_account_endpoint_url( 'orders' ) : '';
 	?>
-	<div class="water-commerce-panel water-commerce-panel-cart">
+	<div class="water-commerce-panel water-commerce-panel-cart js-cart-dynamic-region">
 		<div class="water-commerce-panel-head">
 			<h2><?php esc_html_e( 'Проверьте заказ перед оформлением', 'twentytwentyfour' ); ?></h2>
 			<p><?php esc_html_e( 'Измените количество бутылей, удалите лишние позиции и перейдите к оформлению доставки воды по Севастополю.', 'twentytwentyfour' ); ?></p>
@@ -667,6 +667,48 @@ function twentytwentyfour_water_delivery_before_cart() {
 }
 add_action( 'woocommerce_before_cart', 'twentytwentyfour_water_delivery_before_cart', 5 );

+/**
+ * Rename default cross-sells heading for water delivery cart.
+ *
+ * @param string $heading Default heading.
+ * @return string
+ */
+function twentytwentyfour_water_delivery_cross_sells_heading( $heading ) {
+	return __( 'Добавьте к заказу помпы, стаканы и оборудование', 'twentytwentyfour' );
+}
+add_filter( 'woocommerce_product_cross_sells_products_heading', 'twentytwentyfour_water_delivery_cross_sells_heading' );
+
+add_filter( 'woocommerce_cart_totals_order_total_html', 'twentytwentyfour_water_delivery_cart_totals_order_total_html' );
+
+/**
+ * Preserve Woo total html while allowing custom wrapper styling.
+ *
+ * @param string $value Current total html.
+ * @return string
+ */
+function twentytwentyfour_water_delivery_cart_totals_order_total_html( $value ) {
+	return '<span class="water-order-total-value">' . $value . '</span>';
+}
+
+/**
+ * Add a sticky summary note before cart totals.
+ *
+ * @return void
+ */
+function twentytwentyfour_water_delivery_before_cart_totals() {
+	?>
+	<div class="water-cart-summary-box">
+		<div class="water-cart-summary-usp"><?php esc_html_e( 'Доставка воды по Севастополю за 2-4 часа', 'twentytwentyfour' ); ?></div>
+		<ul class="water-cart-summary-list">
+			<li><?php esc_html_e( 'Стоимость доставки рассчитывается автоматически по зоне', 'twentytwentyfour' ); ?></li>
+			<li><?php esc_html_e( 'Залог за тару показывается отдельной строкой при необходимости', 'twentytwentyfour' ); ?></li>
+			<li><?php esc_html_e( 'После проверки корзины можно сразу перейти к оформлению', 'twentytwentyfour' ); ?></li>
+		</ul>
+	</div>
+	<?php
+}
+add_action( 'woocommerce_before_cart_totals', 'twentytwentyfour_water_delivery_before_cart_totals', 5 );
+
 /**
 * Add SEO content after the cart.
 *
--- a/wp-content/themes/twentytwentyfour/page-cart.php
+++ b/wp-content/themes/twentytwentyfour/page-cart.php
@@ -91,13 +91,27 @@
 								<strong><?php esc_html_e( 'После проверки корзины вы можете сразу перейти к оформлению заказа и выбрать удобное время доставки', 'twentytwentyfour' ); ?></strong>
 							</div>
 						</div>
+						<div class="cart-trust-grid">
+							<div class="cart-trust-card">
+								<span><?php esc_html_e( 'Бесплатная доставка', 'twentytwentyfour' ); ?></span>
+								<strong><?php esc_html_e( 'Добавьте еще позиции и увеличьте шанс получить бесплатную доставку по вашей зоне', 'twentytwentyfour' ); ?></strong>
+							</div>
+							<div class="cart-trust-card">
+								<span><?php esc_html_e( 'Обмен тары', 'twentytwentyfour' ); ?></span>
+								<strong><?php esc_html_e( 'Если есть пустые бутыли, мы учтем обмен при следующем шаге оформления', 'twentytwentyfour' ); ?></strong>
+							</div>
+							<div class="cart-trust-card">
+								<span><?php esc_html_e( 'Полезные дополнения', 'twentytwentyfour' ); ?></span>
+								<strong><?php esc_html_e( 'К заказу воды можно добавить помпы, стаканы и кулеры прямо из рекомендаций WooCommerce', 'twentytwentyfour' ); ?></strong>
+							</div>
+						</div>
 					</div>

 					<div class="premium-stack reveal reveal-delay-1">
 						<aside class="glass-card premium-aside premium-aside-cart">
 							<div class="premium-aside-head">
 								<span class="eyebrow eyebrow-inverse"><?php esc_html_e( 'Что проверить', 'twentytwentyfour' ); ?></span>
-								<h2><?php esc_html_e( 'Подготовьте заказ к оформлению', 'twentytwentyfour' ); ?></h2>
+								<h2><?php esc_html_e( 'Подготовьте корзину к оформлению', 'twentytwentyfour' ); ?></h2>
 							</div>
 							<div class="premium-timeline">
 								<div class="premium-timeline-item">
@@ -123,6 +137,9 @@
 									<strong><?php esc_html_e( 'Питьевая и минеральная вода в компактных форматах для кухни, гостей и переговорных', 'twentytwentyfour' ); ?></strong>
 								</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">