@shopbite-de/storefront 1.7.10 → 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/AddToWishlist.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Schemas } from "#shopware";
-import { useTrackEvent } from "#imports";
 
 const props = defineProps<{
   product: Schemas["Product"];
@@ -10,25 +9,17 @@ const { addToWishlist, isInWishlist, removeFromWishlist } = useProductWishlist(
   props.product.id,
 );
 const { getWishlistProducts } = useWishlist();
-
-const trackWishlistEvent = (
-  action: "add_to_wishlist" | "remove_from_wishlist",
-) => {
-  useTrackEvent(action, {
-    props: { product_number: props.product.productNumber },
-  });
-};
+const { trackAddToWishlist } = useTrackEvent();
 
 const toggleWishlistProduct = async () => {
   try {
     if (isInWishlist.value) {
       await removeFromWishlist();
-      trackWishlistEvent("remove_from_wishlist");
       await getWishlistProducts();
     } else {
       await addToWishlist();
-      trackWishlistEvent("add_to_wishlist");
       await getWishlistProducts();
+      trackAddToWishlist(props.product);
     }
   } catch (error) {
     console.error("[wishlist][handleWishlistError]", error);

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/Checkout/Summary.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import QuickView from "~/components/Cart/QuickView.vue";
 import { useIntervalFn } from "@vueuse/core";
-import { useTrackEvent } from "#imports";
 
 const { selectedPaymentMethod, selectedShippingMethod } = useCheckout();
 const { createOrder } = useCheckout();
 const { refreshCart } = useCart();
 const { isLoggedIn, isGuestSession } = useUser();
 const { isCheckoutEnabled, refresh } = useShopBiteConfig();
+const { trackOrder } = useTrackEvent();
 
 const toast = useToast();
 
@@ -24,12 +24,7 @@ async function handleCreateOrder() {
     customerComment: "Wunschlieferzeit: " + selectedDeliveryTime.value,
   });
 
-  useTrackEvent("checkout", {
-    revenue: {
-      currency: "EUR",
-      amount: order.amountTotal as number,
-    },
-  });
+  trackOrder(order);
 
   await refreshCart();
   toast.add({

package/app/components/Food/MarqueeItem.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useTrackEvent } from "#imports";
 import { useProductSearch } from "@shopware/composables";
 import type { Schemas } from "#shopware";
 
@@ -42,12 +41,6 @@ async function addToCart(productId: string) {
   });
   await refreshCart(newCart);
   await showSuccessToast();
-  useTrackEvent("add_to_cart", {
-    props: {
-      product_number: product.productNumber,
-      quantity: 1,
-    },
-  });
 }
 </script>
 

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/components/Navigation/DesktopLeft.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from "@nuxt/ui";
 import type { Schemas } from "#shopware";
-import { useTrackEvent } from "#imports";
 
 const { loadNavigationElements, navigationElements } = useNavigation();
 
@@ -17,9 +16,6 @@ const scrollToElement = (elementId: string, margin = 0) => {
       top: offsetPosition,
       behavior: "smooth",
     });
-    useTrackEvent("scroll_to_category", {
-      props: { category_name: elementId },
-    });
   }
 };
 

package/app/components/Navigation/MobileTop.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from "@nuxt/ui";
 import type { Schemas } from "#shopware";
-import { useTrackEvent } from "#imports";
 
 const { loadNavigationElements, navigationElements } = useNavigation();
 
@@ -17,9 +16,6 @@ const scrollToElement = (elementId: string, margin = 0) => {
       top: offsetPosition,
       behavior: "smooth",
     });
-    useTrackEvent("scroll_to_category", {
-      props: { category_name: elementId },
-    });
   }
 };
 

package/app/components/Product/Detail2.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { operations, Schemas } from "#shopware";
 import type { AssociationItemProduct } from "~/types/Association";
+import { useTrackEvent } from "~/composables/useTrackEvent";
 
 const props = defineProps<{
   productId: string;
 }>();
 
 const { apiClient } = useShopwareContext();
+const { trackProductView } = useTrackEvent();
 
 const productId = toRef(props.productId);
 
@@ -23,6 +25,7 @@ const searchCriteria = {
       "propertyIds",
       "options",
       "optionIds",
+      "seoCategory",
       "configuratorSettings",
       "children",
       "parentId",
@@ -33,6 +36,7 @@ const searchCriteria = {
     property_group_option: ["id", "name", "translated", "group"],
     product_configurator_setting: ["id", "optionId", "option", "productId"],
     product_option: ["id", "groupId", "name", "translated", "group"],
+    category: ["id", "name", "translated"],
   },
   associations: {
     cover: {
@@ -128,6 +132,11 @@ const onIngredientsDeselected = (deselected: string[]) => {
 const onAddToCart = () => emit("product-added");
 
 const emit = defineEmits(["product-added", "variant-selected"]);
+
+watch(productDetails, () => {
+  if (!productDetails.value) return;
+  trackProductView(productDetails.value.product);
+});
 </script>
 
 <template>

package/app/components/Product/SearchBar.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { onClickOutside, useDebounceFn, useFocus } from "@vueuse/core";
-import type { Schemas } from "#shopware";
-import { useTrackEvent } from "#imports";
 
 withDefaults(
   defineProps<{
@@ -53,18 +51,6 @@ watch(typingQuery, (value) => {
 const performSuggestSearch = useDebounceFn((value) => {
   searchTerm.value = value;
   search();
-  trackEvent(value);
-}, 500);
-
-const trackEvent = useDebounceFn((searchTerm: string) => {
-  const searchResult = getProducts.value.map(function (
-    product: Schemas["Product"],
-  ) {
-    return product.productNumber;
-  });
-  useTrackEvent("search", {
-    props: { search_term: searchTerm, search_result: searchResult.join(",") },
-  });
 }, 500);
 
 if (import.meta.client) {

package/app/composables/useAddToCart.ts

@@ -12,6 +12,7 @@ export function useAddToCart() {
   const { addProducts, refreshCart } = useCart();
   const toast = useToast();
   const { triggerProductAdded } = useProductEvents();
+  const { trackAddToCart: trackAddToCartEvent } = useTrackEvent();
 
   const selectedExtras = ref<AssociationItemProduct[]>([]);
   const deselectedIngredients = ref<string[]>([]);
@@ -140,13 +141,7 @@ export function useAddToCart() {
     await showSuccessToast();
 
     triggerProductAdded();
-
-    useTrackEvent("add_to_cart", {
-      props: {
-        product_number: selectedProduct.value.productNumber,
-        quantity: selectedQuantity.value,
-      },
-    });
+    trackAddToCartEvent(selectedProduct.value, selectedQuantity.value);
 
     isLoading.value = false;
     if (onSuccess) {

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/composables/useTrackEvent.ts

@@ -0,0 +1,62 @@
+import type { Schemas } from "#shopware";
+
+export function useTrackEvent() {
+  const { proxy } = useScriptMatomoAnalytics();
+
+  function trackProductView(product: Schemas["Product"]) {
+    proxy._paq.push([
+      "setEcommerceView",
+      product.productNumber,
+      product.translated.name ?? product.name,
+      product.seoCategory.name,
+      product.calculatedPrice.unitPrice,
+    ]);
+    proxy._paq.push(["trackPageView", product.productNumber]);
+  }
+
+  function trackOrder(order: Schemas["Order"]) {
+    order.lineItems?.forEach((item) => {
+      if (item.type === "container") return;
+      proxy._paq.push([
+        "addEcommerceItem",
+        item.product?.productNumber ?? item.id,
+        item.label,
+        item.product?.seoCategory.name ?? "Default",
+        item.unitPrice,
+        item.quantity,
+      ]);
+    });
+
+    proxy._paq.push([
+      "trackEcommerceOrder",
+      order.orderNumber,
+      order.price.totalPrice,
+    ]);
+  }
+
+  function trackAddToWishlist(product: Schemas["Product"]) {
+    proxy._paq.push([
+      "trackEvent",
+      "Product",
+      "AddToWishlist",
+      product.productNumber,
+    ]);
+  }
+
+  function trackAddToCart(product: Schemas["Product"], quantity: number) {
+    proxy._paq.push([
+      "trackEvent",
+      "Cart",
+      "AddToCart",
+      product.productNumber,
+      quantity,
+    ]);
+  }
+
+  return {
+    trackProductView,
+    trackOrder,
+    trackAddToWishlist,
+    trackAddToCart,
+  };
+}

package/app/composables/useWishlistActions.ts

@@ -5,6 +5,7 @@ export function useWishlistActions() {
   const toast = useToast();
   const { triggerProductAdded } = useProductEvents();
   const { clearWishlist } = useWishlist();
+  const { trackAddToCart: trackAddToCartEvent } = useTrackEvent();
 
   const isAddingToCart = ref(false);
   const addingItemId = ref<string | null>(null);
@@ -53,6 +54,7 @@ export function useWishlistActions() {
       await refreshCart(newCart);
 
       triggerProductAdded();
+      trackAddToCartEvent(product, 1);
 
       toast.add({
         title: "In den Warenkorb gelegt",
@@ -60,13 +62,6 @@ export function useWishlistActions() {
         icon: "i-lucide-shopping-cart",
         color: "primary",
       });
-
-      useTrackEvent("add_to_cart", {
-        props: {
-          product_number: product.productNumber,
-          quantity: 1,
-        },
-      });
     } catch (error) {
       console.error("[wishlist][addSingleItemToCart] Error details:", error);
       toast.add({
@@ -128,14 +123,6 @@ export function useWishlistActions() {
         icon: "i-lucide-shopping-cart",
         color: "primary",
       });
-
-      useTrackEvent("add_to_cart", {
-        props: {
-          product_count: addableProducts.length,
-          skipped_count: products.length - addableProducts.length,
-          source: "wishlist_bulk",
-        },
-      });
     } catch (error) {
       console.error("[wishlist][addAllItemsToCart] Error:", error);
       toast.add({

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/content/index.yml

@@ -23,7 +23,7 @@ hero:
       icon: i-lucide-arrow-right
       trailing: true
       color: primary
-      to: /speisekarte
+      to: /menu/
       size: xl
     - label: Tisch reservieren
       icon: i-lucide-phone
@@ -87,7 +87,7 @@ cta:
   backgroundImage: https://shopware.shopbite.de/media/f5/19/4a/1762546880/category-pizza-header.webp
   links:
     - label: Zur Speisekarte
-      to: /speisekarte
+      to: /menu/
       color: primary
     - label: Tisch reservieren
       to: tel:+49610471427

package/content/navigation.yml

@@ -48,12 +48,8 @@ footer:
           to: /agb
     - label: Top Kategorien
       children:
-        - label: Pizza
-          to: /c/Pizza/
-        - label: Nudeln
-          to: /c/Nudeln/
-        - label: Fleischgerichte
-          to: /c/Fleischgerichte/
+        - label: Burger
+          to: /menu/burger/
     - label: Unternehmen
       children:
         - label: 'Tel: 06104 71427'

package/nuxt.config.ts

@@ -97,14 +97,9 @@ export default defineNuxtConfig({
     "@sentry/nuxt/module",
     "@nuxt/ui",
     "@nuxt/scripts",
-    "@nuxtjs/plausible",
     "nuxt-vitalizer",
   ],
 
-  plausible: {
-    ignoredHostnames: ["localhost"],
-  },
-
   content: {
     experimental: { sqliteConnector: "native" },
   },
@@ -184,7 +179,6 @@ export default defineNuxtConfig({
       "@sentry/nuxt/module",
       "@nuxt/ui",
       "@nuxt/scripts",
-      "@nuxtjs/plausible",
       "@nuxt/test-utils/module",
       "@nuxt/eslint",
     ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.7.10",
+  "version": "1.9.0",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [
@@ -22,7 +22,6 @@
     "@nuxt/image": "^2.0.0",
     "@nuxt/scripts": "0.13.2",
     "@nuxt/ui": "^4.1.0",
-    "@nuxtjs/plausible": "2.0.1",
     "@nuxtjs/robots": "^5.5.6",
     "@sentry/nuxt": "^10.25.0",
     "@shopware/api-client": "^1.3.0",

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/nuxt/useAddToCart.test.ts

@@ -39,7 +39,9 @@ mockNuxtImport("useProductEvents", () => {
 });
 
 mockNuxtImport("useTrackEvent", () => {
-  return mockTrackEvent;
+  return () => ({
+    trackAddToCart: mockTrackEvent,
+  });
 });
 
 // Provide the mocks globally or in a way that they are picked up
@@ -53,7 +55,9 @@ vi.stubGlobal("useToast", () => ({
 vi.stubGlobal("useProductEvents", () => ({
   triggerProductAdded: mockTriggerProductAdded,
 }));
-vi.stubGlobal("useTrackEvent", mockTrackEvent);
+vi.stubGlobal("useTrackEvent", () => ({
+  trackAddToCart: mockTrackEvent,
+}));
 
 describe("useAddToCart", () => {
   const mockProduct = {
@@ -131,10 +135,7 @@ describe("useAddToCart", () => {
     expect(mockRefreshCart).toHaveBeenCalled();
     expect(mockToastAdd).toHaveBeenCalled();
     expect(mockTriggerProductAdded).toHaveBeenCalled();
-    expect(mockTrackEvent).toHaveBeenCalledWith(
-      "add_to_cart",
-      expect.any(Object),
-    );
+    expect(mockTrackEvent).toHaveBeenCalledWith(mockProduct, 1);
   });
 
   it("should add product with extras to cart as container", async () => {

package/test/nuxt/useWishlistActions.test.ts

@@ -35,7 +35,9 @@ mockNuxtImport("useWishlist", () => () => ({
   clearWishlist: mockClearWishlist,
 }));
 
-mockNuxtImport("useTrackEvent", () => mockTrackEvent);
+mockNuxtImport("useTrackEvent", () => () => ({
+  trackAddToCart: mockTrackEvent,
+}));
 
 describe("useWishlistActions", () => {
   const mockProduct = {
@@ -72,10 +74,7 @@ describe("useWishlistActions", () => {
     expect(mockToastAdd).toHaveBeenCalledWith(
       expect.objectContaining({ title: "In den Warenkorb gelegt" }),
     );
-    expect(mockTrackEvent).toHaveBeenCalledWith(
-      "add_to_cart",
-      expect.any(Object),
-    );
+    expect(mockTrackEvent).toHaveBeenCalledWith(mockProduct, 1);
   });
 
   it("should warn when adding a base product with variants", async () => {

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");
+  });
+});

package/app/components/Product/Configurator.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import type { Schemas } from "#shopware";
-const props = defineProps<{
-  parentProduct: Schemas["Product"];
-}>();
-const { parentProduct } = toRefs(props);
-const { product, changeVariant, configurator } = useProduct(
-  parentProduct.value?.children?.length > 0
-    ? parentProduct.value.children[0]
-    : parentProduct.value,
-  parentProduct.value?.configuratorSettings || [],
-);
-const { findVariantForSelectedOptions } = useProductConfigurator();
-const { variants: selectableOptions } = useProductVariants(configurator);
-const selectedOptions = ref<Record<string, string>>({});
-function initialOptions(variant: Ref<Schemas["Product"]>) {
-  const options = variant.value.options as Schemas["PropertyGroupOption"][];
-  for (const option of options) {
-    if (option.group && option.id) {
-      selectedOptions.value[option.group.id] = option.id;
-    }
-  }
-}
-onMounted(() => {
-  initialOptions(product);
-});
-watch(
-  selectedOptions.value,
-  async () => {
-    const foundVariant = await findVariantForSelectedOptions(
-      selectedOptions.value,
-    );
-    const variant = parentProduct.value.children?.find(
-      (child: Schemas["Product"]) => child.id === foundVariant?.id,
-    );
-
-    if (variant) {
-      changeVariant(variant);
-      emit("variant-switched", variant);
-    }
-  },
-  { deep: true },
-);
-const emit = defineEmits<{
-  "variant-switched": [variant: Schemas["Product"]];
-}>();
-</script>
-<template>
-  <div
-    v-for="(variantGroup, propertyGroupId) in selectableOptions"
-    :key="propertyGroupId"
-    class="my-6"
-  >
-    <div class="flex flex-row gap-2 items-center">
-      <div class="basis-1/3">{{ variantGroup.name }}:</div>
-      <USelect
-        v-model="selectedOptions[propertyGroupId]"
-        value-key="productId"
-        :items="variantGroup.options"
-        class="w-full"
-        icon="i-lucide-square-stack"
-      />
-    </div>
-  </div>
-</template>

package/app/components/Product/Detail.vue

@@ -1,187 +0,0 @@
-<script setup lang="ts">
-import type { Schemas, operations } from "#shopware";
-import type { AssociationItemProduct } from "~/types/Association";
-import { v5 as uuidv5 } from "uuid";
-import { computed, ref, toRefs } from "vue";
-import { useTrackEvent } from "#imports";
-
-const UUID_NAMESPACE = "b098ef7e-0fa2-4073-b002-7ceec4360fbf";
-const CART_SUCCESS_TITLE = "Gute Wahl!";
-const LINE_ITEM_PRODUCT = "product";
-const LINE_ITEM_CONTAINER = "container";
-
-const props = defineProps<{
-  product: Schemas["Product"];
-}>();
-const { product } = toRefs(props);
-const { addProducts, refreshCart } = useCart();
-const toast = useToast();
-const { triggerProductAdded } = useProductEvents();
-
-const selectedExtras = ref<AssociationItemProduct[]>([]);
-const deselectedIngredients = ref<string[]>([]);
-const selectedQuantity = ref(1);
-const selectedProduct = ref<Schemas["Product"]>(product.value);
-
-const cartItemLabel = computed(() => {
-  const formatIngredientModifications = (
-    items: Array<{ label: string } | string>,
-    prefix: string,
-  ): string => {
-    if (!items.length) return "";
-
-    const labels = items.map((item) =>
-      typeof item === "string" ? item : item.label,
-    );
-    const separator = " " + prefix;
-    return " " + prefix + labels.join(separator);
-  };
-
-  const extrasFormatted = formatIngredientModifications(
-    selectedExtras.value,
-    "+",
-  );
-  const removedFormatted = formatIngredientModifications(
-    deselectedIngredients.value,
-    "-",
-  );
-
-  return `${selectedProduct.value.translated.name}${extrasFormatted}${removedFormatted}`;
-});
-
-const createExtras = () =>
-  selectedExtras.value.map((extra) => ({
-    id: extra.value,
-    type: LINE_ITEM_PRODUCT,
-    quantity: selectedQuantity.value,
-  }));
-
-const generateSortedExtrasString = (extras: AssociationItemProduct[]) =>
-  extras
-    .map((extra) => extra.value)
-    .sort()
-    .join("");
-
-const generateProductId = (baseId: string, extras: AssociationItemProduct[]) =>
-  extras.length ? baseId + generateSortedExtrasString(extras) : baseId;
-
-function createCartItems(): operations["addLineItem post /checkout/cart/line-item"]["body"]["items"] {
-  const extras = createExtras();
-
-  // Simple product when no extras
-  if (extras.length === 0 && deselectedIngredients.value.length === 0) {
-    return [
-      {
-        id: selectedProduct.value.id,
-        quantity: selectedQuantity.value,
-        type: LINE_ITEM_PRODUCT,
-        label: cartItemLabel.value,
-      },
-    ];
-  }
-
-  // Container product when extras are selected
-  const generatedUuid = uuidv5(
-    generateProductId(selectedProduct.value.id, selectedExtras.value),
-    UUID_NAMESPACE,
-  );
-
-  return [
-    {
-      id: generatedUuid,
-      quantity: selectedQuantity.value,
-      type: LINE_ITEM_CONTAINER,
-      label: cartItemLabel.value,
-      payload: {
-        productNumber: selectedProduct.value.productNumber,
-      },
-      children: [
-        {
-          id: selectedProduct.value.id,
-          quantity: selectedQuantity.value,
-          type: LINE_ITEM_PRODUCT,
-        },
-        ...extras,
-      ],
-    },
-  ];
-}
-
-// Toast Notification
-async function showSuccessToast() {
-  toast.add({
-    title: CART_SUCCESS_TITLE,
-    description: `${selectedProduct.value.translated.name} wurde in den Warenkorb gelegt.`,
-    icon: "i-lucide-shopping-cart",
-    color: "success",
-    progress: true,
-    color: "primary",
-    duration: 2000,
-  });
-}
-
-// Add to Cart
-async function addToCart() {
-  const cartItems = createCartItems();
-  const newCart = await addProducts(cartItems);
-  await refreshCart(newCart);
-  await showSuccessToast();
-  emit("product-added");
-  triggerProductAdded(); // Clear search globally
-  useTrackEvent("add_to_cart", {
-    props: {
-      product_number: selectedProduct.value.productNumber,
-      quantity: selectedQuantity.value,
-    },
-  });
-}
-
-// Event Handlers
-const onVariantSwitched = (variant: Schemas["Product"]) => {
-  selectedProduct.value = variant;
-};
-
-const onExtrasSelected = (extras: AssociationItemProduct[]) => {
-  selectedExtras.value = extras;
-};
-
-const onIngredientsDeselected = (deselected: string[]) => {
-  deselectedIngredients.value = deselected;
-};
-const emit = defineEmits(["product-added"]);
-</script>
-
-<template>
-  <div class="flex flex-col justify-between w-full">
-    <div>
-      <ProductConfigurator
-        :parent-product="product"
-        @variant-switched="onVariantSwitched"
-      />
-      <ProductCrossSelling
-        :product="selectedProduct"
-        @extras-selected="onExtrasSelected"
-      />
-      <ProductDeselectIngredient
-        :product="selectedProduct"
-        @ingredients-deselected="onIngredientsDeselected"
-      />
-    </div>
-    <div class="flex flex-row gap-4 mt-8">
-      <UInputNumber
-        v-model="selectedQuantity"
-        size="xl"
-        placeholder="Anzahl"
-        :min="1"
-        :max="100"
-      />
-      <UButton
-        size="xl"
-        label="In den Warenkorb"
-        icon="i-lucide-shopping-cart"
-        block
-        @click="addToCart"
-      />
-    </div>
-  </div>
-</template>