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

…ountry-specific websites (step 1) (bigcommerce#2453) Co-authored-by: “bc-yevhenii-buliuk” <“[email protected]”>
fusionary · Apr 10, 2024 · a8bb619 · a8bb619
1 parent 91dfa09
commit a8bb619
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 2 deletions.
diff --git a/CHANGELOG.md b/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)

diff --git a/assets/scss/components/stencil/navUser/_navUser.scss b/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

diff --git a/config.json b/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,

diff --git a/lang/en.json b/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",

diff --git a/schema.json b/schema.json
@@ -710,6 +710,11 @@
         "type": "heading",
         "content": "i18n.UtilityNavigation"
       },
+      {
+        "type": "checkbox",
+        "label": "i18n.ChannelSelector",
+        "id": "show_channels"
+      },
       {
         "type": "color",
         "label": "i18n.TextColor",

diff --git a/schemaTranslations.json b/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",

diff --git a/templates/components/common/channel-selector-mobile.html b/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}}
diff --git a/templates/components/common/channel-selector.html b/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}}
diff --git a/templates/components/common/navigation-menu.html b/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"

diff --git a/templates/components/common/navigation.html b/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">