fix: make catalog url slug seo friendly

client-app/config/menu.json

@@ -154,7 +154,7 @@
         {
           "id": "catalog",
           "route": {
-            "name": "Catalog"
+            "name": ""
           },
           "title": "shared.layout.header.menu.catalog",
           "icon": "cube",

client-app/core/composables/useNavigations.ts

@@ -81,7 +81,7 @@ const mobilePreSelectedMenuItem = computed<ExtendedMenuLinkType | undefined>(()
 
   let preSelectedLink: ExtendedMenuLinkType | undefined;
 
-  if (["Catalog", "Category", "Product"].some((item) => matchedRouteNames.includes(item))) {
+  if (["Category", "Product"].some((item) => matchedRouteNames.includes(item))) {
     preSelectedLink = mobileCatalogMenuItem.value;
   } else if (matchedRouteNames.includes("Account") && !matchedRouteNames.includes("Dashboard")) {
     preSelectedLink = mobileAccountMenuItem.value;

client-app/pages/matcher/builderIo/customComponents.ts

@@ -348,7 +348,6 @@ export const builderIOComponents: Array<BuilderIOComponentType> = [
       {
         name: "breadcrumbs",
         type: "list",
-        defaultValue: [{ title: "Catalog", seoPath: "/catalog" }],
         subFields: [
           {
             name: "title",

client-app/pages/matcher/slug-content.vue

@@ -1,7 +1,19 @@
 <template>
   <div v-if="isVisible && !loading && (hasContent || objectType)" class="slug-content">
-    <CategoryComponent v-if="objectType === 'Category'" :category-id="slugInfo?.entityInfo?.objectId" allow-set-meta />
-    <Product v-else-if="objectType === 'CatalogProduct'" :product-id="slugInfo?.entityInfo?.objectId" allow-set-meta />
+    <CatalogComponent v-if="objectType === ObjectType.Catalog" />
+
+    <CategoryComponent
+      v-else-if="objectType === ObjectType.Category"
+      :category-id="slugInfo?.entityInfo?.objectId"
+      allow-set-meta
+    />
+
+    <Product
+      v-else-if="objectType === ObjectType.CatalogProduct"
+      :product-id="slugInfo?.entityInfo?.objectId"
+      allow-set-meta
+    />
+
     <StaticPage v-else-if="hasContent" />
   </div>
 </template>
@@ -27,6 +39,7 @@ const emit = defineEmits<IEmits>();
 
 const props = defineProps<IProps>();
 
+const CatalogComponent = defineAsyncComponent(() => import("@/pages/catalog.vue"));
 const CategoryComponent = defineAsyncComponent(() => import("@/pages/category.vue"));
 const Product = defineAsyncComponent(() => import("@/pages/product.vue"));
 const StaticPage = defineAsyncComponent(() => import("@/pages/static-page.vue"));
@@ -47,6 +60,7 @@ const seoUrl = computedEager(() => {
 const { loading, slugInfo, objectType, hasContent, pageContent, fetchContent } = useSlugInfo(seoUrl);
 
 enum ObjectType {
+  Catalog = "Catalog",
   CatalogProduct = "CatalogProduct",
   Category = "Category",
   ContentFile = "ContentFile",
@@ -55,7 +69,9 @@ enum ObjectType {
 watchEffect(() => {
   if (loading.value) {
     emit("setState", "loading");
-  } else if ([ObjectType.Category, ObjectType.CatalogProduct].includes(objectType.value as ObjectType)) {
+  } else if (
+    [ObjectType.Catalog, ObjectType.Category, ObjectType.CatalogProduct].includes(objectType.value as ObjectType)
+  ) {
     emit("setState", "ready");
   } else if (pageContent.value) {
     emit("setState", "ready");

client-app/router/index.ts

@@ -55,7 +55,7 @@ export function createRouter(options: { base: string }) {
         "ConfirmInvitation",
       ).includes(to.name!)
     ) {
-      return next(getReturnUrlValue() || { name: "Catalog" });
+      return next(getReturnUrlValue() || { name: "Home" });
     }
 
     return next();

client-app/shared/layout/components/header/_internal/bottom-header.vue

@@ -17,19 +17,19 @@
       </template>
 
       <!-- Catalog button -->
-      <a
+      <VcButton
         ref="showCatalogMenuButton"
-        :href="catalogLink"
-        type="button"
-        class="flex select-none items-center rounded border-2 border-primary px-[0.8rem] py-[0.55rem] text-sm text-[--header-bottom-link-color] hover:text-[--header-bottom-link-hover-color]"
+        :append-icon="catalogMenuItems?.length ? catalogButtonIcon : undefined"
+        variant="outline"
+        class="border-primary px-[0.8rem] py-[0.55rem] text-sm"
         @click="toggleCatalogDropdown"
       >
-        <span class="font-bold uppercase tracking-wide">
+        <span
+          class="font-bold uppercase tracking-wide text-[--header-bottom-link-color] hover:text-[--header-bottom-link-hover-color]"
+        >
           {{ $t("shared.layout.header.bottom_header.catalog_menu_button") }}
         </span>
-
-        <VcIcon v-if="catalogMenuItems.length" :name="catalogButtonIcon" size="xs" class="ml-3 fill-primary" />
-      </a>
+      </VcButton>
 
       <SearchBar />
 
@@ -63,7 +63,6 @@
 <script setup lang="ts">
 import { onClickOutside, syncRefs, useElementBounding, useScrollLock } from "@vueuse/core";
 import { computed, ref, shallowRef } from "vue";
-import { useRouter } from "vue-router";
 import { useNavigations, useWhiteLabeling } from "@/core/composables";
 import { useUser } from "@/shared/account/composables/useUser";
 import { SearchBar } from "@/shared/layout";
@@ -72,7 +71,7 @@ import CatalogMenu from "./catalog-menu.vue";
 import type { StyleValue } from "vue";
 import LinkDefault from "@/shared/layout/components/header/_internal/link-components/link-default.vue";
 
-const router = useRouter();
+//const router = useRouter();
 const { organization } = useUser();
 const { logoUrl } = useWhiteLabeling();
 const { catalogMenuItems, desktopMainMenuItems } = useNavigations();
@@ -85,7 +84,6 @@ const catalogMenuVisible = ref(false);
 
 const { bottom } = useElementBounding(bottomHeader);
 
-const catalogLink = router.resolve({ name: "Catalog" }).fullPath;
 const catalogButtonIcon = computed<string>(() => (catalogMenuVisible.value ? "chevron-up" : "chevron-down"));
 const catalogMenuStyle = computed<StyleValue | undefined>(() =>
   bottom.value ? { maxHeight: `calc(100vh - ${bottom.value}px)` } : undefined,