Customer Console

The account area (orders, addresses, subscriptions, wishlist) as a separate, tree-shakeable entry point.

The Customer Console (account area — orders, addresses, subscriptions, wishlist, etc.) ships as a separate entry point so you only pay for it if you import it:

import { createConsole, mountConsole, CustomerConsole, OrderTracking } from 'bolder-storefront/console'

This is a separate bundle (dist/console.js / dist/console.umd.cjs) — tree-shaking can’t reach it from the main bolder-storefront import.

createConsole()

createConsole(authAjax) builds the loaders and updaters the CustomerConsole component reads its data from, using storefront.authAjax (the credentialed request client) so requests carry the customer’s session.

import { createStorefront } from 'bolder-storefront'
import { createConsole } from 'bolder-storefront/console'

createStorefront({ shop: 'acme' }).then(function(storefront) {
  var api = createConsole(storefront.authAjax)

  // api.loaders — functions that fetch data sections
  // api.updaters — functions that mutate data
})

Loaders (api.loaders) — each is (cb, filters?) → cb(err, data):

Key	Endpoint	Returns
`profile`	`GET /user.json`	User profile object
`orders`	`GET /customer/orders.json`	`{ orders: [] }` (accepts `{ page, per_page }` filters)
`tracking`	`GET /customer/orders/:id/tracking.json`	Tracking data for one order
`subscriptions`	`GET /customer/subscriptions.json`	Array of subscriptions
`card_tokens`	`GET /customer/card_tokens.json`	Array of saved cards
`payment_methods`	`GET /customer/payment_methods.json`	Array of payment methods
`addresses`	`GET /customer/addresses.json`	Array of addresses
`wishlist`	`GET /customer/favorites.json`	Array of products
`recent_products`	`GET /customer/purchased.json`	Array of recently purchased products
`buyer_points`	`GET /customer/points.json`	Array of loyalty-point transactions
`countries`	`GET /delivery/shipping_countries.json`	Raw `(code, body)` passthrough
`regions`	`GET /delivery/shipping_regions.json`	Raw `(code, body)` passthrough (accepts params)

Updaters (api.updaters) — each is (body, cb) → cb(err, data):

Key	Action
`logout`	`GET /customer/logout`
`update_user`	`PUT /customer/profile`
`update_subscription`	`PUT /customer/subscriptions/:id`
`pause_subscription`	`POST /customer/subscriptions/:id/pause`
`unpause_subscription`	`POST /customer/subscriptions/:id/unpause`
`cancel_subscription`	`DELETE /customer/subscriptions/:id`
`reenable_subscription`	`POST /customer/subscriptions/:id/reenable`
`add_address`	`POST /customer/addresses`
`edit_address`	`PUT /customer/addresses/:id`
`delete_address`	`DELETE /customer/addresses/:id`
`toggle_favorite`	`POST /user/toggle_favorite.json?product_id=…`
`remove_card_token`	`DELETE /console/card_tokens/:id.json`
`add_order_document`	`PUT /console/add_order_document/:id.json`

mountConsole()

mountConsole(storefront, target, data, opts) is the recommended way to mount the Customer Console. It wires CustomerConsole with OrderTracking as a sub-component (so order-tracking modals work) and calls createConsole() internally — no need to call it yourself.

import { createStorefront } from 'bolder-storefront'
import { mountConsole } from 'bolder-storefront/console'

createStorefront({ shop: 'acme' }).then(function(storefront) {
  var handle = mountConsole(storefront, '#console-container', { options: {} })
  // handle.update(data), handle.unmount()
})

Use storefront.mount(CustomerConsole, …) directly only if you need to wire sub-components yourself or pass a custom loaders/updaters set.