added localization

components/Catalog/Catalog.vue

@@ -35,15 +35,15 @@ const showSideModal = ref(false);
   display: grid;
   grid-template-rows: 42px 1fr;
   grid-template-columns: 1fr;
-  gap: 30px 110px;
+  gap: 30px 70px;
   justify-content: space-evenly;
   width: 100%;
   margin: 60px 0 0;
   padding: 0 30px;
 
   @include media-up(xsm) {
     grid-template-rows: 1fr;
-    grid-template-columns: 155px 1fr;
+    grid-template-columns: 200px 1fr;
   }
 
   &__filters {

components/Catalog/CatalogModal.vue

@@ -52,7 +52,9 @@
             'catalog-modal__actions--large-icon': showAddToCartAnimation,
           }"
         >
-          <TheButton size="lg" type="error" @click="buy"> buy </TheButton>
+          <TheButton size="lg" type="error" @click="buy">
+            {{ t('cta.buy') }}
+          </TheButton>
           <TheButton
             size="lg"
             type="black"
@@ -65,7 +67,7 @@
               v-if="!showAddToCartAnimation"
               style="margin: auto 0 auto 8px"
             >
-              to cart
+              {{ t('cta.add-to-cart') }}
             </span>
           </TheButton>
         </div>
@@ -78,6 +80,7 @@
 import { useSliderStore } from '~/store/slider';
 import { useCartStore } from '~/store/cart';
 
+const { t } = useLocator();
 const cartStore = useCartStore();
 const sliderStore = useSliderStore();
 

components/Catalog/FiltersGroup.vue

@@ -1,7 +1,7 @@
 <template>
   <ul class="filter-group">
     <li
-      v-for="(item, i) in items"
+      v-for="(item, i) in preparedItems"
       :key="i"
       :class="`filter-group--size-${size}`"
       @click="selected(item.name)"
@@ -47,6 +47,21 @@ const emit = defineEmits<{
 const selected = (name: string) => {
   emit('selected', { value: name, type: props.type });
 };
+
+const { t } = useLocator();
+const preparedItems = computed(() => {
+  return props.items.map((item) => {
+    if (props.type === 'brands') return item;
+
+    // 'price low to hight' -> 'price-low-to-hight'
+    const title = item.title.replace(/\s/g, '-');
+
+    return {
+      ...item,
+      title: t(`filters.${props.type}.${title}`),
+    };
+  });
+});
 </script>
 
 <style lang="scss" scoped>

components/FirstScreen.vue

@@ -14,13 +14,13 @@
       ></div>
       <div class="f-screen__item-cta-text" v-else>
         <strong>
-          sunglasses <br />
-          for all <br />
-          life <br />
-          seasons
+          {{ t('cta.slogan.0') }} <br />
+          {{ t('cta.slogan.1') }} <br />
+          {{ t('cta.slogan.2') }} <br />
+          {{ t('cta.slogan.3') }}
         </strong>
         <TheButton size="lg" type="cta" @click="scrollToGoods">
-          browse
+          {{ t('cta.action-button') }}
         </TheButton>
       </div>
     </div>
@@ -31,6 +31,8 @@
 import { scrollToGoods } from '~/helpers/scrollToGoods';
 import image from '~/utils/image';
 
+const { t } = useLocator();
+
 const getPathToImgs = (index: number | string) =>
   image(`LineSlider/1/${index}.jpg`);
 

components/Header/Cart/HCart.vue

@@ -3,7 +3,9 @@
     <div class="cart" data-test="cart">
       <div class="cart__price">
         <HeaderCart />
-        <TheButton size="lg" type="error-filled" @click="buy"> buy </TheButton>
+        <TheButton size="lg" type="error-filled" @click="buy">
+          {{ t('cta.buy') }}
+        </TheButton>
       </div>
       <div v-if="CART_ITEMS.length > 0" class="cart__list">
         <ProductCard
@@ -18,7 +20,9 @@
         />
       </div>
       <div v-else class="cart__empty">
-        <p>Cart is currently empty</p>
+        <p>
+          {{ t('cart.cart-is-empty') }}
+        </p>
       </div>
     </div>
   </Modal>
@@ -30,6 +34,7 @@ import { useCartStore } from '~/store/cart';
 import { useSliderStore } from '~/store/slider';
 import HeaderCart from '~/components/Header/HeaderCart.vue';
 
+const { t } = useLocator();
 const cartStore = useCartStore();
 const sliderStore = useSliderStore();
 

components/Header/Header.vue

@@ -68,15 +68,23 @@ for (let i = 0; i < userLangs.length; i++) {
   }
 }
 
-const setSelectedLang = (langValue) => {
-  langs.value = langs.value.map((lng) => ({
-    ...lng,
-    selected: lng.value === langValue,
-  }));
+const locator = useLocator();
+
+const setSelectedLang = async (langValue: Localization.Lang['value']) => {
+  const result = await locator.setLocale(langValue);
+
+  if (result) {
+    langs.value = langs.value.map((lng) => ({
+      ...lng,
+      selected: lng.value === langValue,
+    }));
+  }
 };
 
 onMounted(() => {
-  const latestSelectedLang = localStorage.getItem('lang');
+  const latestSelectedLang = localStorage.getItem(
+    'lang'
+  ) as Localization.Lang['value'];
 
   if (latestSelectedLang) setSelectedLang(latestSelectedLang);
 });

components/Header/HeaderCart.vue

@@ -15,11 +15,12 @@
 <script lang="ts" setup>
 import { useCartStore } from '~/store/cart';
 
-const cartStore = useCartStore();
-
 const emit = defineEmits<{
   (e: 'open-cart'): void;
 }>();
+
+const { t } = useLocator();
+const cartStore = useCartStore();
 </script>
 
 <style lang="scss" scoped>

components/Header/HeaderLangs.vue

@@ -3,8 +3,8 @@
     <span
       v-for="lang in langs"
       :key="lang.value"
-      @click="emit('change-current-lang', lang)"
       :class="lang.selected ? 'selected' : ''"
+      @click="emit('change-current-lang', lang)"
     >
       {{ lang.title }}
     </span>

components/ProductCard.vue

@@ -17,7 +17,10 @@
     <div @click="emit('clicked')" class="item__new" v-if="isNew && useImage">
       new
     </div>
-    <div style="position: relative; display: flex; gap: 10px">
+    <div
+      v-if="useRemoveBtn || useCounter"
+      style="position: relative; display: flex; gap: 10px"
+    >
       <Counter
         v-if="useCounter"
         class="item__counter"
@@ -31,7 +34,7 @@
       <Confirmation
         v-if="useRemoveBtn"
         color="red"
-        text="Delete?"
+        :text="t('cart.delete-item')"
         class="item__remove"
         @click.stop
         @confirm="emit('remove')"
@@ -75,6 +78,8 @@ const emit = defineEmits<{
   (e: 'dec-count'): void;
   (e: 'remove'): void;
 }>();
+
+const { t } = useLocator();
 </script>
 
 <style lang="scss" scoped>

components/TopNavigation.vue

@@ -5,7 +5,7 @@
       :key="navItem"
       @click="selectCategory(navItem)"
     >
-      {{ navItem }}
+      {{ t(`filters.genders.${navItem}`) }}
     </span>
   </nav>
 </template>
@@ -14,6 +14,7 @@
 import { scrollToGoods } from '~/helpers/scrollToGoods';
 import { useGlassesStore } from '~/store/glasses';
 
+const { t } = useLocator();
 const glassesStore = useGlassesStore();
 
 const navItems = ['man', 'woman', 'kids'];

composables/useLocator.ts

@@ -0,0 +1,72 @@
+import enLocale from '~/locales/en-US.json';
+
+type lazyLocale =
+  | Localization.Locale
+  | Promise<Localization.Locale>
+  | (() => Promise<Localization.Locale>);
+
+const locales: {
+  'en-US': lazyLocale;
+  'uk-UA': lazyLocale;
+} = {
+  'en-US': enLocale,
+  'uk-UA': () => import('~/locales/uk-UA.json').then((m) => m.default || m),
+};
+
+const state = reactive<{
+  locale: Localization.Lang['value'];
+  messages: Localization.Locale;
+}>({
+  locale: 'en-US',
+  messages: enLocale,
+});
+
+// TODO: use i18n
+export default function useLocalization() {
+  return {
+    locale: computed(() => state.locale),
+
+    t(localeKey: string, fallback?: string): string {
+      if (!state.messages) {
+        console.log('missing messages');
+
+        return fallback || localeKey;
+      }
+
+      const text = extractByDottedKey<string>(localeKey, state.messages);
+
+      if (!text)
+        console.error(
+          `Missing translation for ${localeKey} in ${state.locale}`
+        );
+
+      return text || fallback || localeKey;
+    },
+
+    async setLocale(locale: Localization.Lang['value']) {
+      const assetLoadingResult = await loadLocale(locale);
+
+      if (assetLoadingResult) {
+        state.locale = locale;
+        state.messages = locales[locale] as Localization.Locale;
+      }
+
+      return true;
+    },
+  };
+}
+
+function extractByDottedKey<T>(key: string, obj: object): T | undefined {
+  return key.split('.').reduce((o, k) => o?.[k], obj) as T;
+}
+
+async function loadLocale(locale: Localization.Lang['value']) {
+  let asset = locales[locale];
+
+  if (!asset) return false;
+  if (typeof asset === 'function') asset = asset();
+  if (asset instanceof Promise) asset = await asset;
+  if (locales[locale] !== asset) locales[locale] = asset;
+
+  return true;
+}

locales/en-US.json

@@ -1,7 +1,27 @@
 {
   "filters": {
-    "man": "Man",
-    "woman": "Woman",
-    "kids": "Kids"
+    "genders": {
+      "man": "Man",
+      "woman": "Woman",
+      "kids": "Kids"
+    },
+    "categories": {
+      "new": "new",
+      "sale": "sale",
+      "most-popular": "most popular",
+      "price-low-to-hight": "price low to hight",
+      "price-hight-to-low": "price hight to low"
+    }
+  },
+  "cta": {
+    "action-button": "browse",
+    "buy": "buy",
+    "add-to-cart": "to cart",
+    "slogan": ["sunglasses", "for all", "life", "seasons"]
+  },
+
+  "cart": {
+    "cart-is-empty": "Cart is currently empty",
+    "delete-item": "Delete?"
   }
 }

locales/uk-UA.json

@@ -1,7 +1,27 @@
 {
   "filters": {
-    "man": "Чоловічі",
-    "woman": "Жіночі",
-    "kids": "Дитячі"
+    "genders": {
+      "man": "Чоловікам",
+      "woman": "Жінкам",
+      "kids": "Діти"
+    },
+    "categories": {
+      "new": "новинки",
+      "sale": "зі знижкою",
+      "most-popular": "популярні",
+      "price-low-to-hight": "починаючи з дешевих",
+      "price-hight-to-low": "починаючи з дорогих"
+    }
+  },
+  "cta": {
+    "action-button": "дивитися",
+    "buy": "купити",
+    "add-to-cart": "до кошика",
+    "slogan": ["сонцезахисні окуляри", "на всі", "випадки", "життя"]
+  },
+
+  "cart": {
+    "cart-is-empty": "Кошик наразі порожній",
+    "delete-item": "Видалити?"
   }
 }