How drop-ins coordinate on a page

Multiple drop-ins on one page (for example, Cart and Auth) share a single event busA shared in-memory channel that lets drop-in components on the same page publish and subscribe to events without depending directly on each other. (@dropins/tools/event-bus.js). They publish and listen for small messages so each package can react without importing the others directly. Read this page before you rely on Events alone. Otherwise it is easy to mix up in-page bus messages with analytics data or calls to Commerce services.

Same tab and document

The bus is an in-memory channel for one loaded HTML document in one tab. Code that imports @dropins/tools/event-bus.js in that same JavaScript context can emit and listen together. A full navigation to another URL, a new tab, or a separate cross-origin iframe loads a different context, so those environments do not share the same bus instance unless you build an explicit bridge (not part of the default Commerce boilerplate pattern).

If you wondered how cart and checkout work when they are different pages: the next document does not inherit the previous page’s bus. Commerce keeps the cart on the server, and storefront bootstrap code loads the cart again on the new page so events such as cart/initialized occur in that new context. The full walk-through, with Commerce boilerplate file links, is under Multiple storefront routes on the Events page. Patterns such as getCartDataFromCache are in Using drop-ins. API details are in the Event Bus API reference.

Each colored box is a drop-in package on the same page. Solid arrows show events emitted to the bus; dashed arrows show events consumed from the bus. Pink is your custom code alongside those drop-ins.

Loading diagram...

Solid arrows: events emitted. Dashed arrows: events consumed. Your storefront code can emit and listen alongside drop-ins.

• events.on(name, handler, options) — subscribe. Returns a subscription handle.
• events.emit(name, payload) — publish an event
• subscription.off() — unsubscribe (call on the handle returned from events.on)

Each drop-in component documents which events it emits and listens to. See the event bus API reference and the drop-in events overview for details.

Events vs. analytics

The event bus handles internal communication between drop-in components on the page. It is separate from behavioral data for Adobe Commerce Services (Live Search, Product Recommendations) sent through the Adobe Client Data Layer (a JavaScript library that captures shopper behavior from the storefront for analytics). See Analytics.

What’s next

Commerce services and backends explains Edge Delivery, the boilerplate, backends, hosted catalog and search services, and prerequisites.