stock check, variants in cart, variant buttons in product page

resources/js/checkout/bbk-cart-controller.js

@@ -13,7 +13,7 @@ import { csrfToken } from './csrf'
 // Appearance is entirely CSS-driven: open state is the data-bbk-cart-state
 // attribute on the root, nothing here touches styles or class lists.
 export default class extends Controller {
-    static targets = ['panel', 'body']
+    static targets = ['panel', 'body', 'error']
 
     connect() {
         this.onChanged = this.onChanged.bind(this)
@@ -78,6 +78,7 @@ export default class extends Controller {
 
     async send(form) {
         this.bodyTarget.setAttribute('aria-busy', 'true')
+        this.clearError()
 
         try {
             const response = await fetch(form.action, {
@@ -85,16 +86,42 @@ export default class extends Controller {
                 headers: {
                     'X-CSRF-TOKEN': csrfToken(),
                     'X-Requested-With': 'XMLHttpRequest',
+                    Accept: 'application/json',
                 },
                 body: new FormData(form),
             })
 
-            if (response.ok) this.replaceBody(await response.text())
+            if (response.ok) {
+                this.replaceBody(await response.text())
+                return
+            }
+
+            const data = await response.json().catch(() => null)
+            this.showError(data?.error)
+
+            // The rejected quantity (typed, or from a +/- click) is left
+            // sitting in the input with nothing to correct it — the update
+            // never reached the cart, so the input must be put back to what
+            // the cart actually still holds, not just left showing whatever
+            // was rejected.
+            const input = form.querySelector('[data-bbk-cart-confirmed-quantity]')
+            if (input) input.value = input.dataset.bbkCartConfirmedQuantity
         } finally {
             this.bodyTarget.removeAttribute('aria-busy')
         }
     }
 
+    showError(message) {
+        if (!this.hasErrorTarget || !message) return
+        this.errorTarget.textContent = message
+        this.errorTarget.hidden = false
+    }
+
+    clearError() {
+        if (!this.hasErrorTarget) return
+        this.errorTarget.hidden = true
+    }
+
     replaceBody(html) {
         this.bodyTarget.innerHTML = html
         this.emitUpdated(this.bodyTarget.querySelector('[data-bbk-cart-count]'))