salla-localization-modal

A modal that lets the customer pick the store language and currency. Place one instance in the theme (usually the header or footer). It opens when the localization::open event fires (and, outside native mobile apps, on currency::open and language::open), when open() is called, or from its own trigger button when show-trigger is set. A language or currency list is only shown if the store offers more than one choice; the modal closes itself if there is nothing to choose. Lists with fewer than 6 entries render as radio buttons, longer lists as a <select>. Confirming sets the s-lang and s-curr cookies, changes the currency through the API and reloads the page with the chosen language.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-localization-modal> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaLocalizationModal } from '@salla.sa/twilight-components-react/localization-modal';

Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

ExampleCopy Anchor Link

import { SallaLocalizationModal } from '@salla.sa/twilight-components-react/localization-modal';

export function Example() {
  return (
    <SallaLocalizationModal showTrigger />
  );
}

import { SallaLocalizationModal } from '@salla.sa/twilight-components-react/localization-modal';

export function Example() {
  return (
    <SallaLocalizationModal>
      <div slot="language"><label htmlFor="lang-{code}">{'{'}name{'}'}</label></div>
      <div slot="currency"><label htmlFor="currency-{code}">{'{'}name{'}'} {'{'}symbol{'}'}</label></div>
    </SallaLocalizationModal>
  );
}

PropertiesCopy Anchor Link

MethodsCopy Anchor Link

Call these on the element or a React ref.

close() => Promise<HTMLElement>Copy Anchor Link

Closes the modal.

Returns Promise<HTMLElement>: A Promise that resolves when the modal has closed.

open() => Promise<any>Copy Anchor Link

Opens the modal, loads the available languages and currencies, and closes it again if there is nothing to choose between.

Returns Promise<any>: A Promise that resolves when loading has finished.

submit() => Promise<void>Copy Anchor Link

Applies the selected currency and language: changes the currency through the API, stores the s-lang and s-curr cookies, closes the modal and navigates to the same page with the chosen language.

SlotsCopy Anchor Link

RelatedCopy Anchor Link

Renders: <salla-modal>, <salla-skeleton>, <salla-placeholder>, <salla-button>.