@shopbite-de/storefront 1.6.2 → 1.7.1

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,126 @@
+<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
+        aria-label="Konto Dropdown öffnen"
+        icon="i-lucide-user"
+        color="neutral"
+        variant="outline"
+      />
+    </UChip>
+    <UButton
+      v-else
+      aria-label="Konto Dropdown öffnen"
+      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
+        aria-label="Zum Warenkorb"
+        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,16 @@
+<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
+      alt="Logo"
+      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

@@ -22,18 +22,30 @@ withDefaults(
     usps: () => [],
   },
 );
+
+const videoRef = ref<HTMLVideoElement>();
+
+onMounted(() => {
+  // Handle video playback on bfcache restore
+  window.addEventListener("pageshow", (event) => {
+    if (event.persisted && videoRef.value) {
+      videoRef.value.play();
+    }
+  });
+});
 </script>
 
 <template>
   <div class="relative">
     <video
+      ref="videoRef"
       autoplay
       loop
       muted
       playsinline
       class="absolute inset-0 w-full h-full object-cover -z-10"
     >
-      <source :src="backgroundVideo" type="video/mp4" >
+      <source fetchpriority="high" :src="backgroundVideo" type="video/mp4" >
     </video>
     <div class="bg-black/50 backdrop-blur-sm">
       <UPageHero
@@ -53,7 +65,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/ImageGallery.vue

@@ -27,7 +27,7 @@ defineProps<{
   >
     <template #body>
       <UCarousel
-        v-slot="{ item }"
+        v-slot="{ item, index }"
         :items="images"
         class="mx-auto w-full"
         auto-height
@@ -35,6 +35,9 @@ defineProps<{
         loop
       >
         <img
+          v-if="item"
+          :loading="index === 0 ? 'eager' : 'lazy'"
+          :fetchpriority="index === 0 ? 'high' : 'low'"
           :src="item.image"
           :alt="item.alt"
           class="rounded-lg w-full max-h-screen object-contain"

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

@@ -5,7 +5,7 @@ seo:
 title: ShopBite
 description: Reduziere Kosten und steigere deinen Umsatz
 hero:
-  backgroundVideo: https://shopware.shopbite.de/media/10/59/96/1762465181/background.mp4
+  backgroundVideo: https://shopware.shopbite.de/media/10/59/96/1762465181/background.mp4?ts=1762465194
   headline: SHOPBITE
   usps:
     - title: 4.5 ⭐
@@ -68,20 +68,19 @@ gallery:
       variant: subtle
       trailingIcon: i-lucide-phone
   images:
-    - image: https://shopware.shopbite.de/media/71/2a/1a/1762465670/restaurant1.webp
+    - image: https://shopware.shopbite.de/media/71/2a/1a/1762465670/restaurant1.webp?ts=1762465670
       alt: La Fattoria Restaurant Innenbereich 1
-    - image: https://shopware.shopbite.de/media/61/ea/77/1762465670/restaurant2.webp
+    - image: https://shopware.shopbite.de/media/61/ea/77/1762465670/restaurant2.webp?ts=1762465670
       alt: La Fattoria Restaurant Innenbereich 2
-    - image: https://shopware.shopbite.de/media/6d/ac/ca/1762465670/restaurant3.webp
+    - image: https://shopware.shopbite.de/media/6d/ac/ca/1762465670/restaurant3.webp?ts=1762465670
       alt: La Fattoria Restaurant Innenbereich 3
-    - image: https://shopware.shopbite.de/media/af/d6/da/1762465670/restaurant4.webp
+    - image: https://shopware.shopbite.de/media/af/d6/da/1762465670/restaurant4.webp?ts=1762465670
       alt: La Fattoria Restaurant Innenbereich 4
-    - image: https://shopware.shopbite.de/media/6a/ff/e2/1762465670/restaurant5.webp
+    - image: https://shopware.shopbite.de/media/6a/ff/e2/1762465670/restaurant5.webp?ts=1762465670
       alt: La Fattoria Restaurant Innenbereich 5
-    - image: https://shopware.shopbite.de/media/80/76/d0/1762465670/restaurant6.webp
+    - image: https://shopware.shopbite.de/media/80/76/d0/1762465670/restaurant6.webp?ts=1762465670
       alt: La Fattoria Restaurant Innenbereich 6
-    - image: https://nbg1.your-objectstorage.com/lafattoria-public/media/30/f7/76/1763383122/restaurant10.webp
-      alt: La Fattoria Restaurant Innenbereich 10
+
 cta:
   title: Jetzt bestellen!
   description: Genieße die italienische Küche, frisch zubereitet und direkt zu dir geliefert oder vor Ort genießen.

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",
@@ -82,6 +91,7 @@ export default defineNuxtConfig({
     "@nuxt/ui",
     "@nuxt/scripts",
     "@nuxtjs/plausible",
+    "nuxt-vitalizer",
   ],
 
   plausible: {
@@ -92,6 +102,10 @@ export default defineNuxtConfig({
     experimental: { sqliteConnector: "native" },
   },
 
+  vitalizer: {
+    disablePrefetchLinks: true,
+  },
+
   pwa: {
     manifest: {
       name: "ShopBite",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.6.2",
+  "version": "1.7.1",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [
@@ -35,6 +35,7 @@
     "@vueuse/core": "^14.0.0",
     "dotenv": "^17.2.3",
     "nuxt": "^4.2.1",
+    "nuxt-vitalizer": "2.0.0",
     "uuid": "^13.0.0"
   },
   "devDependencies": {

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