CompanySwitcher Container

Allows users to switch between multiple companies they have access to using a dropdown selector.

Version: 1.1.1

Configuration

The CompanySwitcher container provides the following configuration options:

Parameter	Type	Req?	Description
ariaLabel	string	No	Sets a custom aria-label for the company picker dropdown. Use to improve accessibility by providing descriptive text for screen readers, especially when the picker is embedded in contexts where the default label may not be clear.
onCompanyChange	function	No	Callback when the user selects a different company. Use to refresh page data, update application state, or trigger navigation when the company context changes.
initialData	object	No	Preloaded data for the model before backend data is fetched. Use for testing, SSR, or improving initial load.

Slots

This container does not expose any customizable slots.

Usage

The following example demonstrates how to use the CompanySwitcher container:

import { render as provider } from '@dropins/storefront-company-switcher/render.js';
import { CompanySwitcher } from '@dropins/storefront-company-switcher/containers/CompanySwitcher.js';

await provider.render(CompanySwitcher, {
  onCompanyChange: () => { const redirect = Object.entries(redirections).find(([pattern]) => { const [pathname, search] = pattern.split('?'); return window.location.pathname.includes(pathname) && (!search || window.location.search.includes(search)); }); if (redirect) { const [, redirectUrl] = redirect; window.location.href = redirectUrl; } else { window.location.reload(); } }
})(block);