feat(storefront): BCTHEME-1836 Storefront nav for switching between c…

…ountry-specific websites (step 1)

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Storefront nav for switching between country-specific websites (step 1) [#2453](https://github.com/bigcommerce/cornerstone/pull/2453)
 - ADA Compliance - Accordion buttons are not read by screen reader correctly [#2441](https://github.com/bigcommerce/cornerstone/pull/2441)
 - ADA Compliance - Region requires additional ARIA markup to assist screen reader users [#2435](https://github.com/bigcommerce/cornerstone/pull/2435)
 - ADA Compliance - Add translations to accessibility attributes for Coupon Code and Gift Certificates [#2440](https://github.com/bigcommerce/cornerstone/pull/2440)

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

@@ -100,7 +100,8 @@
     }
 }
 
-.navUser-action--currencySelector + .dropdown-menu {
+.navUser-action--currencySelector + .dropdown-menu,
+.navUser-action--channelSelector + .dropdown-menu {
     &::before {
         left: auto !important; // 6
         right: spacing("half"); // 6

config.json

@@ -43,6 +43,36 @@
     "Firefox ESR"
   ],
   "settings": {
+    "channel_selector": {
+      "channels": [
+        {
+          "id": 1,
+          "name": "Channel_1",
+          "code": "code_1",
+          "is_active": false,
+          "switch_url":"/?setChannelId=1"
+        },
+        {
+          "id": 2,
+          "name": "Channel_2",
+          "code": "code_2",
+          "is_active": true,
+          "switch_url":"/?setChannelId=2"
+        },
+        {
+          "id": 3,
+          "name": "Channel_3",
+          "code": "code_3",
+          "is_active": false,
+          "switch_url":"/?setChannelId=3"
+        }
+      ],
+      "active_channel_id": 2,
+      "active_channel_name": "Channel_2",
+      "active_channel_code": "code_2",
+      "default_channel_code": "code_2"
+    },
+    "hide_channels": false,
     "hide_breadcrumbs": false,
     "hide_page_heading": false,
     "hide_category_page_heading": false,

lang/en.json

@@ -143,6 +143,8 @@
         "generic_error": "Oops! Something went wrong.",
         "currency": "Select Currency: {code}",
         "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?",
+        "channel": "Select Channel: {code}",
+        "channel_switch_warning" : "Warning text for channel switching",
         "newsletter_signup": "Register for our newsletter",
         "form_submit": "Submit",
         "no_preference": "No Preference",

templates/components/common/channel-selector.html

@@ -0,0 +1,32 @@
+{{#if theme_settings.channel_selector.channels.length '>' 1}}
+<ul class="navUser-section">
+    <li class="navUser-item">
+        <a href="#"
+           class="navUser-action navUser-action--channelSelector has-dropdown"
+           data-dropdown="channelSelection"
+           aria-controls="channelSelection"
+           aria-expanded="false"
+        >
+        {{lang 'common.channel' code=theme_settings.channel_selector.active_channel_code}}
+            <i class="icon" aria-hidden="true">
+                <svg>
+                    <use href="#icon-chevron-down"/>
+                </svg>
+            </i>
+        </a>
+        <ul class="dropdown-menu" id="channelSelection" data-dropdown-content aria-hidden="true" tabindex="-1">
+            {{#each theme_settings.channel_selector.channels}}
+                <li class="dropdown-menu-item">
+                    <a href="{{{switch_url}}}" data-currency-code="{{{code}}}" data-warning="{{lang 'common.channel_switch_warning'}}">
+                        {{#if is_active}}
+                            <strong>{{name}} - {{code}}</strong>
+                        {{else}}
+                            {{name}} - {{code}}
+                        {{/if}}
+                    </a>
+                </li>
+            {{/each}}
+        </ul>
+    </li>
+</ul>
+{{/if}}

templates/components/common/navigation.html

@@ -3,6 +3,10 @@
         {{> components/common/currency-selector}}
     {{/or}}
 
+    {{#unless theme_settings.hide_channels}}
+        {{> components/common/channel-selector}}
+    {{/unless}}
+
     <ul class="navUser-section navUser-section--alt">
         {{#if customer.store_credit.value '>' 0}}
             <li class="navUser-item">