From a8bb6191e4f5dabbe35c18fa50d9167d22f6684c Mon Sep 17 00:00:00 2001 From: Yevhenii Buliuk <82589781+bc-yevhenii-buliuk@users.noreply.github.com> Date: Wed, 10 Apr 2024 12:27:28 +0300 Subject: [PATCH] feat(storefront): BCTHEME-1836 Storefront nav for switching between country-specific websites (step 1) (#2453) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: “bc-yevhenii-buliuk” <“yevhenii.buliuk@bigcommerce.com”> --- CHANGELOG.md | 1 + .../components/stencil/navUser/_navUser.scss | 3 +- config.json | 24 +++++++++++ lang/en.json | 4 +- schema.json | 5 +++ schemaTranslations.json | 3 ++ .../common/channel-selector-mobile.html | 42 +++++++++++++++++++ .../components/common/channel-selector.html | 36 ++++++++++++++++ .../components/common/navigation-menu.html | 5 +++ templates/components/common/navigation.html | 4 ++ 10 files changed, 125 insertions(+), 2 deletions(-) create mode 100644 templates/components/common/channel-selector-mobile.html create mode 100644 templates/components/common/channel-selector.html diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e608206ca..1f95dba354 100644 --- 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 index 8c237bd2ed..c17b78d905 100644 --- 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 index 408219e343..66dd04313f 100644 --- 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 index 3434a93804..682c4901aa 100755 --- a/lang/en.json +++ b/lang/en.json @@ -141,8 +141,10 @@ "store_credit": "You have {store_credit} 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 index dbe1b81542..230fc6335f 100644 --- 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 index 52c5d89238..ca9a71e1e5 100644 --- 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 new file mode 100644 index 0000000000..3c989740c7 --- /dev/null +++ b/templates/components/common/channel-selector-mobile.html @@ -0,0 +1,42 @@ +{{#if theme_settings.channels.length '>' 1}} + + +{{/if}} diff --git a/templates/components/common/channel-selector.html b/templates/components/common/channel-selector.html new file mode 100644 index 0000000000..01a5a0c691 --- /dev/null +++ b/templates/components/common/channel-selector.html @@ -0,0 +1,36 @@ +{{#if theme_settings.channels.length '>' 1}} + +{{/if}} diff --git a/templates/components/common/navigation-menu.html b/templates/components/common/navigation-menu.html index 54841a5d2a..c7b45f7b90 100644 --- a/templates/components/common/navigation-menu.html +++ b/templates/components/common/navigation-menu.html @@ -68,6 +68,11 @@ {{/if}} + {{#if theme_settings.show_channels}} +
  • + {{> components/common/channel-selector-mobile}} +
    • + {{/if}} {{#if settings.gift_certificates_enabled}}
  • components/common/currency-selector}} {{/or}} + {{#if theme_settings.show_channels}} + {{> components/common/channel-selector}} + {{/if}} +