feat(language): language switcher

components/CurrencySwitcher.vue → components/layout/LayoutCurrencySwitcher.vue

@@ -1,10 +1,10 @@
 <template>
-    <CurrencySwitcherInner>
+    <LayoutCurrencySwitcherInner>
         <template #currency-switcher-trigger>
             <slot name="currency-switcher-trigger" />
         </template>
         <template #currency-switcher-content>
             <slot name="currency-switcher-content" />
         </template>
-    </CurrencySwitcherInner>
+    </LayoutCurrencySwitcherInner>
 </template>

components/CurrencySwitcherInner.vue → components/layout/LayoutCurrencySwitcherInner.vue

@@ -10,15 +10,13 @@ const selectedCurrencyId: Ref<undefined | AcceptableValue> = ref(undefined);
 
 onMounted(() => {
     selectedCurrencyId.value = currency.value.id;
-    console.log('onmount', availableCurrencies.value);
 });
 
 const { data } = await getAvailableCurrencies();
 if (data.value) {
     // Remove fetchedAt & server, which is returned due to async fetch
     const { fetchedAt, server, ...currencies } = data.value;
     availableCurrencies.value = currencies;
-    console.log('danach', availableCurrencies);
 }
 
 const onUpdate = async (selectedId: AcceptableValue) => {
@@ -34,7 +32,7 @@ const onUpdate = async (selectedId: AcceptableValue) => {
 <template>
     <UiSelect :model-value="selectedCurrencyId" @update:model-value="onUpdate">
         <slot name="currency-switcher-trigger">
-            <UiSelectTrigger class="border-none shadow-none">
+            <UiSelectTrigger class="border-none shadow-none p-0">
                 <UiSelectValue  />
             </UiSelectTrigger>
         </slot>

components/layout/LayoutLanguageSwitcher.vue

@@ -0,0 +1,10 @@
+<template>
+    <LayoutLanguageSwitcherInner>
+        <template #language-switcher-trigger>
+            <slot name="language-switcher-trigger" />
+        </template>
+        <template #language-switcher-content>
+            <slot name="language-switcher-content" />
+        </template>
+    </LayoutLanguageSwitcherInner>
+</template>

components/layout/LayoutLanguageSwitcherInner.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { Schemas } from '@shopware/api-client/api-types';
+import type { AcceptableValue } from 'reka-ui';
+
+const { languages, changeLanguage, replaceToDevStorefront, getAvailableLanguages } =
+    useInternationalization();
+const { languageIdChain } = useSessionContext();
+const { handleError } = usePondHandleError();
+
+const selectedLanguage: Ref<undefined | Schemas['Language']> = ref(undefined);
+const selectedLanguageId = ref(languageIdChain);
+
+onMounted(async () => {
+    await getAvailableLanguages();
+    if(selectedLanguageId.value) {
+        selectedLanguage.value = languages.value.find(language => language.id === selectedLanguageId.value);
+    }
+});
+
+const onUpdate = async (selectedValue: AcceptableValue): Promise<void> =>  {
+    if (typeof selectedValue === 'string') {
+        try {
+            const response = await changeLanguage(selectedValue);
+            // Update language
+            selectedLanguage.value = languages.value.find(language => language.id === selectedValue);
+            const redirectUrl = response.redirectUrl;
+            window.location.replace(replaceToDevStorefront(redirectUrl));
+        } catch {
+            handleError('[Pond][LayoutLanguageSwitchInner] Language switch failed');
+        }
+    }
+};
+</script>
+
+<template>
+    <UiSelect :model-value="selectedLanguageId" @update:model-value="onUpdate">
+        <slot name="language-switcher-trigger">
+            <UiSelectTrigger class="border-none shadow-none p-0">
+                <UiSelectValue>
+                    <template v-if="selectedLanguage">
+                        <div class="flex items-center gap-1">
+                            <Icon :name="`custom-icons:${selectedLanguage?.translationCode?.code}`" />
+                            {{ selectedLanguage?.name }}
+                        </div>
+                    </template>
+                </UiSelectValue>
+            </UiSelectTrigger>
+        </slot>
+
+        <slot name="language-switcher-content">
+            <UiSelectContent>
+                <UiSelectGroup>
+                    <UiSelectItem
+                        v-for="language in languages"
+                        :key="language.id"
+                        :value="language.id"
+                    >
+                        <div class="flex items-center gap-1">
+                            <template v-if="language.translationCode.code">
+                                <Icon :name="`custom-icons:${language.translationCode.code}`" />
+                            </template>
+                            {{ language.name }}
+                        </div>
+                    </UiSelectItem>
+                </UiSelectGroup>
+            </UiSelectContent>
+        </slot>
+    </UiSelect>
+</template>

components/layout/footer/LayoutFooterSericeNavigationInner.vue

@@ -11,15 +11,20 @@ const shopName = configStore.get('core.basicInformation.shopName') as string|nul
 
 <template>
     <div class="mt-4 grid justify-between gap-6 border-t border-gray-500/70 pt-4 text-sm text-gray-700 md:mt-8 md:flex md:pt-8">
-        <div class="flex gap-2.5 items-center">
+        <div class="flex gap-2 md:gap-4 items-center">
             <slot name="copyright">
                 <span class="order-2 md:order-[unset]">
                     {{ $t('general.copyright', { 'companyName': shopName }) }}
                 </span>
             </slot>
-            <slot name="currency-switcher">
+            <slot name="language-switcher">
                 <div class="order-3 md:order-[unset]">
-                    <CurrencySwitcher />
+                    <LayoutLanguageSwitcher />
+                </div>
+            </slot>
+            <slot name="currency-switcher">
+                <div class="order-4 md:order-[unset]">
+                    <LayoutCurrencySwitcher />
                 </div>
             </slot>
         </div>

nuxt.config.ts

@@ -61,6 +61,13 @@ export default defineNuxtConfig({
         serverBundle: {
             collections: ['mdi'],
         },
+        customCollections: [
+            {
+                prefix: 'custom-icons',
+                dir: './assets/icons',
+                normalizeIconName: false,
+            },
+        ],
     },
 
     components: {

pages/[...all].vue

@@ -15,9 +15,9 @@ const { $i18n } = useNuxtApp();
 const { locale } = useI18n();
 const defaultLocale = $i18n.defaultLocale;
 const routePath =
-    locale.value !== defaultLocale
+    (locale.value !== defaultLocale
         ? route.path.replace(/^\/[^/]+/, '')
-        : route.path;
+        : route.path) || '/';
 
 const { data: seoResult } = await usePondCacheAsyncData(`seoPath-${routePath}`, async () => {
     // For client links if the history state contains seo url information we can omit the api call