@shopbite-de/storefront 1.10.1 → 1.11.0

package/app/components/Category/Breadcrumb.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+import type { BreadcrumbItem } from "#ui/components/Breadcrumb.vue";
+
+const props = defineProps<{
+  categoryId: string | undefined;
+}>();
+
+const { categoryId } = toRefs(props);
+
+const { apiClient } = useShopwareContext();
+
+const breadcrumbJsonLd = ref<object | null>(null);
+
+useHead(() => {
+  if (!breadcrumbJsonLd.value) return {};
+  return {
+    script: [
+      {
+        key: "jsonld-breadcrumb",
+        type: "application/ld+json",
+        children: JSON.stringify(breadcrumbJsonLd.value),
+      },
+    ],
+  };
+});
+
+const cacheKey = computed(() => `breadcrumb-${categoryId.value}`);
+
+const { data } = await useAsyncData(cacheKey, async () => {
+  if (!categoryId.value) return [];
+  const response = await apiClient.invoke(
+    "readBreadcrumb get /breadcrumb/{id}",
+    {
+      pathParams: { id: categoryId.value },
+      query: { type: "category" },
+    },
+  );
+  return response.data;
+});
+
+const items = computed<BreadcrumbItem[]>(() => {
+  if (!data.value) return [];
+  return data.value?.map((item: Schemas["Breadcrumb"]) => {
+    return {
+      label: item.name,
+      to: "/" + item.path,
+    };
+  });
+});
+
+watchEffect(() => {
+  const list = items.value ?? [];
+  if (!list.length) {
+    breadcrumbJsonLd.value = null;
+    return;
+  }
+
+  breadcrumbJsonLd.value = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: list.map((it, index) => ({
+      "@type": "ListItem",
+      position: index + 1,
+      name: it.label,
+      item: new URL(String(it.to ?? "/"), useRequestURL().origin).toString(),
+    })),
+  };
+});
+</script>
+
+<template>
+  <UBreadcrumb :items="items" />
+</template>

package/app/components/Category/Header.vue

@@ -1,60 +1,42 @@
 <script setup lang="ts">
 import type { Schemas } from "#shopware";
 
-defineProps<{
+const props = defineProps<{
   category: Schemas["Category"];
 }>();
+
+const { category: categoryRef } = toRefs(props);
+
+const categoryCover = computed(
+  () => categoryRef.value.media?.url ?? "/category-placeholder.webp",
+);
 </script>
 
 <template>
   <div
-    v-if="category.media?.url"
-    class="relative mb-4 mt-8 h-40 w-full overflow-hidden rounded-lg"
+    class="relative mb-4 mt-8 min-h-36 w-full overflow-hidden rounded-[0.5rem]"
   >
     <NuxtImg
-      v-if="category.media?.url"
-      :src="category.media.url"
+      :src="categoryCover"
       class="absolute inset-0 h-full w-full object-cover"
       sizes="sm:100vw md:700px"
-      alt="Pizza Kategorie"
+      :alt="category.name + ' Cover Image'"
       placeholder
     />
-    <div
-      v-if="category.media?.url"
-      class="absolute inset-0 bg-gradient-to-t from-black/50 to-black/10"
-    />
-
-    <div v-else class="absolute inset-0 bg-primary" />
+    <div class="absolute inset-0 bg-linear-to-t from-black/50 to-black/10" />
 
     <div class="relative p-4">
-      <h1 class="text-white font-semibold">
-        {{ category.name }}
+      <h1
+        class="text-white text-4xl md:text-5xl lg:text-6xl font-extrabold leading-none tracking-tighter mb-3"
+      >
+        {{ categoryRef.name }}
       </h1>
-      <p v-if="category.description">
-        {{ category.description }}
+      <p
+        v-if="categoryRef.description"
+        class="text-white/90 text-[16px] text-pretty mt-1"
+      >
+        {{ categoryRef.description }}
       </p>
     </div>
   </div>
-  <UPageCard
-    v-else
-    :title="category.translated.name ?? category.name"
-    :description="category.translated.description ?? category.description"
-    variant="soft"
-    class="my-4"
-    :ui="{
-      title: 'text-3xl md:text-4xl',
-    }"
-  />
 </template>
-
-<style scoped>
-@import "tailwindcss";
-
-h1 {
-  @apply text-white text-4xl md:text-5xl lg:text-6xl font-extrabold leading-none tracking-tighter mb-3;
-}
-
-p {
-  @apply text-white/90 text-[16px] text-pretty mt-1;
-}
-</style>

package/app/components/Category/Listing.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { operations, Schemas } from "#shopware";
+import Breadcrumb from "~/components/Category/Breadcrumb.vue";
 
 const props = defineProps<{
   id: string;
@@ -59,12 +60,11 @@ const {
 
 const { search: categorySearch } = useCategorySearch();
 
-const { data: category } = await useAsyncData(
-  `category${categoryId.value}`,
-  async () => {
-    return await categorySearch(categoryId.value);
-  },
-);
+const categoryCacheKey = computed(() => `category-${categoryId.value}`);
+
+const { data: category } = await useAsyncData(categoryCacheKey, async () => {
+  return await categorySearch(categoryId.value);
+});
 
 useCategorySeo(category);
 
@@ -130,6 +130,7 @@ const moreThanOneFilterAndOption = computed<boolean>(
 
       <UPageBody>
         <div>
+          <Breadcrumb :category-id="category?.id" />
           <CategoryHeader v-if="category" :category="category" />
           <div class="flex flex-row justify-between gap-4 mb-4">
             <UBadge

package/app/components/Hero.vue

@@ -43,9 +43,10 @@ onMounted(() => {
       loop
       muted
       playsinline
+      fetchpriority="high"
       class="absolute inset-0 w-full h-full object-cover -z-10"
     >
-      <source fetchpriority="high" :src="backgroundVideo" type="video/mp4" >
+      <source :src="backgroundVideo" type="video/mp4" >
     </video>
     <div class="bg-black/50 backdrop-blur-sm">
       <UPageHero

package/app/components/Navigation/DesktopLeft2.vue

@@ -7,26 +7,26 @@ const { loadNavigationElements } = useNavigation();
 const { data: navigationElements } = await useAsyncData(
   `menu-navigation`,
   async () => {
-    return await loadNavigationElements({ depth: 2 });
+    return await loadNavigationElements({ depth: 3 });
   },
 );
 
+const mapCategoryToNavItem = (
+  category: Schemas["Category"],
+): NavigationMenuItem => {
+  const label = category.translated?.name ?? "";
+
+  return {
+    label,
+    description: `${label} Kategorie`,
+    to: category.seoUrl,
+    defaultOpen: true,
+    children: (category.children ?? []).map(mapCategoryToNavItem),
+  };
+};
+
 const navItems = computed<NavigationMenuItem[]>(() => {
-  return navigationElements.value?.map((item: Schemas["Category"]) => {
-    return {
-      label: item.translated?.name,
-      description: `${item.translated?.name} Kategorie`,
-      to: item.seoUrl,
-      defaultOpen: true,
-      children: item.children?.map((child: Schemas["Category"]) => {
-        return {
-          label: child.translated?.name,
-          description: `${child.translated?.name} Kategorie`,
-          to: child.seoUrl,
-        };
-      }),
-    };
-  });
+  return (navigationElements.value ?? []).map(mapCategoryToNavItem);
 });
 </script>
 

package/app/components/Navigation/MobileTop2.vue

@@ -2,23 +2,43 @@
 import type { NavigationMenuItem } from "@nuxt/ui";
 import type { Schemas } from "#shopware";
 
+type Category = Schemas["Category"];
+
+const props = withDefaults(
+  defineProps<{
+    shouldSkipFirstLevel?: boolean;
+  }>(),
+  {
+    shouldSkipFirstLevel: false,
+  },
+);
+
 const { loadNavigationElements, navigationElements } = useNavigation();
 
-loadNavigationElements({ depth: 1 });
+loadNavigationElements({ depth: 3 });
 
 const navItems = computed<NavigationMenuItem[]>(() => {
-  return navigationElements.value?.map((item: Schemas["Category"]) => {
+  const elements = navigationElements.value ?? [];
+
+  const mapCategoryRecursively = (category: Category): NavigationMenuItem => {
+    const hasChildren = (category.children?.length ?? 0) > 0;
+
     return {
-      label: item.translated?.name,
-      to: item.children.length === 0 ? item.seoUrl : undefined,
-      children: item.children?.map((child: Schemas["Category"]) => {
-        return {
-          label: child.translated?.name,
-          to: child.seoUrl,
-        };
-      }),
+      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>
 

package/app/components/User/RegistrationForm.vue

@@ -250,9 +250,7 @@ const emit = defineEmits<{
         <template #label>
           <span>
             Ich habe die
-            <ULink to="/unternehmen/datenschutz">
-              Datenschutzbestimmungen
-            </ULink>
+            <ULink to="/datenschutz"> Datenschutzbestimmungen </ULink>
             gelesen und akzeptiere diese.
           </span>
         </template>

package/app/composables/useCategorySeo.ts

@@ -28,53 +28,6 @@ export function useCategorySeo(category: Ref<Schemas["Category"] | undefined>) {
     return base + path;
   });
 
-  const breadcrumb = computed<string[]>(
-    () =>
-      category.value?.translated?.breadcrumb ??
-      category.value?.breadcrumb ??
-      [],
-  );
-
-  // Build BreadcrumbList items from category breadcrumb
-  type BreadcrumbListItem = {
-    "@type": "ListItem";
-    position: number;
-    name: string;
-    item?: string;
-  };
-  const breadcrumbItems = computed(() => {
-    const names = (breadcrumb.value || []) as string[];
-    const items: BreadcrumbListItem[] = [
-      {
-        "@type": "ListItem",
-        position: 1,
-        name: "Home",
-        item: config.public.storeUrl || "/",
-      },
-    ];
-
-    if (names.length > 0) {
-      names.forEach((name: string, idx: number) => {
-        const isLast = idx === names.length - 1;
-        items.push({
-          "@type": "ListItem",
-          position: idx + 2,
-          name,
-          ...(isLast && canonicalUrl.value ? { item: canonicalUrl.value } : {}),
-        });
-      });
-    } else if (pageTitle.value) {
-      items.push({
-        "@type": "ListItem",
-        position: 2,
-        name: pageTitle.value,
-        ...(canonicalUrl.value ? { item: canonicalUrl.value } : {}),
-      });
-    }
-
-    return items;
-  });
-
   const ogImage = computed(() => category.value?.media?.url);
 
   const siteName = computed(() => config.public.site?.name || "");
@@ -145,14 +98,6 @@ export function useCategorySeo(category: Ref<Schemas["Category"] | undefined>) {
           ...(ogImage.value ? { image: [ogImage.value] } : {}),
         }),
       },
-      {
-        type: "application/ld+json",
-        innerHTML: JSON.stringify({
-          "@context": "https://schema.org",
-          "@type": "BreadcrumbList",
-          itemListElement: breadcrumbItems.value,
-        }),
-      },
     ],
   });
 

package/app/layouts/listing2.vue

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

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+
+definePageMeta({
+  layout: "listing2",
+});
+const { clearBreadcrumbs } = useBreadcrumbs();
+const { resolvePath } = useNavigationSearch();
+const route = useRoute();
+const routePath = route.path;
+
+const { data: seoResult, error } = await useAsyncData(
+  `cmsResponse${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 seoUrl = await resolvePath(routePath);
+
+    if (!seoUrl?.foreignKey) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: `No data fetched from API for ${routePath}`,
+      });
+    }
+
+    return seoUrl;
+  },
+);
+
+if (error.value) {
+  throw error.value;
+}
+
+const { foreignKey } = useNavigationContext(
+  seoResult as Ref<Schemas["SeoUrl"]>,
+);
+
+onBeforeRouteLeave(() => {
+  clearBreadcrumbs();
+});
+</script>
+
+<template>
+  <CategoryListing :id="foreignKey" :key="foreignKey" />
+</template>

package/content/index.yml

@@ -23,7 +23,7 @@ hero:
       icon: i-lucide-arrow-right
       trailing: true
       color: primary
-      to: /menu/
+      to: /speisekarte/
       size: xl
     - label: Tisch reservieren
       icon: i-lucide-phone
@@ -84,10 +84,10 @@ gallery:
 cta:
   title: Jetzt bestellen!
   description: Genieße die italienische Küche, frisch zubereitet und direkt zu dir geliefert oder vor Ort genießen.
-  backgroundImage: https://shopware.shopbite.de/media/f5/19/4a/1762546880/category-pizza-header.webp
+  backgroundImage: https://shopware.shopbite.de/media/f2/22/5f/1770899823/category-pizza-header2.webp
   links:
     - label: Zur Speisekarte
-      to: /menu/
+      to: /speisekarte/
       color: primary
     - label: Tisch reservieren
       to: tel:+49610471427

package/node.dockerfile

@@ -35,4 +35,4 @@ USER node
 
 EXPOSE 3000
 
-CMD [ "node", ".output/server/index.mjs" ]
+CMD [ "node", "--trace-warnings", ".output/server/index.mjs" ]

package/package.json

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

package/test/e2e/simple-checkout-as-recurring-customer.test.ts

@@ -50,7 +50,7 @@ async function clearCart(page: Page) {
 }
 
 async function navigateToCategoryAndVerifyProducts(page: Page) {
-  await page.goto("/c/Pizza/", { waitUntil: "load" });
+  await page.goto("/speisekarte/pizza/", { waitUntil: "load" });
   await expect(page.locator("h1")).toHaveText("Pizza");
 
   const productCards = page.locator('[id^="product-card-"]');

package/test/unit/useCategorySeo.spec.ts

@@ -107,26 +107,12 @@ describe("useCategorySeo", () => {
 
     // JSON-LD scripts
     const scripts = headArg.script || [];
-    expect(scripts.length).toBeGreaterThanOrEqual(2);
+    expect(scripts.length).toBeGreaterThanOrEqual(1);
 
     const collection = JSON.parse(scripts[0].innerHTML);
     expect(collection["@type"]).toBe("CollectionPage");
     expect(collection.url).toBe("https://example.com/c/pasta");
     expect(collection.image?.[0]).toBe("https://example.com/img/pasta.jpg");
-
-    const breadcrumb = JSON.parse(scripts[1].innerHTML);
-    expect(breadcrumb["@type"]).toBe("BreadcrumbList");
-    const items = breadcrumb.itemListElement;
-    // Home item
-    expect(items[0]).toMatchObject({
-      "@type": "ListItem",
-      position: 1,
-      name: "Home",
-      item: "https://example.com",
-    });
-    // Last item should include canonical URL
-    const last = items[items.length - 1];
-    expect(last.item).toBe("https://example.com/c/pasta");
   });
 
   it("sets robots to noindex when category is inactive", () => {

package/app/pages/speisekarte.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import type { Schemas } from "#shopware";
-
-const {
-  public: { site },
-} = useRuntimeConfig();
-
-const pageTitle = computed(() => `Speisekarte | ${site?.name}`);
-
-useSeoMeta({ title: pageTitle });
-
-definePageMeta({
-  layout: "listing",
-});
-
-const { loadNavigationElements, navigationElements } = useNavigation();
-await loadNavigationElements({ depth: 1 });
-
-const searchBarRef = ref<{
-  showSuggest: boolean;
-  loading: boolean;
-  products: Schemas["Product"];
-} | null>(null);
-
-const searchInProgress = ref(false);
-</script>
-
-<template>
-  <div v-if="navigationElements">
-    <div class="sticky top-16 left-0 z-20 w-full backdrop-blur-md rounded-md">
-      <NavigationMobileTop v-if="!searchInProgress" class="" />
-      <ProductSearchBar
-        ref="searchBarRef"
-        v-model:search-in-progress="searchInProgress"
-      />
-    </div>
-    <div v-if="searchBarRef?.showSuggest" class="flex flex-col gap-4 mt-4">
-      <div v-if="!searchBarRef?.loading" class="flex flex-col gap-4">
-        <ProductCard
-          v-for="product in searchBarRef?.products"
-          :key="product.id"
-          :product="product"
-          :with-favorite-button="true"
-          :with-add-to-cart-button="true"
-        />
-      </div>
-    </div>
-    <div v-else>
-      <ProductCategory
-        v-for="category in navigationElements"
-        :key="category.id"
-        :category="category"
-      />
-    </div>
-  </div>
-  <div v-else>Loading...</div>
-</template>