Developers
Start building
Themes/Theme SDK/Modules/chrome/Types

Types

The types of @poltura/theme-sdk/chrome.

On this page
import { … } from '@poltura/theme-sdk/chrome';

HeaderSticky

How the header behaves as the page scrolls, as the merchant set it.

behaviorrequired'static' | 'sticky' | 'reveal'

`static` scrolls away, `sticky` stays pinned, `reveal` hides on the way down and returns on the way up.

overlayrequiredboolean

Whether the header lies over the first section of this page until the page scrolls.

shrinkrequiredboolean

Whether a pinned header shrinks once the page scrolls.

HeaderData

What a header draws from, so a theme's header takes no props.

categoriesrequiredreadonly NavCategory[]

The top-level categories with their subcategories, for a category menu.

localerequiredLocale

The language the page is shown in.

localesrequiredreadonly Locale[]

Every language the store offers, the current one included.

customerrequiredCustomer | null

The signed-in shopper, or null for a guest.

signedInrequiredboolean

Whether the shopper is signed in.

stickyrequiredHeaderSticky

How the header behaves as the page scrolls.

LocaleSwitcherState

Language choice state.

currentrequiredLocale

The language the page is shown in.

availablerequiredreadonly Locale[]

Every language the store offers, the current one included; fewer than two means no choice.

hrefForrequired(locale: Locale) => string

The page being viewed, at its address in another language.

switchTorequired(locale: Locale) => void

Remembers the language as the shopper's choice, then opens the page in it.

flagOfrequired(locale: Locale) => CountryCode | null

The country whose flag stands for a language, also for languages whose tag names no country.

LocaleSwitcherProps

Props of LocaleSwitcher.

display'dropdown' | 'inline'

One button opening a menu with a language and a currency group, or both groups side by side; defaults to dropdown.

label'name' | 'code' | 'flag'

Each language's own name, its two-letter code, or its flag alone; defaults to the name.

flagsboolean

Draws each language's flag before its label.

currencyboolean

Offers the currencies too; defaults to true. Turn it off where the theme draws its own {@link CurrencySwitcher}.

classNamestring

Classes added to the switcher.

attrsElementAttrs

A block's attributes, spread on the switcher's root when it draws the block itself.

CurrencySwitcherState

Currency choice state.

currentrequiredCurrencyCode

The currency prices are shown in.

availablerequiredreadonly CurrencyCode[]

Every currency the storefront offers, the current one included; fewer than two means no choice.

switchTorequired(currency: CurrencyCode) => void

Shows prices and the cart in the currency from now on, then reloads the page in it.

symbolOfrequired(currency: CurrencyCode) => string

The currency's symbol in the page language, such as `€` or `Ft`.

CurrencySwitcherProps

Props of CurrencySwitcher.

display'dropdown' | 'inline'

A dropdown behind one button, or every currency side by side; defaults to dropdown.

label'code' | 'symbol'

Each currency's code (`EUR`) or its symbol (`€`); defaults to the code.

classNamestring

Classes added to the switcher.

attrsElementAttrs

A block's attributes, spread on the switcher's root when it draws the block itself.

StorefrontChoice

A market.

idrequiredstring

The market's id, unique among the choices; several choices may share one address.

hostrequiredstring

Its address: a domain, such as `bolt.de`, or host/prefix, such as `bolt.hu/at`.

countryrequiredCountryCode

The country the storefront is made for.

countryNamerequiredstring

That country's name in the page language.

namerequiredstring

What the storefront is called in the page language: its market's name, else its country's.

StorefrontSwitcherState

Storefront choice state.

currentrequiredStorefrontChoice | null

The market the page shows, never one of `others`; null before the store has a market.

othersrequiredreadonly StorefrontChoice[]

The store's other markets, at this address or another; empty when it has only one.

moveTorequired(storefront: StorefrontChoice) => void

Takes the shopper there with their cart: in place at this address, else on the same page at the other address.

MobileMenuState

The mobile menu's state, shared by the button that opens it and the drawer that shows it.

openrequiredboolean

Whether the mobile menu is open.

setOpenrequired(open: boolean) => void

Opens or closes the menu; closing returns it to the first level.

panelrequiredstring | null

The submenu the menu has drilled into, or null at the first level.

pushrequired(panel: string) => void

Drills into a submenu.

poprequired() => void

Goes back one level.

MobileMenuProps

Props of MobileMenu.

titlerequiredstring

Names the drawer for assistive technology.

side'left' | 'right'

The edge the drawer slides in from; defaults to the left.

headerReactNode

Drawn at the top of the drawer, such as the store's logo.

childrenReactNode

What the drawer holds; defaults to the main menu.

classNamestring

Classes added to the drawer.

HeaderVisibility

Header scroll state.

scrolledrequiredboolean

Whether the page has scrolled past the header's height.

hiddenrequiredboolean

Whether a revealing header is hidden because the shopper scrolls down.

PromoBarState

The announcement strip above the header, as the merchant wrote it.

visiblerequiredboolean

Whether the strip is on and has text.

textrequiredstring

The announcement in the page language.

hrefrequiredstring

Where the announcement links.

PromoBarProps

Props of PromoBar.

classNamestring

Classes added to the strip.

BrandClasses

Class names for the pieces of Brand.

imagestring

The logo picture.

markstring

The initial drawn in place of a missing logo.

labelstring

The store's name drawn in place of a missing logo.

BrandProps

Props of Brand.

hrefstring

Where the brand links; defaults to the home page.

priorityboolean

Loads the logo first, for the header above the fold.

classNamestring

Classes added to the link.

classesBrandClasses

Classes added to the pieces.

LogoProps

Props of Logo.

imageMediaImageRef | null

A picture to draw instead of the store's logo.

widthnumber

The logo's width in pixels; defaults to 120.

fallback'name' | 'nameOnly' | 'none'

What to draw without a logo: the initial and name, the name alone, or nothing; defaults to the initial and name.

linkHomeboolean

Whether the logo links home; defaults to true.

classNamestring

Classes added to the logo.

UserMenuProps

Props of UserMenu.

display'icon' | 'label'

An icon alone, or the icon with a label; defaults to the icon.

greetboolean

Names a signed-in shopper by first name in the label.

classNamestring

Classes added to the menu button.

LocaleBannerProps

Props of LocaleBanner.

classNamestring

Classes added to the banner.

ColorModeToggleProps

Props of ColorModeToggle.

display'icon' | 'switch'

One button that flips between light and dark, or a switch of light, dark and system; defaults to the button.

classNamestring

Classes added to the toggle.

Last updated