Upsell Blocks — Theme Integration & JS Hooks

// Imperative — trigger a re-render with new state. Each field is optional.
window.Glood.upsell.refresh({
  variantId: 12345,        // override the current variant
  qty:       2,            // override the main-product quantity
  cart:      cartSnapshot, // pass a /cart.js response object directly
  refetchCart: true,       // OR fetch /cart.js fresh
})

// Pub/sub — listen for state transitions.
const unsubscribe = window.Glood.upsell.subscribe('cart-updated', ({ cart }) => {
  console.log('cart changed', cart)
})
// later:
unsubscribe()

// Manually publish — useful for instrumentation. Subscribers fire,
// but a publish() alone does NOT re-render (use refresh() for that).
window.Glood.upsell.publish('variant-changed', { variantId: 12345, productId: 67890 })

// Read-only snapshot.
const snapshot = window.Glood.upsell.getState()
// → { variantId, variantSource, productId, qty, qtySource, mode, modeSource, cart, selections }

// Canonical cart-line attribute keys — exposed for custom add-to-cart flows.
window.Glood.upsell.CART_LINE_ATTR
// → { EXTERNAL_ID, ROLE, SLOT_INDEX, TIER_ID, STATUS }

// ─── Linked-mode helpers (see "Linked vs Standalone modes" below) ──────────

// Snapshot of currently-picked pool slots, shaped exactly as Shopify
// /cart/add.js expects. Returns [] when nothing is picked.
window.Glood.upsell.getPendingItems()
// → [{ id, quantity, properties: { __glood_uo_external_id, __glood_uo_role, __glood_uo_slot_index, __glood_uo_status } }, …]

// Two-trip commit — fires /cart/add.js for getPendingItems(), clears
// selections, refreshes cart. Use when the theme can't atomically
// bundle. Returns { ok: true, items } | { ok: false, error }.
await window.Glood.upsell.commitSelections()

// Flip integration mode at runtime — overrides the per-block schema setting.
window.Glood.upsell.setMode('linked')   // or 'standalone'

effectiveMax    = slotsPerMainQty × explicitQty  (capped at maxSlots)
remainingBudget = effectiveMax − pickQtyAlreadyInCart

// Set the active variant (used for trigger-matching on PDP).
window.Glood.upsell.setVariant(45678)

// Set the TOTAL intended trigger qty (cart + about-to-add combined).
window.Glood.upsell.setQty(3)

// Both at once.
window.Glood.upsell.setContext({ variantId: 45678, qty: 3 })

// Drop back to auto mode (cart becomes the source of truth again).
window.Glood.upsell.resetSource()

window.Glood.upsell.setMode('linked')      // or 'standalone'
window.Glood.upsell.getState().mode        // 'linked'
window.Glood.upsell.getState().modeSource  // 'explicit' (vs 'block' when set via schema)

{%- comment -%} Place inside the section that hosts both the product form AND the Glood block. {%- endcomment -%}
<script>
  (function () {
    // 1. Find the host product's add-to-cart form. Dawn uses `<form action="/cart/add" ...>`.
    const form = document.querySelector('form[action*="/cart/add"]')
    if (!form) return

    form.addEventListener('submit', async (e) => {
      // Only intercept if Glood has picks AND we're in linked mode — otherwise let the theme's
      // default submit happen (standalone mode handles its own cart-add via the block button).
      const api = window.Glood && window.Glood.upsell
      if (!api) return
      if (api.getState().mode !== 'linked') return
      const upsellItems = api.getPendingItems()
      if (upsellItems.length === 0) return

      e.preventDefault()

      // 2. Build the items array: native form data first, then Glood's picks.
      const fd = new FormData(form)
      const mainItem = {
        id:       Number(fd.get('id')),
        quantity: Math.max(1, Number(fd.get('quantity')) || 1),
      }
      // Forward any line-item properties the theme adds (e.g. gift-wrap, customisations).
      const props = {}
      for (const [k, v] of fd.entries()) {
        if (k.startsWith('properties[')) {
          const key = k.slice('properties['.length, -1)
          if (key) props[key] = v
        }
      }
      if (Object.keys(props).length) mainItem.properties = props
      const items = [mainItem, ...upsellItems]

      // 3. Single POST adds everything atomically.
      try {
        const res = await fetch('/cart/add.js', {
          method:  'POST',
          headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
          body:    JSON.stringify({ items }),
        })
        if (!res.ok) {
          const body = await res.json().catch(() => ({}))
          console.warn('[Glood.upsell] linked ATC failed:', body.description || res.status)
          // Fall back to the theme's default submit so the customer still gets the host.
          form.submit()
          return
        }

        // 4. Tell the block to re-render (clears selections, re-fetches cart).
        await api.refresh({ refetchCart: true })

        // 5. Fire the theme's own "added" hooks so the cart drawer opens / the toast shows.
        document.dispatchEvent(new CustomEvent('cart:updated'))
        document.dispatchEvent(new CustomEvent('Rk:Added_To_Cart', { detail: { source: 'glood-upsell-linked' } }))
      } catch (err) {
        console.error('[Glood.upsell] linked ATC error', err)
        form.submit()
      }
    })
  })()
</script>

async function addToCartWithUpsell({ variantId, quantity, customProperties }) {
  const upsellItems = window.Glood?.upsell?.getPendingItems() ?? []
  const items = [
    { id: variantId, quantity, properties: customProperties },
    ...upsellItems,
  ]
  const res = await fetch('/cart/add.js', {
    method:  'POST',
    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
    body:    JSON.stringify({ items }),
  })
  if (!res.ok) throw new Error((await res.json()).description || res.statusText)
  await window.Glood?.upsell?.refresh({ refetchCart: true })
  return res.json()
}

// In a post-ATC `Rk:Added_To_Cart` listener, or wherever your theme signals success:
const result = await window.Glood.upsell.commitSelections()
if (!result.ok) console.warn('[upsell]', result.error)

{%- comment -%}
  Custom variant picker that doesn't fire a `change` event on a form input.
  Call refresh() directly after your picker's own state change.
{%- endcomment -%}
<script>
  document.addEventListener('my-theme:variant-selected', (e) => {
    if (window.Glood && window.Glood.upsell) {
      window.Glood.upsell.refresh({ variantId: e.detail.variantId })
    }
  })
</script>

// Option A — dispatch a change event so the auto-listener picks it up:
const qtyInput = document.querySelector('input[name="quantity"]')
qtyInput.value = String(newQty)
qtyInput.dispatchEvent(new Event('change', { bubbles: true }))

// Option B — call Glood directly (skips DOM event entirely):
window.Glood.upsell.refresh({ qty: newQty })

async function refreshCartDrawer() {
  // Your theme's existing Section Render swap goes here. Pseudocode:
  // const html = await fetch('/?section_id=cart-drawer').then(r => r.text())
  // ...swap drawer markup using your theme's own helper...

  // Re-hydrate the Glood upsell block with the new cart state:
  if (window.Glood && window.Glood.upsell) {
    window.Glood.upsell.refresh({ refetchCart: true })
  }
}

{
  items: [{
    id:       12345,         // variant id
    quantity: 1,
    properties: {
      __glood_uo_external_id: 'uo_xxxxxxxx',   // offer.external_id
      __glood_uo_role:        'pick',          // 'pick' | 'free_gift'
      __glood_uo_slot_index:  '0',             // pool slot index
      __glood_uo_status:      'pending',       // Function flips to 'qualified'
    },
  }]
}

/* Override the Glood upsell PDP panel background in a dark theme */
.glood-upsell-panel--pick {
  background: linear-gradient(180deg, #2b2640 0%, #1a1729 60%);
  border-color: #4d3a73;
  color: #fff;
}
.glood-upsell-panel--pick .glood-upsell__gift-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

// 1. Block hydrated? Public API present?
console.log({
  mounted: document.querySelectorAll('[data-glood-upsell]').length,
  hasApi:  !!window.Glood?.upsell,
  state:   window.Glood?.upsell?.getState(),
})

// 2. Payload reached the block?
const mount = document.querySelector('[data-glood-upsell]')
const payload = JSON.parse(mount.querySelector('script[data-glood-upsell-payload]').textContent)
console.log({
  pickOffers:     payload.pickOffers.length,
  freeGiftOffers: payload.freeGiftOffers.length,
})

// 3. Slot count reacts to qty input (PDP linked mode):
window.Glood.upsell.setMode('linked')
const qtyEl = document.querySelector('[name="quantity"]')
qtyEl.value = '3'; qtyEl.dispatchEvent(new Event('change', { bubbles: true }))
// → check the panel's "You have N add-on gift slots." copy updates within a frame

[Glood.upsell] render pdp { payload, state, topFreeGift }