@shopbite-de/storefront 1.15.0 → 1.16.0

package/app/components/Category/Listing.vue

@@ -118,7 +118,7 @@ const moreThanOneFilterAndOption = computed<boolean>(
     <UPage>
       <template #left>
         <UPageAside>
-          <NavigationDesktopLeft2 />
+          <NavigationDesktopLeft />
         </UPageAside>
       </template>
 
@@ -212,7 +212,7 @@ const moreThanOneFilterAndOption = computed<boolean>(
       <template #right>
         <UPageAside>
           <div v-if="moreThanOneFilterAndOption" class="flex flex-col gap-4">
-            <h2 class="text-3xl md:text-4xl mt-8 mb-3 pb-2">Filter</h2>
+            <h2 class="text-3xl md:text-4xl mb-3 pb-2">Filter</h2>
             <div
               v-for="filter in propertyFilters"
               :key="filter.id"

package/app/components/Navigation/{DesktopLeft2.vue → DesktopLeft.vue}

@@ -3,7 +3,7 @@ import type { NavigationMenuItem } from "@nuxt/ui";
 import type { Schemas } from "#shopware";
 import { useNavigation } from "~/composables/useNavigation";
 
-const { mainNavigation } = useNavigation(false);
+const { menuCardNavigation } = useNavigation(true);
 
 const mapCategoryToNavItem = (
   category: Schemas["Category"],
@@ -21,13 +21,13 @@ const mapCategoryToNavItem = (
 };
 
 const navItems = computed<NavigationMenuItem[]>(() => {
-  return (mainNavigation.value ?? []).map(mapCategoryToNavItem);
+  return (menuCardNavigation.value ?? []).map(mapCategoryToNavItem);
 });
 </script>
 
 <template>
   <div>
-    <h2 class="text-3xl md:text-4xl mt-8 mb-3 pb-2">Speisekarte</h2>
+    <h2 class="text-3xl md:text-4xl mb-3 pb-2">Speisekarte</h2>
     <UNavigationMenu
       variant="link"
       orientation="vertical"

package/app/components/Navigation/MobileTop.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useNavigation } from "~/composables/useNavigation";
+
+const { menuCardMenu } = useNavigation(true);
+</script>
+
+<template>
+  <UNavigationMenu
+    class="lg:hidden"
+    orientation="horizontal"
+    :items="menuCardMenu"
+    :ui="{
+      list: 'overflow-x-auto',
+      item: 'flex-shrink-0',
+    }"
+  >
+    <template #list-leading>
+      <UIcon name="i-lucide-chevron-left" class="size-8" />
+    </template>
+    <template #list-trailing>
+      <UIcon name="i-lucide-chevron-right" class="size-8" />
+    </template>
+  </UNavigationMenu>
+</template>

package/app/composables/useNavigation.ts

@@ -4,6 +4,10 @@ import type { Schemas } from "#shopware";
 
 export function useNavigation(withChildren: boolean | undefined) {
   const { apiClient } = useShopwareContext();
+  const config = useRuntimeConfig();
+  const menuCategoryId = computed(
+    () => config.public.shopBite.menuCategoryId ?? "main-navigation",
+  );
 
   const criteria = encodeForQuery({
     includes: {
@@ -77,10 +81,36 @@ export function useNavigation(withChildren: boolean | undefined) {
     return footerNavigation.value?.map(mapCategoryToMenuItem);
   });
 
+  const { data: menuCardNavigation } = useAsyncData(
+    "menu-category",
+    async () => {
+      const response = await apiClient.invoke(
+        "readNavigationGet get /navigation/{activeId}/{rootId}",
+        {
+          query: { _criteria: criteria },
+          pathParams: {
+            activeId: "main-navigation",
+            rootId: menuCategoryId.value,
+          },
+        },
+      );
+
+      return response.data;
+    },
+  );
+
+  const menuCardMenu = computed<NavigationMenuItem[]>(() => {
+    if (!menuCardNavigation.value) return [];
+
+    return menuCardNavigation.value?.map(mapCategoryToMenuItem);
+  });
+
   return {
     mainNavigation,
     mainMenu,
     footerNavigation,
     footerMenu,
+    menuCardNavigation,
+    menuCardMenu,
   };
 }

package/app/composables/useNavigationSearch.ts

@@ -0,0 +1,68 @@
+import { useSessionContext, useShopwareContext } from "#imports";
+import type { Schemas } from "#shopware";
+import { encodeForQuery } from "@shopware/api-client/helpers";
+
+export type UseNavigationSearchReturn = {
+  /**
+   * Get {@link SeoUrl} entity for given path
+   * @example resolvePath("/my-category/my-product") or resolvePath("/") for home page
+   */
+  resolvePath(path: string): Promise<Schemas["SeoUrl"] | null>;
+};
+
+/**
+ * Composable to get search for SeoUrl entity for given path.
+ * @public
+ * @category Navigation & Routing
+ */
+export function useNavigationSearch(): UseNavigationSearchReturn {
+  const { apiClient } = useShopwareContext();
+  const { sessionContext } = useSessionContext();
+
+  async function resolvePath(path: string): Promise<Schemas["SeoUrl"] | null> {
+    if (path === "/") {
+      // please ignore optional chaining for salesChannel object as it's always present (type definition issue)
+      const categoryId =
+        sessionContext.value?.salesChannel?.navigationCategoryId;
+
+      return {
+        routeName: "frontend.navigation.page",
+        foreignKey: categoryId,
+      } as Schemas["SeoUrl"];
+    }
+
+    const isTechnicalUrl =
+      path.startsWith("/navigation/") ||
+      path.startsWith("/detail/") ||
+      path.startsWith("/landingPage/");
+
+    // remove leading slash in case of seo url or remove trailing slash in case of technical url
+    const normalizedPath = isTechnicalUrl
+      ? path.endsWith("/")
+        ? path.slice(0, -1)
+        : path
+      : path.substring(1);
+
+    const criteria = encodeForQuery({
+      filter: [
+        {
+          type: "equals",
+          field: isTechnicalUrl ? "pathInfo" : "seoPathInfo",
+          value: normalizedPath,
+        },
+      ],
+    });
+
+    const seoResult = await apiClient.invoke("readSeoUrlGet get /seo-url", {
+      query: {
+        _criteria: criteria,
+      },
+    });
+
+    return seoResult.data.elements?.[0] ?? null;
+  }
+
+  return {
+    resolvePath,
+  };
+}

package/app/layouts/{listing2.vue → listing.vue}

@@ -3,7 +3,7 @@
 <template>
   <UPage>
     <div class="sticky top-16 left-0 z-20 w-full backdrop-blur-md rounded-md">
-      <NavigationMobileTop2 :should-skip-first-level="true" />
+      <NavigationMobileTop />
     </div>
     <slot />
   </UPage>

package/app/pages/speisekarte/[...all].vue

@@ -2,8 +2,9 @@
 import type { Schemas } from "#shopware";
 
 definePageMeta({
-  layout: "listing2",
+  layout: "listing",
 });
+
 const { clearBreadcrumbs } = useBreadcrumbs();
 const { resolvePath } = useNavigationSearch();
 const route = useRoute();

package/nuxt.config.ts

@@ -55,6 +55,7 @@ export default defineNuxtConfig({
     geoapifyApiKey: "",
     public: {
       shopBite: {
+        menuCategoryId: "",
         feature: {
           multiChannel: "",
           secureKey: "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [

package/app/components/Navigation/MobileTop2.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { useNavigation } from "~/composables/useNavigation";
-import type { NavigationMenuItem } from "@nuxt/ui";
-import type { Schemas } from "#shopware";
-
-type Category = Schemas["Category"];
-
-const props = withDefaults(
-  defineProps<{
-    shouldSkipFirstLevel?: boolean;
-  }>(),
-  {
-    shouldSkipFirstLevel: false,
-  },
-);
-
-const { mainNavigation } = useNavigation(true);
-
-const navItems = computed<NavigationMenuItem[]>(() => {
-  const elements = mainNavigation.value ?? [];
-
-  const mapCategoryRecursively = (category: Category): NavigationMenuItem => {
-    const hasChildren = (category.children?.length ?? 0) > 0;
-
-    return {
-      label: category.translated?.name ?? "",
-      to: hasChildren ? undefined : category.seoUrl,
-      children: hasChildren
-        ? category.children!.map(mapCategoryRecursively)
-        : undefined,
-    };
-  };
-
-  if (props.shouldSkipFirstLevel) {
-    return elements
-      .flatMap((item: Category) => item.children ?? [])
-      .map(mapCategoryRecursively);
-  }
-
-  return elements.map(mapCategoryRecursively);
-});
-</script>
-
-<template>
-  <UNavigationMenu
-    class="lg:hidden"
-    orientation="horizontal"
-    :items="navItems"
-    :ui="{
-      list: 'overflow-x-auto',
-      item: 'flex-shrink-0',
-    }"
-  >
-    <template #list-leading>
-      <UIcon name="i-lucide-chevron-left" class="size-8" />
-    </template>
-    <template #list-trailing>
-      <UIcon name="i-lucide-chevron-right" class="size-8" />
-    </template>
-  </UNavigationMenu>
-</template>