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

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