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

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;

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')
 })()