Localization
All Wheelbase Web Components support internationalization through the locale attribute. The component automatically loads the appropriate translations and locale-specific formatting (currency, units, etc.).
Automatic Localization: When you set the locale attribute, the web component automatically loads the appropriate translations and locale-specific formatting without any additional configuration.
Supported Locales
| Locale | Language | Region | Currency | Units |
|---|---|---|---|---|
en-us | English | United States | USD ($) | Imperial |
en-ca | English | Canada | CAD ($) | Metric |
fr-ca | French | Canada | CAD ($) | Metric |
en-gb | English | United Kingdom | GBP (£) | Metric |
en-au | English | Australia | AUD ($) | Metric |
en-nz | English | New Zealand | NZD ($) | Metric |
de-de | German | Germany | EUR (€) | Metric |
fr-fr | French | France | EUR (€) | Metric |
es-es | Spanish | Spain | EUR (€) | Metric |
it-it | Italian | Italy | EUR (€) | Metric |
Basic Usage
Set the locale using the locale attribute:
<!-- French Canadian locale -->
<wheelbase-store dealer-id="24019" locale="fr-ca"></wheelbase-store>
<!-- German locale -->
<wheelbase-store dealer-id="12345" locale="de-de"></wheelbase-store>
<!-- Spanish locale -->
<wheelbase-store dealer-id="67890" locale="es-es"></wheelbase-store>Dynamic Locale Switching
You can change the locale programmatically using JavaScript:
// Dynamically change locale
const storeElement = document.querySelector('wheelbase-store');
storeElement.locale = 'fr-ca';
// Or create with specific locale
const newStore = document.createElement('wheelbase-store');
newStore.dealerId = 24019;
newStore.locale = 'de-de';
document.body.appendChild(newStore);What Gets Localized
User Interface Text
- Button labels (“Book Now”, “View Details”, etc.)
- Filter labels and options
- Error messages and notifications
- Loading states and placeholders
Formatting
- Currency: Displays in local currency format
- Dates: Uses local date format (MM/DD/YYYY vs DD/MM/YYYY)
- Numbers: Proper thousands separators and decimal points
- Units: Imperial vs Metric (miles/kilometers, feet/meters)
Content Direction
- LTR Support: All supported locales use left-to-right text direction
- Future RTL: Arabic and Hebrew support planned for future releases
Locale Detection
Browser Language Detection
If no locale is specified, the component will attempt to detect the user’s preferred language:
// Automatic detection based on browser language
<wheelbase-store dealer-id="24019"></wheelbase-store>
// The component will check:
// 1. Browser's primary language (navigator.language)
// 2. Browser's language preferences (navigator.languages)
// 3. Falls back to 'en-us' if no match foundPerformance Considerations
Lazy Loading
Translation files are loaded on-demand based on the selected locale:
// Only loads the German translation file when needed
<wheelbase-store dealer-id="24019" locale="de-de"></wheelbase-store>Caching
Translation files are cached in the browser for better performance:
// Subsequent components with the same locale load instantly
<wheelbase-store dealer-id="24019" locale="de-de"></wheelbase-store>
<wheelbase-rentals-list locale="de-de"></wheelbase-rentals-list>Standalone App: When running the app in standalone mode (not as web components), the locale can also be set via URL query parameters: ?locale=fr-ca. This only applies to the standalone development environment.
Troubleshooting
Common Issues
Locale not applying: Ensure the locale code is correctly formatted (e.g., fr-ca, not fr_CA)
Mixed languages: Check that all components on the page use the same locale attribute
Currency not updating: Verify that the locale includes currency information in our supported locales table
Missing translations: Some text might not be translated if it comes from external APIs - contact support for assistance
Debug Mode
Enable debug mode to see localization information:
<wheelbase-store dealer-id="24019" locale="fr-ca" debug="true"></wheelbase-store>This will log localization information to the browser console.