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

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

@@ -6,12 +6,15 @@ import { csrfToken } from './csrf'
 // `bbk-cart:changed` window event. No DOM building here — the drawer
 // (bbk-cart-controller) owns rendering.
 export default class extends Controller {
+    static targets = ['error']
+
     async add(event) {
         event.preventDefault()
 
         const form = this.element
         const submit = form.querySelector('[type="submit"]')
 
+        this.clearError()
         form.setAttribute('data-bbk-add-to-cart-state', 'loading')
         if (submit) submit.disabled = true
 
@@ -21,11 +24,16 @@ export default class extends Controller {
                 headers: {
                     'X-CSRF-TOKEN': csrfToken(),
                     'X-Requested-With': 'XMLHttpRequest',
+                    Accept: 'application/json',
                 },
                 body: new FormData(form),
             })
 
-            if (!response.ok) return
+            if (!response.ok) {
+                const data = await response.json().catch(() => null)
+                this.showError(data?.error)
+                return
+            }
 
             window.dispatchEvent(new CustomEvent('bbk-cart:changed', {
                 detail: { html: await response.text() },
@@ -35,4 +43,15 @@ export default class extends Controller {
             if (submit) submit.disabled = false
         }
     }
+
+    showError(message) {
+        if (!this.hasErrorTarget || !message) return
+        this.errorTarget.textContent = message
+        this.errorTarget.hidden = false
+    }
+
+    clearError() {
+        if (!this.hasErrorTarget) return
+        this.errorTarget.hidden = true
+    }
 }