@shopbite-de/storefront 1.6.1 → 1.7.0

package/.env.example

@@ -7,6 +7,12 @@ NUXT_PUBLIC_SHOPWARE_ENDPOINT="https://shopware.shopbite.de/store-api"
 NUXT_PUBLIC_SHOPWARE_ACCESS_TOKEN="TOKEN"
 NUXT_PUBLIC_SHOPWARE_COUNTRY_ID=019a17a0f67b706a8ec9ead3059e12ba
 
+NUXT_SHOPWARE_ADMIN_ENDPOINT=https://your-shopware-instance.com
+NUXT_SHOPWARE_ADMIN_CLIENT_ID=your_client_id
+NUXT_SHOPWARE_ADMIN_CLIENT_SECRET=your_client_secret
+
+NUXT_PUBLIC_SHOP_BITE_FEATURE_MULTI_CHANNEL=false
+
 OPENAPI_ACCESS_KEY=key
 OPENAPI_JSON_URL="https://shopware.shopbite.net"
 

package/app/components/Header/Body.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { navi } = useHeaderNavigation();
+</script>
+
+<template>
+  <UNavigationMenu
+    color="primary"
+    :items="navi"
+    orientation="vertical"
+    class="-mx-2.5"
+  />
+  <div class="my-4">
+    <SalesChannelSwitch />
+  </div>
+</template>

package/app/components/Header/Right.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { useUser } from "@shopware/composables";
+import type { DropdownMenuItem } from "@nuxt/ui";
+
+const cartQuickViewOpen = ref(false);
+const { count } = useCart();
+const { isCheckoutEnabled } = useShopBiteConfig();
+const { isLoggedIn, isGuestSession, user, logout } = useUser();
+const toast = useToast();
+
+const logoutHandler = () => {
+  logout();
+  toast.add({
+    title: "Tschüss!",
+    description: "Erfolreich abgemeldet.",
+    color: "success",
+  });
+};
+
+const { data: navigationData } = await useAsyncData("header-navigation", () =>
+  queryCollection("navigation").first(),
+);
+
+const accountHoverText = computed(() => {
+  return isLoggedIn.value || isGuestSession.value
+    ? `${user.value?.firstName} ${user.value?.lastName}`
+    : "Hallo";
+});
+
+const loggedInDropDown = computed<DropdownMenuItem[][]>(() => {
+  if (!navigationData.value?.account.loggedIn) return [];
+
+  return navigationData.value.account.loggedIn
+    .map((group) =>
+      group
+        .filter((item) => {
+          if (isGuestSession.value) {
+            return item.type === "label" || item.action === "logout";
+          }
+          return true;
+        })
+        .map((item) => ({
+          label: item.type === "label" ? accountHoverText.value : item.label,
+          type: item.type,
+          icon: item.icon,
+          to: item.to,
+          onSelect: item.action === "logout" ? logoutHandler : undefined,
+        })),
+    )
+    .filter((group) => group.length > 0);
+});
+
+const loggedOutDropDown = computed<DropdownMenuItem[][]>(() => {
+  if (!navigationData.value?.account.loggedOut) return [];
+
+  return navigationData.value.account.loggedOut.map((group) =>
+    group.map((item) => ({
+      label: item.label,
+      type: item.type,
+      icon: item.icon,
+      to: item.to,
+    })),
+  );
+});
+</script>
+
+<template>
+  <UButton
+    color="neutral"
+    variant="ghost"
+    to="tel:+49610471427"
+    target="_blank"
+    icon="i-lucide-phone"
+    aria-label="Anrufen"
+  />
+  <UDropdownMenu
+    :items="isLoggedIn || isGuestSession ? loggedInDropDown : loggedOutDropDown"
+  >
+    <UChip v-if="isLoggedIn || isGuestSession" size="3xl" text="✓">
+      <UButton icon="i-lucide-user" color="neutral" variant="outline" />
+    </UChip>
+    <UButton v-else icon="i-lucide-user" color="neutral" variant="outline" />
+  </UDropdownMenu>
+  <UDrawer
+    v-if="isCheckoutEnabled"
+    v-model:open="cartQuickViewOpen"
+    title="Warenkorb"
+    direction="right"
+  >
+    <UChip :text="count" size="3xl">
+      <UButton
+        color="neutral"
+        variant="outline"
+        icon="i-lucide-shopping-cart"
+      />
+    </UChip>
+
+    <template #header>
+      <h2 class="text-3xl md:text-4xl mt-8 mb-3 pb-2">
+        <UIcon name="i-lucide-shopping-cart" class="size-8" color="primary" />
+        Warenkorb
+      </h2>
+    </template>
+    <template #body>
+      <CartQuickView
+        :with-to-cart-button="true"
+        class="md:min-w-90"
+        @go-to-cart="cartQuickViewOpen = false"
+      />
+    </template>
+  </UDrawer>
+</template>
+
+<style scoped></style>

package/app/components/Header/Title.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const config = useRuntimeConfig();
+const siteName = computed(() => config.public.site.name);
+</script>
+
+<template>
+  <NuxtLink to="/" class="-m-1.5 p-1.5">
+    <span class="sr-only">{{ siteName }}</span>
+    <UColorModeImage
+      light="/light/Logo.png"
+      dark="/dark/Logo.png"
+      class="h-12 w-auto"
+    />
+  </NuxtLink>
+</template>

package/app/components/Header.vue

@@ -1,175 +1,25 @@
 <script setup lang="ts">
-import type { DropdownMenuItem, NavigationMenuItem } from "@nuxt/ui";
-import { useRoute } from "vue-router";
-import { useUser } from "@shopware/composables";
-
-const route = useRoute();
-const toast = useToast();
-
-const { isLoggedIn, isGuestSession, user, logout } = useUser();
-const { isCheckoutEnabled } = useShopBiteConfig();
-const { count } = useCart();
-const runtimeConfig = useRuntimeConfig();
-
-// Fetch navigation from content
-const { data: navigationData } = await useAsyncData("header-navigation", () =>
-  queryCollection("navigation").first(),
-);
-
-const siteName = computed(() => runtimeConfig.public.site?.name ?? "ShopBite");
-
-const navi = computed<NavigationMenuItem[]>(() => {
-  if (!navigationData.value?.main) return [];
-
-  return navigationData.value.main.map((item) => ({
-    label: item.label,
-    icon: item.icon,
-    to: item.to,
-    target: item.target,
-    active:
-      item.to === "/"
-        ? route.path.length === 1
-        : route.path.startsWith(item.to),
-  }));
-});
-
-const accountHoverText = computed(() => {
-  return isLoggedIn.value || isGuestSession.value
-    ? `${user.value?.firstName} ${user.value?.lastName}`
-    : "Hallo";
-});
-
-const logoutHandler = () => {
-  logout();
-  toast.add({
-    title: "Tschüss!",
-    description: "Erfolreich abgemeldet.",
-    color: "success",
-  });
-};
-
-const loggedInDropDown = computed<DropdownMenuItem[][]>(() => {
-  if (!navigationData.value?.account.loggedIn) return [];
-
-  return navigationData.value.account.loggedIn
-    .map((group) =>
-      group
-        .filter((item) => {
-          if (isGuestSession.value) {
-            return item.type === "label" || item.action === "logout";
-          }
-          return true;
-        })
-        .map((item) => ({
-          label: item.type === "label" ? accountHoverText.value : item.label,
-          type: item.type,
-          icon: item.icon,
-          to: item.to,
-          onSelect: item.action === "logout" ? logoutHandler : undefined,
-        })),
-    )
-    .filter((group) => group.length > 0);
-});
-
-const loggedOutDropDown = computed<DropdownMenuItem[][]>(() => {
-  if (!navigationData.value?.account.loggedOut) return [];
-
-  return navigationData.value.account.loggedOut.map((group) =>
-    group.map((item) => ({
-      label: item.label,
-      type: item.type,
-      icon: item.icon,
-      to: item.to,
-    })),
-  );
-});
-
+const { navi } = useHeaderNavigation();
 const loginSlide = ref(false);
-const cartQuickViewOpen = ref(false);
 </script>
 
 <template>
   <UHeader>
     <template #title>
-      <NuxtLink to="/" class="-m-1.5 p-1.5">
-        <span class="sr-only">{{ siteName }}</span>
-        <UColorModeImage
-          light="/light/Logo.png"
-          dark="/dark/Logo.png"
-          class="h-12 w-auto"
-        />
-      </NuxtLink>
+      <HeaderTitle />
     </template>
 
     <UNavigationMenu color="primary" variant="pill" :items="navi" />
 
     <template #right>
-      <UButton
-        color="neutral"
-        variant="ghost"
-        to="tel:+49610471427"
-        target="_blank"
-        icon="i-lucide-phone"
-        aria-label="Anrufen"
-      />
-      <UDropdownMenu
-        :items="
-          isLoggedIn || isGuestSession ? loggedInDropDown : loggedOutDropDown
-        "
-      >
-        <UChip v-if="isLoggedIn || isGuestSession" size="3xl" text="✓">
-          <UButton icon="i-lucide-user" color="neutral" variant="outline" />
-        </UChip>
-        <UButton
-          v-else
-          icon="i-lucide-user"
-          color="neutral"
-          variant="outline"
-        />
-      </UDropdownMenu>
-      <UDrawer
-        v-if="isCheckoutEnabled"
-        v-model:open="cartQuickViewOpen"
-        title="Warenkorb"
-        direction="right"
-      >
-        <UChip :text="count" size="3xl">
-          <UButton
-            color="neutral"
-            variant="outline"
-            icon="i-lucide-shopping-cart"
-          />
-        </UChip>
-
-        <template #header>
-          <h2 class="text-3xl md:text-4xl mt-8 mb-3 pb-2">
-            <UIcon
-              name="i-lucide-shopping-cart"
-              class="size-8"
-              color="primary"
-            />
-            Warenkorb
-          </h2>
-        </template>
-        <template #body>
-          <CartQuickView
-            :with-to-cart-button="true"
-            class="md:min-w-90"
-            @go-to-cart="cartQuickViewOpen = false"
-          />
-        </template>
-      </UDrawer>
+      <HeaderRight />
     </template>
 
     <template #body>
-      <UNavigationMenu
-        color="primary"
-        :items="navi"
-        orientation="vertical"
-        class="-mx-2.5"
-      />
+      <HeaderBody />
     </template>
   </UHeader>
+
   <USlideover
     v-model:open="loginSlide"
     title="Konto"

package/app/components/Hero.vue

@@ -53,7 +53,7 @@ withDefaults(
             :key="index"
             as="button"
             :to="usp.link ?? ''"
-            class="flex items-center text-left gap-2"
+            class="flex flex-col md:flex-row items-center text-center md:text-left gap-2"
             target="_blank"
           >
             <UIcon

package/app/components/Product/Card.vue

@@ -16,6 +16,8 @@ const { getFormattedPrice } = usePrice({
   localeCode: "de-DE",
 });
 
+const price = ref(product.value.calculatedPrice.totalPrice);
+
 const isVegi = computed<boolean>(() => {
   if (!product.value?.properties) {
     return false;
@@ -47,6 +49,10 @@ const mainIngredients = computed<Schemas["PropertyGroupOption"][]>(() => {
   );
   return mainIngredientsProperty?.options ?? [];
 });
+
+function onVariantSelected(variant: Schemas["Product"]) {
+  price.value = variant.calculatedPrice.totalPrice;
+}
 </script>
 
 <template>
@@ -111,7 +117,7 @@ const mainIngredients = computed<Schemas["PropertyGroupOption"][]>(() => {
 
       <template #footer>
         <div class="flex flex-row justify-between content-center w-full">
-          <p>{{ getFormattedPrice(product.calculatedPrice.totalPrice) }}</p>
+          <p>{{ getFormattedPrice(price) }}</p>
           <div class="flex flex-row gap-2">
             <AddToWishlist v-if="withFavoriteButton" :product="product" />
             <UButton
@@ -127,6 +133,7 @@ const mainIngredients = computed<Schemas["PropertyGroupOption"][]>(() => {
             <ProductDetail2
               :product-id="product.id"
               @product-added="toggleDetails"
+              @variant-selected="onVariantSelected"
             />
           </template>
         </UCollapsible>

package/app/components/Product/Detail2.vue

@@ -114,6 +114,7 @@ watch(
 
 const onVariantSwitched = (variant: Schemas["Product"]) => {
   setSelectedProduct(variant);
+  emit("variant-selected", variant);
 };
 
 const onExtrasSelected = (extras: AssociationItemProduct[]) => {
@@ -126,7 +127,7 @@ const onIngredientsDeselected = (deselected: string[]) => {
 
 const onAddToCart = () => emit("product-added");
 
-const emit = defineEmits(["product-added"]);
+const emit = defineEmits(["product-added", "variant-selected"]);
 </script>
 
 <template>

package/app/components/SalesChannelSwitch.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { SelectMenuItem } from "@nuxt/ui";
+import type { Schemas } from "#shopware";
+
+const config = useRuntimeConfig();
+const isMultiChannel = computed(
+  () => !!config.public.shopBite.feature.multiChannel,
+);
+const storeUrl = computed(() => config.public.storeUrl);
+
+const { data: salesChannels, status } = await useFetch(
+  "/api/shopware/sales-channels",
+  {
+    key: "sales-channels",
+    transform: (data: Schemas["SalesChannel"][]) => {
+      const currentUrl = storeUrl.value;
+      return data?.map((channel) => {
+        const domains = channel.domains || [];
+        const matchingDomain =
+          currentUrl != null
+            ? domains.find((domain) => domain?.url === currentUrl)
+            : undefined;
+        const fallbackDomain = domains.find((domain) => !!domain?.url);
+        const domainUrl = matchingDomain?.url ?? fallbackDomain?.url ?? "";
+        return {
+          label: channel.translated.name ?? channel.name,
+          value: domainUrl,
+        };
+      });
+    },
+    lazy: true,
+  },
+);
+
+const selectedStore = ref<SelectMenuItem>();
+
+watchEffect(() => {
+  if (salesChannels.value && storeUrl.value && !selectedStore.value) {
+    const matchingChannel = salesChannels.value.find(
+      (channel) => channel.value === storeUrl.value,
+    );
+    if (matchingChannel) {
+      selectedStore.value = matchingChannel;
+    }
+  }
+});
+
+watch(selectedStore, (newStore, oldStore) => {
+  if (newStore && oldStore && newStore.value !== oldStore.value) {
+    window.location.href = newStore.value;
+  }
+});
+</script>
+
+<template>
+  <USelectMenu
+    v-if="isMultiChannel"
+    v-model="selectedStore"
+    :items="salesChannels"
+    :loading="status === 'pending'"
+    icon="i-lucide-store"
+  />
+</template>

package/app/composables/useAddToCart.ts

@@ -98,6 +98,8 @@ export function useAddToCart() {
         id: generatedUuid,
         quantity: selectedQuantity.value,
         type: LINE_ITEM_CONTAINER,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
         label: cartItemLabel.value,
         payload: {
           productNumber: selectedProduct.value.productNumber,

package/app/composables/useHeaderNavigation.ts

@@ -0,0 +1,29 @@
+import type { NavigationMenuItem } from "@nuxt/ui";
+
+export const useHeaderNavigation = () => {
+  const route = useRoute();
+
+  const { data: navigationData } = useAsyncData("header-navigation", () =>
+    queryCollection("navigation").first(),
+  );
+
+  const navi = computed<NavigationMenuItem[]>(() => {
+    if (!navigationData.value?.main) return [];
+
+    return navigationData.value.main.map((item) => ({
+      label: item.label,
+      icon: item.icon,
+      to: item.to,
+      target: item.target,
+      active:
+        item.to === "/"
+          ? route.path.length === 1
+          : route.path.startsWith(item.to),
+    }));
+  });
+
+  return {
+    navigationData,
+    navi,
+  };
+};

package/app/composables/useProductConfigurator.ts

@@ -73,6 +73,7 @@ export function useProductConfigurator() {
               "productNumber",
               "options",
               "properties",
+              "calculatedPrice",
             ],
             product_option: ["id", "groupId", "name", "translated", "group"],
             property: ["id", "name", "translated", "options"],

package/content/navigation.yml

@@ -1,11 +1,5 @@
 main:
-  - label: Start
-    icon: i-lucide-home
-    to: /
   - label: Speisekarte
-    icon: i-lucide-utensils
-    to: /speisekarte
-  - label: Speisekarte 2
     icon: i-lucide-utensils
     to: /c/Pizza/
   - label: Routenplaner

package/nuxt.config.ts

@@ -39,10 +39,19 @@ export default defineNuxtConfig({
   },
 
   runtimeConfig: {
-    shopware: {},
+    shopware: {
+      adminClientId: "",
+      adminClientSecret: "",
+      adminEndpoint: "",
+    },
     apiClientConfig: {},
     geoapifyApiKey: "",
     public: {
+      shopBite: {
+        feature: {
+          multiChannel: "",
+        },
+      },
       site: {
         name: "ShopBite",
         description: "Reduziere deine Kosten und steigere deinen Umsatz",

package/package.json

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

package/server/api/shopware/sales-channels.get.ts

@@ -0,0 +1,79 @@
+import type { operations } from "@shopware/api-client/admin-api-types";
+import { createAdminAPIClient } from "@shopware/api-client";
+
+export default defineEventHandler(async () => {
+  const config = useRuntimeConfig();
+
+  // Get admin API credentials from runtime config
+  const adminEndpoint = config.shopware.adminEndpoint;
+  const adminClientId = config.shopware.adminClientId;
+  const adminClientSecret = config.shopware.adminClientSecret;
+
+  if (!adminEndpoint || !adminClientId || !adminClientSecret) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Shopware admin API credentials not configured",
+    });
+  }
+
+  try {
+    const adminApiClient = createAdminAPIClient<operations>({
+      baseURL: adminEndpoint,
+      credentials: {
+        grant_type: "client_credentials",
+        client_id: adminClientId,
+        client_secret: adminClientSecret,
+      },
+    });
+
+    const data = await adminApiClient.invoke(
+      "searchSalesChannel post /search/sales-channel",
+      {
+        body: {
+          includes: {
+            sales_channel: ["id", "translated", "name", "domains", "active"],
+            sales_channel_domain: ["url"],
+          },
+          associations: {
+            domains: {},
+          },
+          filter: [
+            {
+              field: "active",
+              type: "equals",
+              value: true,
+            },
+          ],
+        },
+      },
+    );
+
+    // Validate response data
+    if (!data || !data.data) {
+      throw createError({
+        statusCode: 500,
+        statusMessage: "Invalid response from Shopware API",
+      });
+    }
+
+    return data.data.data;
+  } catch (error) {
+    // Handle specific error cases
+    if (error && typeof error === "object" && "statusCode" in error) {
+      // Re-throw createError instances
+      throw error;
+    }
+
+    // Log the error for debugging
+    console.error("Failed to fetch sales channels:", error);
+
+    // Return a user-friendly error
+    throw createError({
+      statusCode: 503,
+      statusMessage: "Failed to fetch sales channels from Shopware",
+      data: {
+        originalError: error instanceof Error ? error.message : String(error),
+      },
+    });
+  }
+});

package/server/utils/shopware/adminApiClient.ts

@@ -0,0 +1,24 @@
+import { createAdminAPIClient } from "@shopware/api-client";
+import type { operations } from "@shopware/api-client/admin-api-types";
+
+/**
+ * Creates a Shopware Admin API client
+ */
+export function createAdminApiClient(baseURL: string, accessToken: string) {
+  return createAdminAPIClient<operations>({
+    baseURL,
+    accessToken,
+  });
+}
+
+/**
+ * Fetches sales channels using the Admin API client
+ */
+export async function getSalesChannels(client: any) {
+  const response = await client.invoke({
+    method: "GET",
+    path: "/api/v3/sales-channel",
+  });
+
+  return response.data;
+}

package/test/nuxt/Header.test.ts

@@ -1,23 +1,17 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import { mockNuxtImport } from "@nuxt/test-utils/runtime";
+import { describe, it, expect, vi } from "vitest";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
 import Header from "~/components/Header.vue";
-import { ref, reactive, toRefs } from "vue";
+import { ref } from "vue";
 
-const mocks = vi.hoisted(() => ({
-  state: {
-    isLoggedIn: false,
-    isGuestSession: false,
-    user: null as any,
-  },
-  logout: vi.fn(),
+mockNuxtImport("useHeaderNavigation", () => () => ({
+  navi: ref([{ label: "Home", to: "/" }]),
 }));
 
-const reactiveState = reactive(mocks.state);
-
 mockNuxtImport("useUser", () => () => ({
-  ...toRefs(reactiveState),
-  logout: mocks.logout,
+  isLoggedIn: ref(false),
+  isGuestSession: ref(false),
+  user: ref(null),
+  logout: vi.fn(),
 }));
 
 mockNuxtImport("useShopBiteConfig", () => () => ({
@@ -28,97 +22,46 @@ mockNuxtImport("useCart", () => () => ({
   count: ref(0),
 }));
 
+mockNuxtImport("useToast", () => () => ({
+  add: vi.fn(),
+}));
+
 mockNuxtImport("useRuntimeConfig", () => () => ({
-  app: {
-    baseURL: "/",
-  },
-  public: {
-    site: {
-      name: "ShopBite",
-    },
-    shopware: {
-      devStorefrontUrl: "http://localhost:3000",
-    },
-  },
+  app: { baseURL: "/" },
+  public: { site: { name: "ShopBite" } },
 }));
 
 // Mock Nuxt Content queryCollection
 mockNuxtImport("queryCollection", () => (collection: string) => ({
   first: () =>
     Promise.resolve({
-      main: [],
       account: {
-        loggedIn: [
-          [{ label: "Mein Konto", type: "label" }],
-          [
-            { label: "Konto", icon: "i-lucide-user", to: "/konto" },
-            {
-              label: "Bestellungen",
-              icon: "i-lucide-pizza",
-              to: "/konto/bestellungen",
-            },
-          ],
-          [{ label: "Abmelden", icon: "i-lucide-log-out", action: "logout" }],
-        ],
-        loggedOut: [
-          [{ label: "Jetzt anmelden", type: "label" }],
-          [{ label: "Zur Anmeldung", icon: "i-lucide-user", to: "/anmelden" }],
-        ],
+        loggedIn: [],
+        loggedOut: [],
       },
     }),
 }));
 
 describe("Header", () => {
-  beforeEach(() => {
-    reactiveState.isLoggedIn = false;
-    reactiveState.isGuestSession = false;
-    reactiveState.user = null;
-    vi.clearAllMocks();
-  });
-
-  it("renders correctly when logged out", async () => {
+  it("renders structure correctly", async () => {
     const component = await mountSuspended(Header);
-    // Should show user icon
-    expect(component.html()).toContain("i-lucide:user");
-    // Should NOT show checkmark chip
-    expect(component.html()).not.toContain("✓");
-  });
 
-  it("renders correctly when logged in", async () => {
-    reactiveState.isLoggedIn = true;
-    reactiveState.user = { firstName: "John", lastName: "Doe" };
-    const component = await mountSuspended(Header);
+    const srOnlySiteName = component.find(".sr-only");
+    expect(srOnlySiteName.exists()).toBe(true);
+    expect(srOnlySiteName.text()).toBe("ShopBite");
+    expect(component.html()).toContain("i-lucide:phone");
+    expect(component.html()).toContain("i-lucide:shopping-cart");
 
-    // Should show checkmark chip
-    expect(component.html()).toContain("✓");
+    const navMenu = component.findComponent({ name: "UNavigationMenu" });
+    expect(navMenu.exists()).toBe(true);
   });
 
-  it("renders correctly for guest session", async () => {
-    reactiveState.isGuestSession = true;
-    reactiveState.user = { firstName: "Guest", lastName: "User" };
+  it("renders login slideover", async () => {
     const component = await mountSuspended(Header);
 
-    // Should show checkmark chip for guest session too
-    expect(component.html()).toContain("✓");
-  });
-
-  it("filters menu items for guest session", async () => {
-    reactiveState.isGuestSession = true;
-    reactiveState.user = { firstName: "Guest", lastName: "User" };
-    const component = await mountSuspended(Header);
-
-    // Find the dropdown menu
-    const dropdown = component.findComponent({ name: "UDropdownMenu" });
-    expect(dropdown.exists()).toBe(true);
-
-    const items = dropdown.props("items");
-
-    // Group 0 should have the user label
-    // Group 1 should be gone (filtered out because it only contained links)
-    // Group 2 (now index 1) should have logout
-    expect(items.length).toBe(2);
-    expect(items[0][0].label).toBe("Guest User");
-    expect(items[1][0].label).toBe("Abmelden");
-    expect(items[1][0].onSelect).toBeDefined();
+    // USlideover might not be directly in HTML if it uses teleport and is closed
+    const slideover = component.findComponent({ name: "USlideover" });
+    expect(slideover.exists()).toBe(true);
+    expect(slideover.props("title")).toBe("Konto");
   });
 });

package/test/nuxt/HeaderBody.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import HeaderBody from "~/components/Header/Body.vue";
+import { ref } from "vue";
+
+const mockNavi = [
+  { label: "Home", to: "/", icon: "i-lucide-home" },
+  { label: "Products", to: "/products", icon: "i-lucide-package" },
+];
+
+mockNuxtImport("useHeaderNavigation", () => () => ({
+  navi: ref(mockNavi),
+}));
+
+describe("HeaderBody", () => {
+  it("renders navigation menu with correct items", async () => {
+    const component = await mountSuspended(HeaderBody);
+    const navMenu = component.findComponent({ name: "UNavigationMenu" });
+
+    expect(navMenu.exists()).toBe(true);
+    expect(navMenu.props("items")).toEqual(mockNavi);
+    expect(navMenu.props("orientation")).toBe("vertical");
+  });
+
+  it("renders SalesChannelSwitch", async () => {
+    const component = await mountSuspended(HeaderBody);
+    const switchComponent = component.findComponent({
+      name: "SalesChannelSwitch",
+    });
+
+    expect(switchComponent.exists()).toBe(true);
+  });
+});

package/test/nuxt/HeaderRight.test.ts

@@ -0,0 +1,141 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import HeaderRight from "~/components/Header/Right.vue";
+import { ref, reactive, computed } from "vue";
+
+const mocks = vi.hoisted(() => ({
+  state: {
+    isLoggedIn: false,
+    isGuestSession: false,
+    user: null as any,
+  },
+  toastAddCalled: { value: false },
+}));
+
+const reactiveState = reactive(mocks.state);
+
+mockNuxtImport("useUser", () => () => ({
+  isLoggedIn: computed(() => reactiveState.isLoggedIn),
+  isGuestSession: computed(() => reactiveState.isGuestSession),
+  user: computed(() => reactiveState.user),
+  logout: () => {
+    reactiveState.isLoggedIn = false;
+    reactiveState.user = null;
+  },
+}));
+
+mockNuxtImport("useToast", () => () => ({
+  add: (payload: any) => {
+    if (typeof global !== "undefined" && (global as any).toastAddCalled) {
+      (global as any).toastAddCalled.value = true;
+    }
+  },
+}));
+
+mockNuxtImport("useShopBiteConfig", () => () => ({
+  isCheckoutEnabled: ref(true),
+}));
+
+mockNuxtImport("useCart", () => () => ({
+  count: ref(5),
+}));
+
+mockNuxtImport("useRuntimeConfig", () => () => ({
+  app: { baseURL: "/" },
+}));
+
+// Mock Nuxt Content queryCollection
+mockNuxtImport("queryCollection", () => (collection: string) => ({
+  first: () =>
+    Promise.resolve({
+      account: {
+        loggedIn: [
+          [{ label: "Mein Konto", type: "label" }],
+          [
+            {
+              label: "Bestellungen",
+              icon: "i-lucide-pizza",
+              to: "/konto/bestellungen",
+            },
+          ],
+          [{ label: "Abmelden", icon: "i-lucide-log-out", action: "logout" }],
+        ],
+        loggedOut: [
+          [{ label: "Jetzt anmelden", type: "label" }],
+          [{ label: "Zur Anmeldung", icon: "i-lucide-user", to: "/anmelden" }],
+        ],
+      },
+    }),
+}));
+
+describe("HeaderRight", () => {
+  beforeEach(() => {
+    reactiveState.isLoggedIn = false;
+    reactiveState.isGuestSession = false;
+    reactiveState.user = null;
+    mocks.toastAddCalled.value = false;
+    (global as any).toastAddCalled = mocks.toastAddCalled;
+    vi.clearAllMocks();
+  });
+
+  it("renders phone link", async () => {
+    const component = await mountSuspended(HeaderRight);
+    const phoneButton = component.find('a[href="tel:+49610471427"]');
+    expect(phoneButton.exists()).toBe(true);
+  });
+
+  it("shows logged out dropdown items when not logged in", async () => {
+    const component = await mountSuspended(HeaderRight);
+    const dropdown = component.findComponent({ name: "UDropdownMenu" });
+    const items = dropdown.props("items");
+
+    expect(items[0][0].label).toBe("Jetzt anmelden");
+    expect(items[1][0].to).toBe("/anmelden");
+  });
+
+  it("shows logged in dropdown items when logged in", async () => {
+    reactiveState.isLoggedIn = true;
+    reactiveState.user = { firstName: "Jane", lastName: "Doe" };
+
+    const component = await mountSuspended(HeaderRight);
+    const dropdown = component.findComponent({ name: "UDropdownMenu" });
+    const items = dropdown.props("items");
+
+    expect(items[0][0].label).toBe("Jane Doe");
+    expect(items[1][0].to).toBe("/konto/bestellungen");
+    expect(items[2][0].label).toBe("Abmelden");
+  });
+
+  it("shows cart drawer with correct count when checkout is enabled", async () => {
+    const component = await mountSuspended(HeaderRight);
+    const drawer = component.findComponent({ name: "UDrawer" });
+    expect(drawer.exists()).toBe(true);
+
+    const chip = component.findComponent({ name: "UChip" });
+    expect(chip.props("text")).toBe(5);
+  });
+
+  it("calls logout and updates state when logout is selected", async () => {
+    reactiveState.isLoggedIn = true;
+    const component = await mountSuspended(HeaderRight);
+    const dropdown = component.findComponent({ name: "UDropdownMenu" });
+    const items = dropdown.props("items");
+
+    // Find the item with logout handler
+    let logoutItem;
+    for (const group of items) {
+      for (const item of group) {
+        if (item.label === "Abmelden") {
+          logoutItem = item;
+          break;
+        }
+      }
+    }
+
+    expect(logoutItem).toBeDefined();
+    logoutItem.onSelect();
+
+    expect(reactiveState.isLoggedIn).toBe(false);
+    expect(mocks.toastAddCalled.value).toBe(true);
+  });
+});

package/test/nuxt/HeaderTitle.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect, vi } from "vitest";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import HeaderTitle from "~/components/Header/Title.vue";
+
+const { mockRuntimeConfig } = vi.hoisted(() => ({
+  mockRuntimeConfig: {
+    app: {
+      baseURL: "/",
+    },
+    public: {
+      site: {
+        name: "ShopBite Test Store",
+      },
+    },
+  },
+}));
+
+mockNuxtImport("useRuntimeConfig", () => () => mockRuntimeConfig);
+
+describe("HeaderTitle", () => {
+  it("renders the site name for screen readers", async () => {
+    const component = await mountSuspended(HeaderTitle);
+    const srOnly = component.find(".sr-only");
+    expect(srOnly.exists()).toBe(true);
+    expect(srOnly.text()).toBe("ShopBite Test Store");
+  });
+
+  it("renders a link to the home page", async () => {
+    const component = await mountSuspended(HeaderTitle);
+    const link = component.findComponent({ name: "NuxtLink" });
+    expect(link.exists()).toBe(true);
+    expect(link.props("to")).toBe("/");
+  });
+
+  it("renders the logo image", async () => {
+    const component = await mountSuspended(HeaderTitle);
+    const image = component.findComponent({ name: "UColorModeImage" });
+    expect(image.exists()).toBe(true);
+    expect(image.props("light")).toBe("/light/Logo.png");
+    expect(image.props("dark")).toBe("/dark/Logo.png");
+  });
+});

package/test/nuxt/SalesChannelSwitch.test.ts

@@ -0,0 +1,201 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import SalesChannelSwitch from "~/components/SalesChannelSwitch.vue";
+import { ref } from "vue";
+
+// Mock window.location
+const mockWindowLocation = {
+  href: "",
+};
+
+// Mock the sales channels data that would be returned by useFetch
+const mockSalesChannels = [
+  {
+    label: "Main Store",
+    value: "https://main-store.example.com",
+  },
+  {
+    label: "Secondary Store",
+    value: "https://secondary-store.example.com",
+  },
+];
+
+// Use vi.hoisted to avoid hoisting issues
+const { mockUseFetch, mockRuntimeConfig } = vi.hoisted(() => ({
+  mockUseFetch: vi.fn(() => {
+    return {
+      data: ref(mockSalesChannels),
+      status: ref("success"),
+    };
+  }),
+  mockRuntimeConfig: {
+    public: {
+      shopBite: {
+        feature: {
+          multiChannel: true,
+        },
+      },
+      storeUrl: "https://main-store.example.com",
+    },
+  },
+}));
+
+// Set up the mocks at the top level
+mockNuxtImport("useRuntimeConfig", () => () => mockRuntimeConfig);
+mockNuxtImport("useFetch", () => mockUseFetch);
+
+describe("SalesChannelSwitch", () => {
+  beforeEach(() => {
+    // Reset window.location mock
+    mockWindowLocation.href = "";
+    global.window = { location: mockWindowLocation } as any;
+    vi.clearAllMocks();
+
+    // Reset default mock implementation for useFetch
+    mockUseFetch.mockImplementation(() => {
+      return {
+        data: ref(mockSalesChannels),
+        status: ref("success"),
+      };
+    });
+  });
+
+  it("should not render when multiChannel feature is disabled", async () => {
+    // Temporarily disable multiChannel
+    mockRuntimeConfig.public.shopBite.feature.multiChannel = false;
+
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    // Should not render the select menu
+    expect(component.findComponent({ name: "USelectMenu" }).exists()).toBe(
+      false,
+    );
+
+    // Re-enable for other tests
+    mockRuntimeConfig.public.shopBite.feature.multiChannel = true;
+  });
+
+  it("should render select menu when multiChannel feature is enabled", async () => {
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    // Should render the select menu
+    const selectMenu = component.findComponent({ name: "USelectMenu" });
+    expect(selectMenu.exists()).toBe(true);
+    expect(selectMenu.props("icon")).toBe("i-lucide-store");
+  });
+
+  it("should load and transform sales channels correctly", async () => {
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    const selectMenu = component.findComponent({ name: "USelectMenu" });
+    const items = selectMenu.props("items");
+
+    expect(items).toHaveLength(2);
+    expect(items[0]).toEqual({
+      label: "Main Store",
+      value: "https://main-store.example.com",
+    });
+    expect(items[1]).toEqual({
+      label: "Secondary Store",
+      value: "https://secondary-store.example.com",
+    });
+  });
+
+  it("should select the current store URL by default", async () => {
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    const selectMenu = component.findComponent({ name: "USelectMenu" });
+    const modelValue = selectMenu.props("modelValue");
+
+    expect(modelValue).toEqual({
+      label: "Main Store",
+      value: "https://main-store.example.com",
+    });
+  });
+
+  it("should show loading state when fetching data", async () => {
+    // Mock pending state
+    mockUseFetch.mockImplementationOnce(() => {
+      return {
+        data: ref(null),
+        status: ref("pending"),
+      };
+    });
+
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    const selectMenu = component.findComponent({ name: "USelectMenu" });
+    expect(selectMenu.props("loading")).toBe(true);
+  });
+
+  it("should redirect to new store URL when selection changes", async () => {
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    const selectMenu = component.findComponent({ name: "USelectMenu" });
+
+    // Change the selection
+    await selectMenu.setValue({
+      label: "Secondary Store",
+      value: "https://secondary-store.example.com",
+    });
+
+    // Should have redirected
+    expect(mockWindowLocation.href).toBe("https://secondary-store.example.com");
+  });
+
+  it("should not redirect on initial selection", async () => {
+    // Mock that no initial selection was made
+    mockRuntimeConfig.public.storeUrl = "https://unknown-store.example.com";
+
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    // Should not redirect immediately
+    expect(mockWindowLocation.href).toBe("");
+
+    // Restore original store URL
+    mockRuntimeConfig.public.storeUrl = "https://main-store.example.com";
+  });
+
+  it("should handle empty sales channels gracefully", async () => {
+    // Mock empty sales channels
+    mockUseFetch.mockImplementationOnce(() => {
+      return {
+        data: ref([]),
+        status: ref("success"),
+      };
+    });
+
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    const selectMenu = component.findComponent({ name: "USelectMenu" });
+    const items = selectMenu.props("items");
+
+    expect(items).toHaveLength(0);
+  });
+
+  it("should handle sales channels without domains", async () => {
+    const mockChannelsWithoutDomains = [
+      {
+        label: "Store Without Domain",
+        value: "",
+      },
+    ];
+
+    mockUseFetch.mockImplementationOnce(() => {
+      return {
+        data: ref(mockChannelsWithoutDomains),
+        status: ref("success"),
+      };
+    });
+
+    const component = await mountSuspended(SalesChannelSwitch);
+
+    const selectMenu = component.findComponent({ name: "USelectMenu" });
+    const items = selectMenu.props("items");
+
+    expect(items[0]).toEqual({
+      label: "Store Without Domain",
+      value: "",
+    });
+  });
+});

package/test/unit/sales-channels.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import {
+  createAdminApiClient,
+  getSalesChannels,
+} from "../../server/utils/shopware/adminApiClient";
+
+describe("Shopware Admin API Client", () => {
+  describe("createAdminApiClient", () => {
+    it("should create a client with correct configuration", () => {
+      const endpoint = "https://shopware.example.com/api";
+      const accessToken = "test-token";
+
+      const client = createAdminApiClient(endpoint, accessToken);
+
+      expect(client).toBeDefined();
+      // The client should have the invoke method
+      expect(client).toHaveProperty("invoke");
+      expect(typeof client.invoke).toBe("function");
+    });
+  });
+
+  describe("getSalesChannels", () => {
+    it("should fetch sales channels successfully", async () => {
+      // Mock the client
+      const mockClient = {
+        invoke: vi.fn().mockResolvedValue({
+          data: [
+            { id: "1", name: "Storefront", typeId: "storefront" },
+            { id: "2", name: "Headless", typeId: "headless" },
+          ],
+        }),
+      };
+
+      const result = await getSalesChannels(mockClient);
+
+      expect(result).toEqual([
+        { id: "1", name: "Storefront", typeId: "storefront" },
+        { id: "2", name: "Headless", typeId: "headless" },
+      ]);
+
+      expect(mockClient.invoke).toHaveBeenCalledWith({
+        method: "GET",
+        path: "/api/v3/sales-channel",
+      });
+    });
+
+    it("should handle errors when fetching sales channels", async () => {
+      const mockClient = {
+        invoke: vi.fn().mockRejectedValue(new Error("API error")),
+      };
+
+      await expect(getSalesChannels(mockClient)).rejects.toThrow("API error");
+    });
+
+    it("should handle empty response gracefully", async () => {
+      const mockClient = {
+        invoke: vi.fn().mockResolvedValue({
+          data: [],
+        }),
+      };
+
+      const result = await getSalesChannels(mockClient);
+      expect(result).toEqual([]);
+    });
+  });
+});