@bolder/storefront

Headless storefront SDK for Bolder shops.

Install

npm install @bolder/storefront

Usage

ES module (bundler / framework)

import { createStorefront, ShoppingBeacon } from '@bolder/storefront'

const storefront = await createStorefront({ shop: 'acme' })

// mount a component into a DOM element
storefront.mount(ShoppingBeacon, '#beacon', { position: 'bottom-right' })

// low-level cart API
storefront.cart.add(variantId, quantity)

// live search, wired to an input
storefront.search.bindTo(document.querySelector('#search'), { minChars: 3 })
  .on('results', (evt, results) => renderResults(results.products))

Script tag (zero build tooling)

Optional 6th argument overrides apiBase — omit it in production:

<script>
(function(b,o,l,d,e,r){
b.Bolder=b.Bolder||{};b.Bolder.ready=b.Bolder.ready||function(n){
(b.Bolder.q=b.Bolder.q||[]).push(n)};var s=o.createElement(l);
s.src=e;s.async=1;s.dataset.shop=d;r&&(s.dataset.apiBase=r);
o.head.appendChild(s)})(window,document,'script','acme',
'https://cdn.jsdelivr.net/npm/@bolder/storefront/dist/storefront.umd.cjs');

Bolder.ready(function(storefront) {
  storefront.mount(BolderStorefront.ShoppingBeacon, '#beacon')
})
</script>

Config options

| Option | Default | Description | |--------|---------|-------------| | shop | — | Shop subdomain (e.g. acme) | | apiBase | https://<shop>.boldershops.com | Override API base URL | | locale | es-CL | Locale for formatting | | currency | — | Currency code | | onBeforeAdd | — | fn(proceed) — gate called before quickAdd; call proceed() to continue | | onError | — | fn(err) — cart mutation error handler | | searchUrl | Bolder's hosted search service | Override the WebSocket URL storefront.search connects to |

For the full API (search, checkout, Emitter, mount options, config priority) see docs/headless-reference.md.

License

MIT