feat(storefront): BCTHEME-1836 Storefront nav for switching between country-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,30 @@
     "Firefox ESR"
   ],
   "settings": {
+    "channels": [
+      {
+        "id": 1,
+        "name": "Light",
+        "code": "Light",
+        "is_active": true,
+        "switch_url":"https://cornerstone-light-demo.mybigcommerce.com"
+      },
+      {
+        "id": 2,
+        "name": "Bold",
+        "code": "Bold",
+        "is_active": false,
+        "switch_url":"https://cornerstone-bold-demo.mybigcommerce.com"
+      },
+      {
+        "id": 3,
+        "name": "Warm",
+        "code": "Warm",
+        "is_active": false,
+        "switch_url":"https://cornerstone-warm-demo.mybigcommerce.com"
+      }
+    ],
+    "show_channels": false,
     "hide_breadcrumbs": false,
     "hide_page_heading": false,
     "hide_category_page_heading": false,

lang/en.json

@@ -141,8 +141,10 @@
         "store_credit": "You have <strong>{store_credit}</strong> of store credit. To use it, simply place your order and you will be able to choose store credit as the payment method when it comes time to pay for your order.",
         "store_credit_overview": "{credit} Store Credit",
         "generic_error": "Oops! Something went wrong.",
-        "currency": "Select Currency: {code}",
+        "currency": "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": "Store: {code}",
+        "channel_switch_warning" : "Warning text for store switching",
         "newsletter_signup": "Register for our newsletter",
         "form_submit": "Submit",
         "no_preference": "No Preference",

schema.json

@@ -710,6 +710,11 @@
         "type": "heading",
         "content": "i18n.UtilityNavigation"
       },
+      {
+        "type": "checkbox",
+        "label": "i18n.ChannelSelector",
+        "id": "show_channels"
+      },
       {
         "type": "color",
         "label": "i18n.TextColor",

schemaTranslations.json

@@ -1529,6 +1529,9 @@
     "ko": "유틸리티 탐색",
     "pl": "Nawigacja użytkowa"
   },
+  "i18n.ChannelSelector": {
+    "default": "Show storefront selector"
+  },
   "i18n.TextColor": {
     "default": "Text color",
     "fr": "Couleur du texte",

templates/components/common/channel-selector-mobile.html

@@ -0,0 +1,42 @@
+{{#if theme_settings.channels.length '>' 1}}
+<a href="#"
+   class="navPages-action has-subMenu"
+   data-collapsible="navPages-channel"
+   aria-controls="navPages-channel"
+   aria-expanded="false"
+   aria-label="
+    {{#each theme_settings.channels}}
+        {{#if is_active}}
+            {{lang 'common.channel' code=code}}
+        {{/if}}
+    {{/each}}
+   "
+>
+    {{#each theme_settings.channels}}
+        {{#if is_active}}
+            {{lang 'common.channel' code=code}}
+        {{/if}}
+    {{/each}}
+    <i class="icon navPages-action-moreIcon" aria-hidden="true">
+        <svg>
+            <use href="#icon-chevron-down"></use>
+        </svg>
+    </i>
+</a>
+<div class="navPage-subMenu" id="navPages-channel" aria-hidden="true" tabindex="-1">
+    <ul class="navPage-subMenu-list">
+        {{#each theme_settings.channels}}
+        <li class="navPage-subMenu-item">
+            <a href="{{{switch_url}}}"
+               class="navPage-subMenu-action navPages-action"
+               aria-label="{{name}}"
+               data-channel-code="{{{code}}}"
+               data-warning="{{lang 'common.channel_switch_warning'}}"
+            >
+                {{name}}
+            </a>
+        </li>
+        {{/each}}
+    </ul>
+</div>
+{{/if}}

templates/components/common/channel-selector.html

@@ -0,0 +1,36 @@
+{{#if theme_settings.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"
+        >
+            {{#each theme_settings.channels}}
+                {{#if is_active}}
+                    {{lang 'common.channel' code=code}}
+                {{/if}}
+            {{/each}}
+            <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.channels}}
+                <li class="dropdown-menu-item">
+                    <a href="{{{switch_url}}}" data-channel-code="{{{code}}}" data-warning="{{lang 'common.channel_switch_warning'}}">
+                        {{#if is_active}}
+                            <strong>{{name}}</strong>
+                        {{else}}
+                            {{name}}
+                        {{/if}}
+                    </a>
+                </li>
+            {{/each}}
+        </ul>
+    </li>
+</ul>
+{{/if}}

templates/components/common/navigation-menu.html

@@ -68,6 +68,11 @@
                 </div>
             </li>
         {{/if}}
+        {{#if theme_settings.show_channels}}
+            <li class="navPages-item">
+                {{> components/common/channel-selector-mobile}}
+            </li>
+        {{/if}}
         {{#if settings.gift_certificates_enabled}}
             <li class="navPages-item">
                 <a class="navPages-action"

templates/components/common/navigation.html

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