ICO-245 Update url when switching language with the seo-url

basecom · Mar 7, 2025 · d6fa6e8 · d6fa6e8
1 parent 26d1cb0
commit d6fa6e8
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 34 deletions.
diff --git a/components/LanguageSwitch.vue b/components/LanguageSwitch.vue
@@ -7,14 +7,25 @@ const { languages, changeLanguage, getLanguageCodeFromId, getLanguageIdFromCode
 const { refreshSessionContext } = useSessionContext();
 const customerStore = useCustomerStore();
 const { loading } = storeToRefs(customerStore);
+const { getSeoUrlByNavigationId, isCustomRoute } = useSeoUrl();
+const { getLocalePathPrefix } = useLocale();
+const router = useRouter();
 
 const selectedLanguageId = computed(() => getLanguageIdFromCode(locale.value));
 
 const onLanguageChange = async (option: Event) => {
     const selectedOptionId = (option.target as HTMLSelectElement).value;
     loading.value = true;
     await changeLanguage(selectedOptionId);
-    setLocale(getLanguageCodeFromId(selectedOptionId));
+    const languageCode = getLanguageCodeFromId(selectedOptionId);
+    if(isCustomRoute.value) {
+        const seoUrl = await getSeoUrlByNavigationId();
+        await router.replace(
+            `${getLocalePathPrefix(languageCode)}/${seoUrl}`,
+        );
+    } else {
+        await setLocale(languageCode);
+    }
     await refreshSessionContext();
     loading.value = false;
 };

diff --git a/composables/useLocale.ts b/composables/useLocale.ts
@@ -0,0 +1,16 @@
+export const useLocale = () => {
+    const { locale, defaultLocale } = useI18n();
+
+    const getLocalePathPrefix = (givenLocale?: string) => {
+        const workingLocale = givenLocale ?? locale.value;
+        if (workingLocale === defaultLocale) {
+            return '';
+        }
+        return `/${workingLocale}`;
+
+    };
+
+    return {
+        getLocalePathPrefix,
+    };
+};
diff --git a/composables/useSeoUrl.ts b/composables/useSeoUrl.ts
@@ -1,4 +1,10 @@
 export function useSeoUrl() {
+
+    const { apiClient } = useShopwareContext();
+    const seoUrlStore = useSeoUrlStore();
+    const { navigationId } = storeToRefs(seoUrlStore);
+    const route = useRoute();
+
     const getUrlByProductId = async (id: string) => ({
         path: await getSeoUrlByProductId(id),
         state: {
@@ -7,31 +13,58 @@ export function useSeoUrl() {
         },
     });
 
-    return { getUrlByProductId };
-}
+    const getSeoUrlByNavigationId = async () => {
+        const params = new URLSearchParams(
+            route.query as Record<string, string>,
+        );
+        const seoPath = await getSeoUrlForForeignKey(navigationId.value);
+        return `${seoPath}?${params.toString()}`;
+    };
 
-const getSeoUrlByProductId = async (id: string) => {
-    if (!id) return '/';
+    const isCustomRoute = computed(() => navigationId.value !== '');
 
-    const { apiClient } = useShopwareContext();
+    const getSeoUrlForForeignKey = async (id: string): Promise<string> => {
+        if (!id) return '/';
+
+        const { data: seoUrls } = await apiClient.invoke('readSeoUrl post /seo-url', {
+            body: {
+                filter: [
+                    {
+                        type: 'equals',
+                        field: 'foreignKey',
+                        value: id,
+                    },
+                ],
+            },
+        });
 
-    const { data: seoUrls } = await apiClient.invoke('readSeoUrl post /seo-url', {
-        body: {
-            filter: [
-                {
-                    type: 'equals',
-                    field: 'pathInfo',
-                    value: `/detail/${  id}`,
+        return seoUrls.elements?.[0]?.seoPathInfo ?? '';
+    };
+
+    const getSeoUrlByProductId = async (id: string) => {
+        if (!id) return '/';
+
+        const { data: seoUrls } = await apiClient.invoke('readSeoUrl post /seo-url', {
+            body: {
+                filter: [
+                    {
+                        type: 'equals',
+                        field: 'pathInfo',
+                        value: `/detail/${id}`,
+                    },
+                ],
+                limit: 1,
+                includes: {
+                    seo_url: ['seoPathInfo'],
                 },
-            ],
-            limit: 1,
-            includes: {
-                seo_url: ['seoPathInfo'],
             },
-        },
-    });
+        });
 
-    const seoUrl = seoUrls?.elements[0]?.seoPathInfo;
+        const seoUrl = seoUrls?.elements[0]?.seoPathInfo;
 
-    return seoUrl ? `/${seoUrl}` : `/detail/${id}`;
-};
+        return seoUrl ? `/${seoUrl}` : `/detail/${id}`;
+    };
+
+
+    return { getUrlByProductId, getSeoUrlByNavigationId, isCustomRoute };
+}
diff --git a/pages/[...all].vue b/pages/[...all].vue
@@ -9,6 +9,7 @@ await refreshSessionContext();
 const { resolvePath } = useNavigationSearch();
 const route = useRoute();
 const { t } = useI18n();
+const { setNavigationId, clearNavigationId } = useSeoUrlStore();
 
 /**
  * Replace the locale value from the route path
@@ -20,26 +21,29 @@ const { locale } = useI18n();
 const defaultLocale = $i18n.defaultLocale;
 let routePath =
     locale.value !== defaultLocale
-        ? route.path.replace(/^\/[^\/]+/, '')
+        ? route.path.replace(/^\/[^/]+/, '')
         : route.path;
 
 if (routePath === '') {
     routePath = '/';
 }
 
-const { data: seoResult } = await useAsyncData(`seoPath${routePath}`, async () => {
-    // For client links if the history state contains seo url information we can omit the api call
-    if (import.meta.client) {
-        if (history.state?.routeName) {
-            return {
-                routeName: history.state?.routeName,
-                foreignKey: history.state?.foreignKey,
-            };
+const { data: seoResult } = await useAsyncData(
+    `seoPath/${locale}/${routePath}`,
+    async () => {
+        // For client links if the history state contains seo url information we can omit the api call
+        if (import.meta.client) {
+            if (history.state?.routeName) {
+                return {
+                    routeName: history.state?.routeName,
+                    foreignKey: history.state?.foreignKey,
+                };
+            }
         }
-    }
 
-    return await resolvePath(routePath);
-});
+        return await resolvePath(routePath);
+    },
+);
 
 const { routeName, foreignKey } = useNavigationContext(seoResult);
 const { componentExists } = useCmsUtils();
@@ -48,8 +52,11 @@ if (!routeName.value) {
     throw createError({ statusCode: 404, message: t('error.404.detail') });
 }
 
+setNavigationId(foreignKey.value);
+
 onBeforeRouteLeave(() => {
     clearBreadcrumbs();
+    clearNavigationId();
 });
 </script>
 

diff --git a/stores/SeoUrlStore.ts b/stores/SeoUrlStore.ts
@@ -0,0 +1,13 @@
+export const useSeoUrlStore = defineStore('seoUrl', {
+    state: () => ({
+        navigationId: '',
+    }),
+    actions: {
+        setNavigationId(navigation: string) {
+            this.navigationId = navigation;
+        },
+        clearNavigationId() {
+            this.navigationId = '';
+        },
+    },
+});