cart drawer and general structure

resources/js/stimulus/cart-count-controller.js

@@ -0,0 +1,31 @@
+import { Controller } from '@hotwired/stimulus'
+
+// 3dealer-side glue for the checkout module. The module owns the cart and emits
+// `bbk-cart:updated` {count, total} on window after every change; this reflects
+// the line count on the header bag icon. How (or whether) that count is shown
+// is the host's call — hence this lives here, not in the module.
+export default class extends Controller {
+    static targets = ['badge']
+
+    connect() {
+        this.onUpdate = (event) => this.render(event.detail?.count ?? 0)
+        window.addEventListener('bbk-cart:updated', this.onUpdate)
+    }
+
+    disconnect() {
+        window.removeEventListener('bbk-cart:updated', this.onUpdate)
+    }
+
+    // Header cart icon click — there's no separate cart page, the drawer IS
+    // the cart. `bbk-cart:open` is the module's own event, already listened
+    // for by bbk-cart-controller.
+    open() {
+        window.dispatchEvent(new CustomEvent('bbk-cart:open'))
+    }
+
+    render(count) {
+        if (!this.hasBadgeTarget) return
+        this.badgeTarget.textContent = String(count)
+        this.badgeTarget.hidden = count < 1
+    }
+}

resources/js/stimulus/index.js

@@ -6,6 +6,7 @@
 import AppearController         from './appear-controller'
 import AutoSubmitController     from './auto-submit-controller'
 import BackToTopController      from './back-to-top-controller'
+import CartCountController      from './cart-count-controller'
 import CarouselController       from './carousel-controller'
 import DropdownController       from './dropdown-controller'
 import FrameScrollController    from './frame-scroll-controller'
@@ -21,6 +22,7 @@ export function registerControllers(application) {
     application.register('appear',           AppearController)
     application.register('auto-submit',      AutoSubmitController)
     application.register('back-to-top',      BackToTopController)
+    application.register('cart-count',       CartCountController)
     application.register('carousel',         CarouselController)
     application.register('dropdown',         DropdownController)
     application.register('frame-scroll',     FrameScrollController)

resources/js/stimulus/product-form-controller.js

@@ -38,6 +38,13 @@ export default class extends Controller {
             this.imageTarget.src = variant.image
         }
 
+        // Keep the checkout module's add-to-cart form pointed at the chosen
+        // variant. [data-bbk-purchasable-input] is that module's documented
+        // hook (see resources/views/checkout/components/add-to-cart.blade.php);
+        // this is the one place the two touch.
+        const purchasableInput = this.element.querySelector('[data-bbk-purchasable-input]')
+        if (purchasableInput) purchasableInput.value = id
+
         this.swatchTargets.forEach(swatch => {
             const isSelected = parseInt(swatch.dataset.variantId) === id
             swatch.classList.toggle('is-selected', isSelected)