Technical Reference
Custom JavaScript modules
The bespoke front-end modules that power CBP's custom features.
Custom JavaScript modules
🛠 Dev
The custom front-end is built as classes exposed on window.theme.* to avoid polluting global
scope (per CLAUDE.md). Section-specific JS is loaded with <script defer> from each section.
Module map
| File | Exposed as | Purpose |
|---|---|---|
session-manager.js | window.theme.sessionManager | JWT auth against /v1/auth; caches tokens in sessionStorage with expiry. All API calls go through it. |
vehicle-details.js | window.theme.vehicleDetails | Persists the selected vehicle and its compatible parts in localStorage; broadcasts changes. |
vehicle-suitability.js | (self-contained) | Updates "fits / doesn't fit" callouts on collection and product pages. |
rego-entry.js | window.theme.regoEntry.api | The multi-step rego lookup form (drawer and inline variants). |
postcode-entry.js | window.theme.postcodeEntry | Debounced postcode lookup; persists the returned delivery / installation_service capabilities to localStorage. |
installation.js | (self-contained) | The installation booking flow: slots, Order ID provisioning/reservation, adding battery + service to cart. |
input.js | window.theme.inputs | Address autocomplete (/v1/places) and form validation. |
analytics.js | window.theme.analytics | Publishes cbp:* events via Shopify.analytics.publish() for the Web Pixel. See Tracking. |
pubsub.js | window.theme.eventManager | Internal pub/sub bus used for cross-module state sync. |
cart-quantity-update.js | window.theme.cartQuantityUpdate | Cart quantity changes via Shopify's cart/change.js. |
Other files in assets/ (product.js, collection.js, header.js, drawer.js, etc.) are
generic theme behaviour.
Load order
snippets/vehicle-details.liquid (in <head>) loads session-manager.js then
vehicle-details.js. The API base is set up by snippets/api-init.liquid before these run. See
The backend API.
Conventions
The authoritative coding conventions (class structure, window.theme.*, debug-header guarding,
template placeholders) are in CLAUDE.md and AGENTS.md. Follow those when extending any module.