Language currency picker announcement bar (#2725)

* Add settings * Add css and liquid for localizations * made language and currency picker visible by default * applied mobile logic using global localization object * Update 10 translation files * Update 10 translation files * changed names of class names as suggested in code review * changed header__icons--localization to header__localization * changed logic in utility grid div * changed naming in class to keep code dry * reverted back to flex-end on the localization-wrapper * made the localazation-form.js file load if languages/countries are more than one rather than checked in settings to match styling * implementing name change * implemented logic change as suggested in code review * loaded both stylesheet and script with condition * fixed broken animation and added styling to localization-wrapper * changed id names to be unique to announcement bar * few tweaks to follow up on feedback provided * remove js asset from footer * changed language/currency default to false --------- Co-authored-by: Louisa Goncharenko <louisa.goncharenko@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com>
Shopify · Jul 10, 2023 · b875f47 · b875f47
1 parent 594b5e0
commit b875f47
Show file tree

Hide file tree

Showing 28 changed files with 445 additions and 41 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -2128,12 +2128,14 @@ product-info .loading-overlay:not(.hidden) ~ *,
 .utility-bar__grid {
   display: grid;
   grid-template-columns: 1fr;
+  grid-template-areas: 'announcements';
 }
 
 .utility-bar__grid .list-social {
   justify-content: flex-start;
   align-content: center;
   margin-left: -1.2rem;
+  grid-area: social-icons;
 }
 
 @media screen and (max-width: 989px) {
@@ -2147,11 +2149,16 @@ product-info .loading-overlay:not(.hidden) ~ *,
 }
 
 @media screen and (min-width: 990px) {
-  .utility-bar__grid {
+  .utility-bar__grid--3-col {
     grid-template-columns: 3fr 4fr 3fr;
     grid-template-areas: 'social-icons announcements language-currency';
   }
 
+  .utility-bar__grid--2-col {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: 'social-icons language-currency';
+  }
+
   .announcement-bar.announcement-bar--one-announcement,
   .announcement-bar--one-announcement .announcement-bar__link {
     width: fit-content;
@@ -2168,6 +2175,7 @@ product-info .loading-overlay:not(.hidden) ~ *,
   justify-content: center;
   flex-wrap: wrap;
   align-content: center;
+  grid-area: announcements;
 }
 
 .announcement-bar .slider--everywhere {
@@ -2205,14 +2213,15 @@ product-info .loading-overlay:not(.hidden) ~ *,
   box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground));
 }
 
-@media screen and (min-width: 750px) {
-  .announcement-bar .slider-button--next {
-    margin-right: -3.2rem;
-  }
+.localization-wrapper {
+  grid-area: language-currency;
+  align-self: center;
+  display: flex;
+  justify-content: flex-end;
+}
 
-  .announcement-bar .slider-button--prev {
-    margin-left: -3.2rem;
-  }
+.localization-wrapper .localization-selector + .disclosure__list-wrapper {
+  animation: animateMenuOpen var(--duration-default) ease;
 }
 
 @media screen and (min-width: 990px) {

diff --git a/assets/component-localization-form.css b/assets/component-localization-form.css
@@ -191,27 +191,27 @@ noscript .localization-selector.link {
 }
 
 /* Header localization */
-.header__localization .localization-form:only-child {
+.header-localization .localization-form:only-child {
   margin: 0;
 }
 
-.header__localization .disclosure .localization-form__select {
+.header-localization .disclosure .localization-form__select {
   font-size: 1.4rem;
   letter-spacing: 0.06rem;
   height: auto;
   background: transparent;
 }
 
-.header__localization .disclosure .localization-form__select:hover {
+.header-localization .disclosure .localization-form__select:hover {
   text-decoration: underline;
 }
 
-.header__localization .localization-form__select.link:after,
-.header__localization .localization-form__select.link:before {
+.header-localization .localization-form__select.link:after,
+.header-localization .localization-form__select.link:before {
   box-shadow: none;
 }
 
-.header__localization .localization-form__select.link:focus-visible {
+.header-localization .localization-form__select.link:focus-visible {
   outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
   outline-offset: -0.2rem;
   box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
@@ -232,36 +232,36 @@ noscript .localization-selector.link {
   padding: 0;
 }
 
-.header__icons--localization {
+.header-localization:not(.menu-drawer__localization) {
   align-items: center;
   min-height: 4.4rem;
 }
 
-.js .header__icons--localization .localization-form__select {
+.js .header-localization:not(.menu-drawer__localization) .localization-form__select {
   padding: 0 2.7rem 0 1.2rem;
   width: max-content;
 }
 
-.header__icons--localization .localization-form:only-child .localization-form__select {
+.header-localization:not(.menu-drawer__localization) .localization-form:only-child .localization-form__select {
   margin: 0;
 }
 
-.header__icons--localization .localization-form__select > span {
+.header-localization:not(.menu-drawer__localization).localization-form__select > span {
   max-width: 20ch;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
-.header__icons--localization localization-form:only-child .localization-form__select > span {
+.header-localization:not(.menu-drawer__localization) localization-form:only-child .localization-form__select > span {
   max-width: 26ch;
 }
 
-.header__icons--localization .localization-form__select .icon-caret {
+.header-localization:not(.menu-drawer__localization) .localization-form__select .icon-caret {
   right: 0.8rem;
 }
 
-.header__icons--localization .disclosure__list-wrapper {
+.header-localization:not(.menu-drawer__localization) .disclosure__list-wrapper {
   bottom: initial;
   top: 100%;
   right: 0;

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -246,6 +246,11 @@
       <link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
     {%- endunless -%}
 
+    {%- if localization.available_countries.size > 1 or localization.available_languages.size > 1 -%}
+      {{ 'component-localization-form.css' | asset_url | stylesheet_tag: preload: true }}
+      <script src="{{ 'localization-form.js' | asset_url }}" defer="defer"></script>
+    {%- endif -%}
+
     {%- if settings.predictive_search_enabled -%}
       <link
         rel="stylesheet"

diff --git a/locales/cs.schema.json b/locales/cs.schema.json
@@ -487,6 +487,20 @@
         },
         "show_social": {
           "label": "Zobrazit ikony na ploše"
+        },
+        "header__3": {
+          "content": "Selektor země/oblasti",
+          "info": "Pokud chcete přidat zemi nebo oblast, přejděte na [nastavení trhu.](/admin/settings/markets)"
+        },
+        "enable_country_selector": {
+          "label": "Povolit selektor země/oblasti"
+        },
+        "header__4": {
+          "content": "Selektor jazyka",
+          "info": "Pokud chcete přidat jazyk, přejděte na [jazykové nastavení.](/admin/settings/languages)"
+        },
+        "enable_language_selector": {
+          "label": "Povolit selektor jazyka"
         }
       },
       "presets": {

diff --git a/locales/da.schema.json b/locales/da.schema.json
@@ -487,6 +487,20 @@
         },
         "show_social": {
           "label": "Vis ikoner på skrivebordet"
+        },
+        "header__3": {
+          "content": "Lande-/områdevælger",
+          "info": "Hvis du vil tilføje et land/område, skal du gå til dine [markedsindstillinger.](/admin/settings/markets)"
+        },
+        "enable_country_selector": {
+          "label": "Aktivér lande-/områdevælger"
+        },
+        "header__4": {
+          "content": "Sprogvælger",
+          "info": "Hvis du vil tilføje et sprog, skal du gå til dine [sprogindstillinger.](/admin/settings/languages)"
+        },
+        "enable_language_selector": {
+          "label": "Aktivér sprogvælger"
         }
       },
       "presets": {

diff --git a/locales/de.schema.json b/locales/de.schema.json
@@ -487,6 +487,20 @@
         },
         "show_social": {
           "label": "Symbole auf dem Desktop anzeigen"
+        },
+        "header__3": {
+          "content": "Auswahl für Land/Region",
+          "info": "Gehe zu den [Markteinstellungen](/admin/settings/markets), um ein Land / eine Region hinzuzufügen."
+        },
+        "enable_country_selector": {
+          "label": "Auswahl für Land/Region aktivieren"
+        },
+        "header__4": {
+          "content": "Sprachauswahl",
+          "info": "Gehe zu den [Spracheinstellungen](/admin/settings/languages), um eine Sprache hinzuzufügen."
+        },
+        "enable_language_selector": {
+          "label": "Sprachauswahl aktivieren"
         }
       },
       "presets": {

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -462,6 +462,20 @@
         },
         "show_social": {
           "label": "Show icons on desktop"
+        },
+        "header__3": {
+          "content": "Country/region selector",
+          "info": "To add a country/region, go to your [market settings.](/admin/settings/markets)"
+        },
+        "enable_country_selector": {
+          "label": "Enable country/region selector"
+        },
+        "header__4": {
+          "content": "Language selector",
+          "info": "To add a language, go to your [language settings.](/admin/settings/languages)"
+        },
+        "enable_language_selector": {
+          "label": "Enable language selector"
         }
       },
       "blocks": {

diff --git a/locales/es.schema.json b/locales/es.schema.json
@@ -487,6 +487,20 @@
         },
         "show_social": {
           "label": "Mostrar íconos en el escritorio"
+        },
+        "header__3": {
+          "content": "Selector de país o región",
+          "info": "Para agregar un país o una región, ve a la [configuración del mercado.](/admin/settings/markets)"
+        },
+        "enable_country_selector": {
+          "label": "Activar selector de país o región"
+        },
+        "header__4": {
+          "content": "Selector de idioma",
+          "info": "Para agregar un idioma, ve a la [configuración de idiomas.](/admin/settings/languages)"
+        },
+        "enable_language_selector": {
+          "label": "Activar selector de idioma"
         }
       },
       "presets": {

diff --git a/locales/fi.schema.json b/locales/fi.schema.json
@@ -487,6 +487,20 @@
         },
         "show_social": {
           "label": "Näytä työpöydällä olevat kuvakkeet"
+        },
+        "header__3": {
+          "content": "Maa-/aluevalitsin",
+          "info": "Lisää maa/alue siirtymällä [markkina-asetuksiisi.](/admin/settings/markets)"
+        },
+        "enable_country_selector": {
+          "label": "Ota käyttöön maa-/aluevalitsin"
+        },
+        "header__4": {
+          "content": "Kielivalitsin",
+          "info": "Lisää kieli siirtymällä [kieliasetuksiisi.](/admin/settings/languages)"
+        },
+        "enable_language_selector": {
+          "label": "Ota kielivalitsin käyttöön"
         }
       },
       "presets": {

diff --git a/locales/fr.schema.json b/locales/fr.schema.json
@@ -487,6 +487,20 @@
         },
         "show_social": {
           "label": "Afficher les icônes sur le bureau"
+        },
+        "header__3": {
+          "content": "Sélecteur de pays/région",
+          "info": "Pour ajouter un pays/une région, accédez à vos [paramètres de marché.](/admin/settings/markets)"
+        },
+        "enable_country_selector": {
+          "label": "Activer le sélecteur de pays/région"
+        },
+        "header__4": {
+          "content": "Sélecteur de langue",
+          "info": "Pour ajouter une langue, accédez à vos [paramètres de langue.](/admin/settings/languages)"
+        },
+        "enable_language_selector": {
+          "label": "Activer le sélecteur de langue"
         }
       },
       "presets": {

diff --git a/locales/it.schema.json b/locales/it.schema.json
@@ -487,6 +487,20 @@
         },
         "show_social": {
           "label": "Mostra icone sul desktop"
+        },
+        "header__3": {
+          "content": "Selettore paese/area geografica",
+          "info": "Per aggiungere un paese/un'area geografica, vai alle [impostazioni di mercato.](/admin/settings/markets)"
+        },
+        "enable_country_selector": {
+          "label": "Abilita selettore paese/area geografica"
+        },
+        "header__4": {
+          "content": "Selettore lingua",
+          "info": "Per aggiungere una lingua, vai alle [impostazioni lingua.](/admin/settings/languages)"
+        },
+        "enable_language_selector": {
+          "label": "Abilita selettore lingua"
         }
       },
       "presets": {

diff --git a/locales/ja.schema.json b/locales/ja.schema.json
@@ -487,6 +487,20 @@
         },
         "show_social": {
           "label": "デスクトップのアイコンを表示する"
+        },
+        "header__3": {
+          "content": "国/地域セレクター",
+          "info": "国/地域を追加するには、[マーケット設定](/admin/settings/markets) に移動します"
+        },
+        "enable_country_selector": {
+          "label": "国/地域セレクターを有効にする"
+        },
+        "header__4": {
+          "content": "言語セレクター",
+          "info": "言語を追加するには、[言語設定](/admin/settings/languages) に移動します"
+        },
+        "enable_language_selector": {
+          "label": "言語セレクターを有効にする"
         }
       },
       "presets": {

diff --git a/locales/ko.schema.json b/locales/ko.schema.json
@@ -487,6 +487,20 @@
         },
         "show_social": {
           "label": "데스크톱에서 아이콘 표시"
+        },
+        "header__3": {
+          "content": "국가/지역 선택기",
+          "info": "국가/지역을 추가하려면 [마켓 설정](/admin/settings/markets)으로 이동하십시오."
+        },
+        "enable_country_selector": {
+          "label": "국가/지역 선택기 사용"
+        },
+        "header__4": {
+          "content": "언어 선택기",
+          "info": "언어를 추가하려면 [언어 설정](/admin/settings/languages)으로 이동하십시오."
+        },
+        "enable_language_selector": {
+          "label": "언어 선택기 사용"
         }
       },
       "presets": {

diff --git a/locales/nb.schema.json b/locales/nb.schema.json
@@ -487,6 +487,20 @@
         },
         "show_social": {
           "label": "Vis ikoner på skrivebordet"
+        },
+        "header__3": {
+          "content": "Land-/områdevelger",
+          "info": "Gå til [markedsinnstillinger](/admin/settings/markets) for å legge til land/område."
+        },
+        "enable_country_selector": {
+          "label": "Aktiver land-/områdevelger"
+        },
+        "header__4": {
+          "content": "Språkvelger",
+          "info": "Gå til [språkinnstillingene](/admin/settings/languages) for å legge til et språk."
+        },
+        "enable_language_selector": {
+          "label": "Aktiver språkvelger"
         }
       },
       "presets": {