Language
The Language component displays a language selector that allows visitors to choose their preferred language for the shopping experience.
Usage
<fluid-language></fluid-language>
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
hide-widget | boolean | false | Whether to hide the component |
class-name | string | — | Additional CSS classes |
Display Options
| Attribute | Type | Default | Description |
|---|---|---|---|
display-type | string | 'dropdown' | Display type: 'dropdown', 'buttons', 'list' |
show-native-name | boolean | true | Show language in its native form (e.g., "Español") |
show-english-name | boolean | false | Show language in English (e.g., "Spanish") |
show-code | boolean | false | Show language codes (en, es, fr, etc.) |
Examples
Dropdown Selector
<fluid-language display-type="dropdown"></fluid-language>
Button Toggle
<fluid-language display-type="buttons" show-code="true" ></fluid-language>
Full List
<fluid-language display-type="list" show-native-name="true" show-english-name="true" ></fluid-language>
JavaScript API
// Get current language const language = window.FairShareSDK.getLanguage(); console.log('Language:', language); // e.g., "en" // Update locale settings including language await window.FairShareSDK.updateLocaleSettings({ language: "es" });
Related
- getLanguage — Get current language
- updateLocaleSettings — Update locale settings
- Country — Country selector component