Components (headless import path)

Mounting bolder-storefront's bundled component factories and on-demand components from headless code.

Bundled UI components

bolder-storefront also re-exports a couple of prebuilt component factories, meant to be mounted with storefront.mount() like any other component. Their full options are documented in the Components reference (they’re the same base components used by hosted themes via Bolder.components.render(...)); this page only covers the headless import path.

import {
  createStorefront,
  CartTable, CartTotals, CartPromos,
  FeedbackButton, ShoppingBeacon,
  Slideout, Supernav,
  DeliverySetup, ShippingCalculator,
  AuthDelivery,
} from 'bolder-storefront'

createStorefront({ shop: 'acme' }).then(function(storefront) {
  storefront.mount(CartTable, '#cart-table', { show_cart_gauge: true, cart_gauge_limit: 50000 })
  storefront.mount(FeedbackButton, '#feedback-button')
})

Component	Description
`CartTable`	Cart line items with quantity controls, bundle/volume-discount hints, and an optional cart gauge. Purely a renderer — `ShoppingBeacon` mounts one internally, so only use this directly when building a custom cart UI outside the beacon.
`CartTotals`	Subtotal/total row, coupon input, and checkout button. Meant to accompany `CartTable`.
`CartPromos`	Promotion/discount display for the cart.
`Slideout`	Generic slide-out panel wrapper. Used by `ShoppingBeacon` to host the cart UI; can be reused for custom slide-out drawers.
`ShoppingBeacon`	Full cart-beacon integration: floating cart icon, slide-out cart panel (`CartTable` + `CartTotals` inside a `Slideout`), and embedded-checkout wiring. See Shopping beacon integration.
`FeedbackButton`	Floating feedback/help button. Submits through `storefront.forms` when available.
`Supernav`	Navigation bar with cart count badge, login state, and search trigger.
`DeliverySetup`	Inline delivery-address/pickup-point selector. For a managed modal overlay, use `openDeliverySetup()` instead.
`ShippingCalculator`	Standalone shipping cost estimator widget.
`AuthDelivery`	Combined login/signup + delivery-setup component. Opened imperatively via `openLogin()` for auth-only flows, or mounted inline when you need both.

For CustomerConsole and OrderTracking, see Customer Console — they ship in the separate console bundle.

On-demand components

Some components aren’t bundled into bolder-storefront at all — they’re fetched lazily, the same on-demand mechanism hosted themes use via Bolder.components.render(...). storefront.components is that same registry, auto-wired by createStorefront() (no setup needed), pointed at the shop’s own asset CDN (assetsHost, sourced from /shop.json’s shop.assets_host) rather than the current page’s origin — necessary since the page embedding the SDK is rarely served from the shop itself.

createStorefront({ shop: 'acme' }).then(function(storefront) {
  storefront.components.render('product-card', '#product-card', {
    productId:    123,
    title:        'Aurora Runner',
    salePrice:    '$89.990',
    regularPrice: '$99.990',
    images:       [{ src: '...', alt: 'Aurora Runner' }],
  }, function(result) {
    // Not error-first: fires as cb(err) on a script-load failure, or as
    // cb(node, state) — the rendered node, not null — on success.
    if (result instanceof Error) console.error(result)
  })
})

Component	Description
`product-card`	Self-contained product card: image carousel, add-to-cart with a live -/+ quantity control once the item’s in the cart. Single-axis variants (one option, e.g. just size) render as inline buttons/swatches; products with more than one variant option (color and size) open `product-variant-selector` in a slideout instead of growing their own matrix-matching logic.

Most other on-demand components (assets/js/components/ondemand/* in the storefronts repo) are hosted-theme-oriented — bundle configurators, order-tracking widgets, faceted search, etc. — and haven’t been exercised headlessly. See the Components reference for the full list; nothing stops calling storefront.components.render(...) with any of them, but their data/callback shape is only proven against the hosted Bolder.components.render(...) call sites.