Skip to content

Commit c4d78c9

Browse files
bc-yevhenii-buliukbc-yevhenii-buliuk
committed
feat(storefront): SD-11287 create Language Selector Component (UI implementation)
1 parent 8278072 commit c4d78c9

File tree

10 files changed

+122
-1
lines changed

10 files changed

+122
-1
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
55
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
66

77
## Draft
8+
- Create Language Selector Component (UI implementation) [#2562](https://github.com/bigcommerce/cornerstone/pull/2562)
89
- Add net-new "order.pickup_addresses" to unify objects used on Order Details and Order Invoice pages [#2557](https://github.com/bigcommerce/cornerstone/pull/2557)
910

1011
## 6.16.2 (06-18-2025)

‎assets/scss/components/stencil/navUser/_navUser.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,8 @@
101101
}
102102

103103
.navUser-action--currencySelector + .dropdown-menu,
104-
.navUser-action--channelSelector + .dropdown-menu {
104+
.navUser-action--channelSelector + .dropdown-menu,
105+
.navUser-action--languageSelector + .dropdown-menu {
105106
&::before {
106107
left: auto !important; // 6
107108
right: spacing("half"); // 6

‎config.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,33 @@
6767
}
6868
],
6969
"show_channels": false,
70+
"language_selector_mock_data": {
71+
"locales": [
72+
{
73+
"is_default": true,
74+
"is_selected": true,
75+
"code": "en",
76+
"name": "English",
77+
"path": "/en"
78+
},
79+
{
80+
"is_default": false,
81+
"is_selected": false,
82+
"code": "fr",
83+
"name": "Français",
84+
"path": "/fr"
85+
},
86+
{
87+
"is_default": false,
88+
"is_selected": false,
89+
"code": "fr",
90+
"name": "Español (Perú)",
91+
"path": "/es-pe"
92+
}
93+
],
94+
"selected_locale_name": "English"
95+
},
96+
"show_language_selector_mock_data": true,
7097
"hide_breadcrumbs": false,
7198
"hide_page_heading": false,
7299
"hide_category_page_heading": false,

‎lang/en.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,8 @@
145145
"currency_switch_promotion" : "Promotions and gift certificates that don't apply to the new currency will be removed from your cart. Are you sure you want to continue?",
146146
"channel": "Store: {code}",
147147
"channel_switch_warning" : "Warning text for store switching",
148+
"locale_switch_warning" : "Warning text for language switching",
149+
"locale": "Language: {name}",
148150
"newsletter_signup": "Register for our newsletter",
149151
"form_submit": "Submit",
150152
"no_preference": "No Preference",

‎schema.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -720,6 +720,11 @@
720720
"label": "i18n.ChannelSelector",
721721
"id": "show_channels"
722722
},
723+
{
724+
"type": "checkbox",
725+
"label": "i18n.languageSelector",
726+
"id": "show_channels"
727+
},
723728
{
724729
"type": "color",
725730
"label": "i18n.TextColor",

‎schemaTranslations.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1652,6 +1652,9 @@
16521652
"pl": "Selektor witryny sklepu",
16531653
"ja": "ストアフロントセレクターを表示"
16541654
},
1655+
"i18n.languageSelector": {
1656+
"default": "Show language selector"
1657+
},
16551658
"i18n.TextColor": {
16561659
"default": "Text color",
16571660
"fr": "Couleur du texte",

‎templates/components/common/language-selector-mobile.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<a class="navPages-action has-subMenu"
2+
href="#"
3+
data-collapsible="navPages-locale"
4+
aria-controls="navPages-locale"
5+
aria-expanded="false"
6+
aria-label="{{lang 'common.locale' name=theme_settings.language_selector_mock_data.selected_locale_name}}"
7+
>
8+
{{lang 'common.locale' name=theme_settings.language_selector_mock_data.selected_locale_name}}
9+
<i class="icon navPages-action-moreIcon" aria-hidden="true">
10+
<svg>
11+
<use href="#icon-chevron-down"></use>
12+
</svg>
13+
</i>
14+
</a>
15+
<div class="navPage-subMenu" id="navPages-locale" aria-hidden="true" tabindex="-1">
16+
<ul class="navPage-subMenu-list">
17+
{{#each theme_settings.language_selector_mock_data.locales}}
18+
<li class="navPage-subMenu-item">
19+
<a class="navPage-subMenu-action navPages-action"
20+
href="{{path}}"
21+
data-locale-code="{{{code}}}"
22+
data-warning="{{lang 'common.locale_switch_warning'}}"
23+
aria-label="{{name}}"
24+
>
25+
{{#if is_selected}}
26+
<strong>{{name}}</strong>
27+
{{else}}
28+
{{name}}
29+
{{/if}}
30+
</a>
31+
</li>
32+
{{/each}}
33+
</ul>
34+
</div>

‎templates/components/common/language-selector.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<ul class="navUser-section">
2+
<li class="navUser-item">
3+
<a class="navUser-action navUser-action--languageSelector has-dropdown"
4+
href="#"
5+
data-dropdown="languageSelection"
6+
aria-controls="languageSelection"
7+
aria-expanded="false"
8+
aria-label="{{lang 'common.locale' name=theme_settings.language_selector_mock_data.selected_locale_name}}"
9+
>
10+
{{lang 'common.locale' name=theme_settings.language_selector_mock_data.selected_locale_name}}
11+
<i class="icon" aria-hidden="true">
12+
<svg>
13+
<use href="#icon-chevron-down" />
14+
</svg>
15+
</i>
16+
</a>
17+
<ul class="dropdown-menu" id="languageSelection" data-dropdown-content aria-hidden="true" tabindex="-1">
18+
{{#each theme_settings.language_selector_mock_data.locales}}
19+
<li class="dropdown-menu-item">
20+
<a href="{{path}}"
21+
data-locale-code="{{code}}"
22+
data-warning="{{lang 'common.locale_switch_warning'}}"
23+
aria-label="{{name}}"
24+
>
25+
{{#if is_selected}}
26+
<strong>{{name}}</strong>
27+
{{else}}
28+
{{name}}
29+
{{/if}}
30+
</a>
31+
</li>
32+
{{/each}}
33+
</ul>
34+
</li>
35+
</ul>

‎templates/components/common/navigation-menu.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,13 @@
6868
</div>
6969
</li>
7070
{{/if}}
71+
{{#if theme_settings.show_language_selector_mock_data}}
72+
{{#if theme_settings.language_selector_mock_data.locales.length '>' 1}}
73+
<li class="navPages-item">
74+
{{> components/common/language-selector-mobile}}
75+
</li>
76+
{{/if}}
77+
{{/if}}
7178
{{#if theme_settings.show_channels}}
7279
<li class="navPages-item">
7380
{{> components/common/channel-selector-mobile}}

‎templates/components/common/navigation.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
{{> components/common/currency-selector}}
44
{{/or}}
55

6+
{{#if theme_settings.show_language_selector_mock_data}}
7+
{{#if theme_settings.language_selector_mock_data.locales.length '>' 1}}
8+
{{> components/common/language-selector}}
9+
{{/if}}
10+
{{/if}}
11+
612
{{#if theme_settings.show_channels}}
713
{{> components/common/channel-selector}}
814
{{/if}}

0 commit comments

Comments
 (0)