@shopbite-de/storefront 1.8.0 → 1.9.0

package/app/app.vue

@@ -89,6 +89,19 @@ onMounted(async () => {
   await Promise.all([refreshCart(), getWishlistProducts()]);
   displayStoreStatus();
 });
+
+useHead({
+  htmlAttrs: {
+    lang: "de",
+  },
+  link: [
+    {
+      rel: "icon",
+      type: "image/png",
+      href: "/favicon.ico",
+    },
+  ],
+});
 </script>
 
 <template>

package/app/components/Category/Listing.vue

@@ -65,15 +65,7 @@ const { data: category } = await useAsyncData(
   },
 );
 
-const pageTitle = computed(
-  () =>
-    `${category.value?.translated.name ?? category.value?.name} | Speisekarte`,
-);
-
-useSeoMeta({
-  title: pageTitle,
-  robots: "index,follow",
-});
+useCategorySeo(category);
 
 const currentSorting = ref(getCurrentSortingOrder.value ?? "Sortieren");
 

package/app/components/Footer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { data: navigationData } = await useAsyncData("navigation", () =>
+const { data: navigationData } = await useAsyncData("navigation:footer", () =>
   queryCollection("navigation").first(),
 );
 

package/app/components/Header/Right.vue

@@ -17,7 +17,7 @@ const logoutHandler = () => {
   });
 };
 
-const { data: navigationData } = await useAsyncData("navigation", () =>
+const { data: navigationData } = await useAsyncData("navigation:right", () =>
   queryCollection("navigation").first(),
 );
 

package/app/composables/useCategorySeo.ts

@@ -0,0 +1,169 @@
+import type { Schemas } from "#shopware";
+
+export function useCategorySeo(category: Ref<Schemas["Category"] | undefined>) {
+  const config = useRuntimeConfig();
+  const storeName = config.public.site?.name || "";
+
+  const pageTitle = computed(() => {
+    const categoryName =
+      category.value?.translated?.metaTitle ??
+      category.value?.metaTitle ??
+      category.value?.translated?.name ??
+      category.value?.name;
+
+    return categoryName + " | Speisekarte | " + storeName;
+  });
+
+  const pageDescription = computed(
+    () =>
+      category.value?.translated?.metaDescription ??
+      category.value?.metaDescription ??
+      category.value?.translated?.description ??
+      category.value?.description,
+  );
+
+  const seoUrl = computed(() => {
+    const base = config.public.storeUrl || "";
+    const path = category.value?.seoUrl || "";
+    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 || "");
+  const locale = computed(() => {
+    try {
+      const lang = import.meta.client
+        ? document?.documentElement?.lang
+        : undefined;
+      return (lang || "de").replace("_", "-");
+    } catch {
+      return "de";
+    }
+  });
+
+  const robots = computed(() => {
+    const active = category.value?.active;
+    return active === false ? "noindex,nofollow" : "index,follow";
+  });
+
+  const canonicalUrl = computed(() => seoUrl.value || "");
+
+  const ogImageAlt = computed(() => pageTitle.value);
+
+  useSeoMeta({
+    title: pageTitle,
+    description: pageDescription,
+    ogTitle: pageTitle,
+    ogDescription: pageDescription,
+    ogUrl: seoUrl,
+    ogImage,
+    ogType: "website",
+    ogSiteName: siteName,
+    ogLocale: locale,
+    ogImageAlt,
+    twitterTitle: pageTitle,
+    twitterDescription: pageDescription,
+    twitterImage: ogImage,
+    twitterCard: "summary_large_image",
+    robots,
+  });
+
+  // Add canonical link tag and JSON-LD schema
+  useHead({
+    link: [
+      {
+        rel: "canonical",
+        href: canonicalUrl.value,
+      },
+    ],
+    script: [
+      {
+        type: "application/ld+json",
+        innerHTML: JSON.stringify({
+          "@context": "https://schema.org",
+          "@type": "CollectionPage",
+          name: pageTitle.value,
+          description: pageDescription.value,
+          url: canonicalUrl.value,
+          ...(siteName.value
+            ? {
+                isPartOf: {
+                  "@type": "WebSite",
+                  name: siteName.value,
+                  url: config.public.storeUrl || "",
+                },
+              }
+            : {}),
+          ...(ogImage.value ? { image: [ogImage.value] } : {}),
+        }),
+      },
+      {
+        type: "application/ld+json",
+        innerHTML: JSON.stringify({
+          "@context": "https://schema.org",
+          "@type": "BreadcrumbList",
+          itemListElement: breadcrumbItems.value,
+        }),
+      },
+    ],
+  });
+
+  return {
+    pageTitle,
+    pageDescription,
+    seoUrl,
+    ogImage,
+    canonicalUrl,
+    robots,
+    siteName,
+    locale,
+  };
+}

package/app/pages/index.vue

@@ -10,6 +10,8 @@ if (!page.value) {
   });
 }
 
+const config = useRuntimeConfig();
+
 useSeoMeta({
   title: page.value.seo?.title || page.value.title,
   ogTitle: page.value.seo?.title || page.value.title,
@@ -17,8 +19,10 @@ useSeoMeta({
   description: page.value.seo?.description || page.value.description,
   ogDescription: page.value.seo?.description || page.value.description,
   twitterDescription: page.value.seo?.description || page.value.description,
-  ogImage: page.value.seo?.image,
-  twitterImage: page.value.seo?.image,
+  twitterCard: "summary",
+  ogImage: page.value.seo?.image as string | undefined,
+  twitterImage: page.value.seo?.image as string | undefined,
+  ogUrl: config.public.storeUrl,
 });
 </script>
 <template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.8.0",
+  "version": "1.9.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("/c/Pizza/", { waitUntil: "load" });
   await expect(page.locator("h1")).toHaveText("Pizza");
 
   const productCards = page.locator('[id^="product-card-"]');

package/test/unit/useCategorySeo.spec.ts

@@ -0,0 +1,142 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { ref } from "vue";
+
+// Create shared mocks to be exported by both '#imports' and '#app' in a hoisted-safe way
+const shared = vi.hoisted(() => ({
+  useHead: vi.fn(),
+  useSeoMeta: vi.fn(),
+}));
+
+// Mock Nuxt auto-imports via `#imports`
+vi.mock("#imports", async () => {
+  const vue = await import("vue");
+
+  // Expose mocks for inspection in tests
+  return {
+    ...vue,
+    useRuntimeConfig: () => ({
+      public: {
+        site: { name: "My Store" },
+        storeUrl: "https://example.com",
+      },
+    }),
+    useHead: shared.useHead,
+    useSeoMeta: shared.useSeoMeta,
+  };
+});
+
+// Some auto-imports may resolve from '#app' depending on transform, mirror the same mocks
+vi.mock("#app", async () => {
+  const vue = await import("vue");
+  return {
+    ...vue,
+    useRuntimeConfig: () => ({
+      public: {
+        site: { name: "My Store" },
+        storeUrl: "https://example.com",
+      },
+    }),
+    useHead: shared.useHead,
+    useSeoMeta: shared.useSeoMeta,
+  };
+});
+
+// Re-import the mocks for assertions
+import { useHead, useSeoMeta } from "#imports";
+
+// Target under test will be dynamically imported after setting up globals
+let useCategorySeo: (arg: any) => any;
+
+describe("useCategorySeo", () => {
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    // Provide globals for auto-imported functions (when not transformed in unit env)
+    const vue = await import("vue");
+    (globalThis as any).computed = vue.computed;
+    (globalThis as any).ref = vue.ref;
+    (globalThis as any).useRuntimeConfig = () => ({
+      public: { site: { name: "My Store" }, storeUrl: "https://example.com" },
+    });
+    (globalThis as any).useHead = useHead;
+    (globalThis as any).useSeoMeta = useSeoMeta;
+
+    // Dynamic import after globals are ready
+    useCategorySeo = (await import("../../app/composables/useCategorySeo"))
+      .useCategorySeo;
+  });
+
+  it("computes core SEO refs and injects head tags", () => {
+    const category = ref<any>({
+      translated: {
+        metaTitle: "Pizza & Pasta",
+        metaDescription: "Leckere Pizza und Pasta bestellen",
+        breadcrumb: ["Speisen", "Italienisch", "Pasta"],
+      },
+      seoUrl: "/c/pasta",
+      active: true,
+      media: { url: "https://example.com/img/pasta.jpg" },
+    });
+
+    const result = useCategorySeo(category);
+
+    // Returned refs
+    expect(result.pageTitle.value).toBe(
+      "Pizza & Pasta | Speisekarte | My Store",
+    );
+    expect(result.canonicalUrl.value).toBe("https://example.com/c/pasta");
+    expect(result.robots.value).toBe("index,follow");
+
+    // useSeoMeta should be called once with expected keys
+    expect(
+      useSeoMeta as unknown as ReturnType<typeof vi.fn>,
+    ).toHaveBeenCalledTimes(1);
+
+    // useHead should receive canonical link and JSON-LD scripts
+    expect(
+      useHead as unknown as ReturnType<typeof vi.fn>,
+    ).toHaveBeenCalledTimes(1);
+    const headArg = (useHead as unknown as ReturnType<typeof vi.fn>).mock
+      .calls[0][0];
+
+    // Canonical link
+    const link = headArg.link?.[0];
+    expect(link).toMatchObject({
+      rel: "canonical",
+      href: "https://example.com/c/pasta",
+    });
+
+    // JSON-LD scripts
+    const scripts = headArg.script || [];
+    expect(scripts.length).toBeGreaterThanOrEqual(2);
+
+    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", () => {
+    const category = ref<any>({
+      translated: { name: "Salate" },
+      active: false,
+      seoUrl: "/c/salate",
+    });
+
+    const result = useCategorySeo(category);
+    expect(result.robots.value).toBe("noindex,nofollow");
+  });
+});