@shopbite-de/storefront 1.18.0 → 1.18.2

package/app/app.vue

@@ -7,11 +7,11 @@ const TOAST_CONFIG = {
     title: "Wir haben geöffnet!",
     color: "primary" as const,
     progress: false,
-    duration: 0,
+    duration: 5000,
     icon: "i-lucide-party-popper",
     actions: [
       {
-        icon: "i-lucide-pizza",
+        icon: "i-lucide-utensils-crossed",
         label: "Zur Speisekarte",
         color: "neutral" as const,
         variant: "outline" as const,

package/app/components/Cart/Item.vue

@@ -64,7 +64,7 @@ const handleRemoveItem = () => {
                 ? cartItem?.children?.[0]?.payload?.options
                 : cartItem?.payload?.options"
               :key="option.group + option.option"
-              class="text-sm text-pretty text-toned mt-1"
+              class="text-sm text-pretty text-muted mt-1"
             >
               {{ option.group }}: {{ option.option }}
             </p>
@@ -84,14 +84,14 @@ const handleRemoveItem = () => {
           :min="1"
           :max="100"
           class="max-w-46"
-          aria-label="Item quantity"
+          aria-label="Menge"
         />
         <UButton
           v-if="withDeleteButton"
           icon="i-lucide-trash"
           variant="soft"
           color="neutral"
-          aria-label="Remove item from cart"
+          aria-label="Artikel entfernen"
           @click="handleRemoveItem"
         />
       </div>
@@ -101,14 +101,14 @@ const handleRemoveItem = () => {
         icon="i-lucide-trash"
         variant="outline"
         color="error"
-        aria-label="Remove item from cart"
+        aria-label="Artikel entfernen"
         @click="handleRemoveItem"
       />
     </div>
 
     <!-- Empty state -->
     <div v-else class="text-center py-4">
-      <p class="text-toned">Warenkorb ist leer...</p>
+      <p class="text-muted">Warenkorb ist leer...</p>
     </div>
   </div>
 </template>

package/app/components/Category/Listing.vue

@@ -46,12 +46,14 @@ const {
   loading,
   search,
   getElements,
+  getCurrentListing,
   getCurrentSortingOrder,
   getSortingOrders,
   changeCurrentSortingOrder,
   getAvailableFilters,
   getCurrentFilters,
   setCurrentFilters,
+  setInitialListing,
 } = useListing({
   listingType: "categoryListing",
   categoryId: props.id,
@@ -85,9 +87,27 @@ const selectedListingFilters = computed<ShortcutFilterParam[]>(() => {
   ];
 });
 
-await useAsyncData(`listing${categoryId.value}`, async () => {
-  await search(searchCriteria);
-});
+const nuxtApp = useNuxtApp();
+const { data: listingPayload, pending } = await useAsyncData(
+  `listing${categoryId.value}`,
+  async () => {
+    await search(searchCriteria);
+    // Return the result so it gets serialized into the SSR payload.
+    // On the client, useAsyncData will restore this without re-running search().
+    return getCurrentListing.value;
+  },
+);
+
+// Populate useListing state from the SSR payload on the client.
+// useListing uses plain refs (not useState), so its state is not automatically
+// hydrated — we restore it via setInitialListing.
+if (listingPayload.value) {
+  await setInitialListing(listingPayload.value);
+}
+
+// During SSR hydration, pending may briefly be true before the payload cache is applied.
+// Suppress the skeleton in that window to prevent a hydration mismatch.
+const showSkeleton = computed(() => pending.value && !nuxtApp.isHydrating);
 
 watch(selectedListingFilters, (newFilters, oldFilters) => {
   if (newFilters[0]?.value === oldFilters?.[0]?.value) {
@@ -196,9 +216,20 @@ const moreThanOneFilterAndOption = computed<boolean>(
             </UDrawer>
           </div>
 
-          <Loading v-if="loading" text="Produkte werden geladen..." size="lg" />
+          <div
+            v-if="showSkeleton"
+            class="flex flex-col gap-4"
+            aria-busy="true"
+            aria-label="Produkte werden geladen"
+          >
+            <LazyProductCardSkeleton v-for="i in 6" :key="i" />
+          </div>
 
-          <div v-else class="flex flex-col gap-4">
+          <div
+            v-else
+            class="flex flex-col gap-4 transition-opacity duration-200"
+            :class="{ 'opacity-40 pointer-events-none': loading }"
+          >
             <ProductCard
               v-for="product in getElements"
               :key="product.id"

package/app/components/Checkout/DeliveryTimeSelect.vue

@@ -136,24 +136,26 @@ function handleTimeInput(event: Event): void {
 <template>
   <div v-if="isClosedHoliday(now) === false" class="flex flex-col gap-2 mt-4">
     <div class="flex flex-row items-center justify-between gap-4">
-      <div>Wunschlieferung- oder Abholzeit ab:</div>
+      <label for="delivery-time" class="flex-1">
+        Wunschlieferung- oder Abholzeit ab:
+      </label>
       <client-only>
-        <input
+        <UInput
+          id="delivery-time"
           type="time"
           :min="minTime ?? undefined"
           :max="maxTime ?? undefined"
           :disabled="isClosedToday || isClosedHoliday(now) === true"
-          :value="selected"
+          :model-value="selected"
           step="300"
-          class="border rounded px-2 py-1"
           @input="handleTimeInput"
         />
       </client-only>
     </div>
-    <p v-if="validationError" class="text-sm text-red-600">
+    <p v-if="validationError" class="text-sm text-error">
       {{ validationError }}
     </p>
-    <p v-else class="text-sm text-gray-500">{{ helperText }}</p>
+    <p v-else class="text-sm text-muted">{{ helperText }}</p>
     <UBadge
       :label="deliveryTimeInfo"
       icon="i-lucide-clock"

package/app/components/Checkout/PaymentAndDelivery.vue

@@ -82,42 +82,40 @@ watch(
 </script>
 
 <template>
-  <UContainer>
-    <div class="flex flex-col md:flex-row justify-between gap-4">
-      <div class="basis-1/2">
-        <div class="flex flex-row items-center gap-4">
-          <UIcon name="i-lucide-badge-euro" class="size-8" />
-          <h2 class="text-2xl text-blackish my-8">Zahlungsarten</h2>
-          <UButton
-            to="/zahlung-und-versand"
-            size="md"
-            variant="ghost"
-            icon="i-lucide-circle-question-mark"
-          />
-        </div>
-        <URadioGroup
-          v-model="selectedPaymentMethodId"
-          :items="selectablePaymentMethods"
-          variant="card"
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+    <div class="flex flex-col gap-4">
+      <div class="flex items-center gap-2">
+        <UIcon name="i-lucide-badge-euro" class="size-5 text-muted" />
+        <h2 class="text-lg font-semibold">Zahlungsarten</h2>
+        <UButton
+          to="/zahlung-und-versand"
+          size="sm"
+          variant="ghost"
+          icon="i-lucide-circle-help"
         />
       </div>
-      <div class="basis-1/2">
-        <div class="flex flex-row items-center gap-4">
-          <UIcon name="i-lucide-car" class="size-8" />
-          <h2 class="text-2xl text-blackish my-8">Versandarten</h2>
-          <UButton
-            to="/zahlung-und-versand"
-            size="md"
-            variant="ghost"
-            icon="i-lucide-circle-question-mark"
-          />
-        </div>
-        <URadioGroup
-          v-model="selectedShippingMethodId"
-          :items="selectableShippingMethods"
-          variant="card"
+      <URadioGroup
+        v-model="selectedPaymentMethodId"
+        :items="selectablePaymentMethods"
+        variant="card"
+      />
+    </div>
+    <div class="flex flex-col gap-4">
+      <div class="flex items-center gap-2">
+        <UIcon name="i-lucide-car" class="size-5 text-muted" />
+        <h2 class="text-lg font-semibold">Versandarten</h2>
+        <UButton
+          to="/zahlung-und-versand"
+          size="sm"
+          variant="ghost"
+          icon="i-lucide-circle-help"
         />
       </div>
+      <URadioGroup
+        v-model="selectedShippingMethodId"
+        :items="selectableShippingMethods"
+        variant="card"
+      />
     </div>
-  </UContainer>
+  </div>
 </template>

package/app/components/Checkout/PaymentMethod.vue

@@ -22,7 +22,7 @@ const { paymentMethod } = toRefs(props);
       <h3 class="text-base text-pretty font-semibold text-highlighted">
         Zahlart
       </h3>
-      <p class="text-[15px] text-pretty text-toned mt-1">
+      <p class="text-[15px] text-pretty text-muted mt-1">
         {{ paymentMethod.distinguishableName }}
       </p>
     </div>

package/app/components/Checkout/ShippingMethod.vue

@@ -22,7 +22,7 @@ const { shippingMethod } = toRefs(props);
       <h3 class="text-base text-pretty font-semibold text-highlighted">
         Versandart
       </h3>
-      <p class="text-[15px] text-pretty text-toned mt-1">
+      <p class="text-[15px] text-pretty text-muted mt-1">
         {{ shippingMethod.name }}
       </p>
     </div>

package/app/components/Checkout/Summary.vue

@@ -23,8 +23,6 @@ onMounted(() => {
   });
 });
 
-watch(isCheckoutEnabled, () => console.log(isCheckoutEnabled.value));
-
 useIntervalFn(refresh, 10000);
 
 async function handleCreateOrder() {
@@ -63,10 +61,6 @@ const isValidToProceed = computed(
 const selectedDeliveryTime = ref("");
 const isValidTime = ref(true);
 
-watch(selectedDeliveryTime, (newValue) => {
-  console.log(newValue);
-});
-
 const checkoutButtonLabel = computed<string>(() => {
   if (!customerDataAvailable.value) {
     return "Bitte einloggen oder Kundendaten erfassen";
@@ -85,52 +79,47 @@ const checkoutButtonLabel = computed<string>(() => {
 </script>
 
 <template>
-  <UContainer class="my-16">
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-8 py-8">
+    <div class="flex flex-col gap-6">
       <div class="flex flex-col gap-4">
-        <h3 class="text-xl font-bold">Kundendaten</h3>
+        <h3 class="text-lg font-semibold">Kundendaten</h3>
         <UserDetail v-if="customerDataAvailable" />
-        <div v-else>Bitte vorher einloggen oder Kundendaten erfassen</div>
-        <div class="flex flex-col gap-4">
-          <h3 class="text-xl font-bold">Versand- und Zahlung</h3>
-          <CheckoutPaymentMethod :payment-method="selectedPaymentMethod" />
-          <CheckoutShippingMethod :shipping-method="selectedShippingMethod" />
-          <CheckoutDeliveryTimeSelect
-            v-model:valid="isValidTime"
-            v-model="selectedDeliveryTime"
-          />
-        </div>
+        <p v-else class="text-muted">
+          Bitte vorher einloggen oder Kundendaten erfassen
+        </p>
       </div>
       <div class="flex flex-col gap-4">
-        <h3 class="text-xl font-bold">Warenkorb</h3>
-        <div class="rounded-lg flex flex-col gap-4">
-          <QuickView
-            :with-quantity-input="false"
-            :with-delete-button="false"
-            class="p-6 bg-elevated"
-          />
-          <CheckoutVoucherInput />
-          <UButton
-            :icon="
-              isValidToProceed ? 'i-lucide-shopping-cart' : 'i-lucide-lock'
-            "
-            :disabled="!isValidToProceed"
-            :label="checkoutButtonLabel"
-            size="xl"
-            block
-            @click="handleCreateOrder"
-          />
-          <p class="font-light text-muted">
-            Mit Klick auf den Button "Jetzt bestellen!" erklärst du dich mit
-            unseren
-            <ULink to="/agb" class="text-primary font-medium">AGB</ULink> und
-            <ULink to="/datenschutz" class="text-primary font-medium"
-              >Datenschutzbestimmungen</ULink
-            >
-            einverstanden.
-          </p>
-        </div>
+        <h3 class="text-lg font-semibold">Versand & Zahlung</h3>
+        <CheckoutPaymentMethod :payment-method="selectedPaymentMethod" />
+        <CheckoutShippingMethod :shipping-method="selectedShippingMethod" />
+        <CheckoutDeliveryTimeSelect
+          v-model:valid="isValidTime"
+          v-model="selectedDeliveryTime"
+        />
       </div>
     </div>
-  </UContainer>
+    <div class="flex flex-col gap-4">
+      <h3 class="text-lg font-semibold">Warenkorb</h3>
+      <UCard>
+        <QuickView :with-quantity-input="false" :with-delete-button="false" />
+      </UCard>
+      <CheckoutVoucherInput />
+      <UButton
+        :icon="isValidToProceed ? 'i-lucide-shopping-cart' : 'i-lucide-lock'"
+        :disabled="!isValidToProceed"
+        :label="checkoutButtonLabel"
+        size="xl"
+        block
+        @click="handleCreateOrder"
+      />
+      <p class="text-sm text-muted">
+        Mit Klick auf "Jetzt bestellen!" erklärst du dich mit unseren
+        <ULink to="/agb" class="text-primary font-medium">AGB</ULink> und
+        <ULink to="/datenschutz" class="text-primary font-medium"
+          >Datenschutzbestimmungen</ULink
+        >
+        einverstanden.
+      </p>
+    </div>
+  </div>
 </template>

package/app/components/Header/Body.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
-import { useNavigation } from "~/composables/useNavigation";
+import { useUser } from "@shopware/composables";
 
-const config = useRuntimeConfig();
+const { mainMenu } = useNavigation(false);
+const multiChannelEnabled =
+  useRuntimeConfig().public.shopBite.feature.multiChannel;
 
-const multiChannelEnabled = computed(
-  () => config.public.shopBite.feature.multiChannel === "true",
-);
+const { isLoggedIn, isGuestSession, logout } = useUser();
+const toast = useToast();
 
-console.log(multiChannelEnabled.value);
-const { mainMenu } = useNavigation(false);
+const logoutHandler = () => {
+  logout();
+  toast.add({
+    title: "Tschüss!",
+    description: "Erfolgreich abgemeldet.",
+    color: "success",
+  });
+};
 </script>
 
 <template>
@@ -18,7 +25,58 @@ const { mainMenu } = useNavigation(false);
     orientation="vertical"
     class="-mx-2.5"
   />
-  <div v-if="multiChannelEnabled" class="my-4">
+
+  <USeparator class="my-4" />
+
+  <div class="flex flex-col gap-1">
+    <template v-if="isLoggedIn || isGuestSession">
+      <UButton
+        color="neutral"
+        variant="ghost"
+        to="/konto"
+        icon="i-lucide-user"
+        label="Mein Konto"
+        class="justify-start"
+      />
+      <UButton
+        color="neutral"
+        variant="ghost"
+        to="/konto/bestellungen"
+        icon="i-lucide-pizza"
+        label="Bestellungen"
+        class="justify-start"
+      />
+      <UButton
+        color="neutral"
+        variant="ghost"
+        icon="i-lucide-log-out"
+        label="Abmelden"
+        class="justify-start"
+        @click="logoutHandler"
+      />
+    </template>
+    <template v-else>
+      <UButton
+        color="neutral"
+        variant="ghost"
+        to="/anmelden"
+        icon="i-lucide-user"
+        label="Anmelden"
+        class="justify-start"
+      />
+      <UButton
+        color="neutral"
+        variant="ghost"
+        to="/registrierung"
+        icon="i-lucide-user-plus"
+        label="Registrieren"
+        class="justify-start"
+      />
+    </template>
+  </div>
+
+  <div v-if="multiChannelEnabled" class="mt-4">
+    <USeparator class="mb-4" />
     <SalesChannelSwitch />
   </div>
 </template>

package/app/components/Header/Right.vue

@@ -134,7 +134,7 @@ const dropDownMenu = computed<DropdownMenuItem[][]>(() => {
       </div>
     </template>
     <template #body>
-      <CartQuickView
+      <LazyCartQuickView
         :with-to-cart-button="true"
         class="md:min-w-90"
         @go-to-cart="cartQuickViewOpen = false"

package/app/components/Header/Title.vue

@@ -1,16 +1,9 @@
-<script setup lang="ts">
-const config = useRuntimeConfig();
-const siteName = computed(() => config.public.site.name);
-</script>
-
+<script setup lang="ts"></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>
+  <UColorModeImage
+    alt="Logo"
+    light="/light/Logo.png"
+    dark="/dark/Logo.png"
+    width="150"
+  />
 </template>

package/app/components/Header.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { useNavigation } from "~/composables/useNavigation";
-
 const { mainMenu } = useNavigation(false);
-
 const loginSlide = ref(false);
 </script>
 
@@ -13,13 +10,14 @@ const loginSlide = ref(false);
     </template>
 
     <UNavigationMenu color="primary" variant="pill" :items="mainMenu" />
+    <SalesChannelSwitch />
 
     <template #right>
       <HeaderRight />
     </template>
 
     <template #body>
-      <HeaderBody />
+      <LazyHeaderBody />
     </template>
   </UHeader>
 
@@ -30,7 +28,7 @@ const loginSlide = ref(false);
   >
     <template #body>
       <div class="h-full m-4">
-        <UserLoginForm />
+        <LazyUserLoginForm />
       </div>
     </template>
   </USlideover>

package/app/components/Product/Card.vue

@@ -81,7 +81,7 @@ function onVariantSelected(variant: Schemas["Product"]) {
       :ui="{ footer: 'w-full', root: 'shadow-lg' }"
     >
       <template #header>
-        <UBadge
+        <LazyUBadge
           v-if="isVegi"
           icon="i-lucide-leaf"
           color="success"
@@ -92,7 +92,7 @@ function onVariantSelected(variant: Schemas["Product"]) {
       </template>
 
       <div v-if="product.cover?.media?.url">
-        <NuxtImg
+        <LazyNuxtImg
           :src="product.cover.media.url"
           class="rounded-md h-auto max-w-full object-contain ransition-opacity duration-700"
           sizes="(min-width: 1024px) 50vw, 100vw"
@@ -138,15 +138,17 @@ function onVariantSelected(variant: Schemas["Product"]) {
             />
           </div>
         </div>
-        <UCollapsible v-model:open="openDetails" class="flex flex-col gap-2">
-          <template #content>
-            <ProductDetail2
-              :product-id="product.id"
-              @product-added="toggleDetails"
-              @variant-selected="onVariantSelected"
-            />
-          </template>
-        </UCollapsible>
+        <ClientOnly>
+          <UCollapsible v-model:open="openDetails" class="flex flex-col gap-2">
+            <template #content>
+              <LazyProductDetail
+                :product-id="product.id"
+                @product-added="toggleDetails"
+                @variant-selected="onVariantSelected"
+              />
+            </template>
+          </UCollapsible>
+        </ClientOnly>
       </template>
     </UPageCard>
   </AnimatedSection>

package/app/components/Product/CardSkeleton.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="ring-1 ring-accented rounded-xl shadow-lg p-4 flex flex-row gap-4"
+  >
+    <div class="flex flex-col gap-3 flex-1 min-w-0">
+      <USkeleton class="h-5 w-20 rounded-full" />
+      <div class="flex items-baseline gap-2">
+        <USkeleton class="h-3.5 w-7" />
+        <USkeleton class="h-3.5 w-36" />
+      </div>
+      <div class="flex flex-col gap-2">
+        <USkeleton class="h-3 w-full" />
+        <USkeleton class="h-3 w-5/6" />
+        <USkeleton class="h-3 w-1/2" />
+      </div>
+      <div class="flex justify-between items-center mt-auto pt-2">
+        <USkeleton class="h-4 w-14" />
+        <div class="flex gap-2">
+          <USkeleton class="h-8 w-8 rounded-md" />
+          <USkeleton class="h-8 w-8 rounded-md" />
+        </div>
+      </div>
+    </div>
+    <USkeleton class="size-28 rounded-md shrink-0" />
+  </div>
+</template>

package/app/components/Product/{Detail2.vue → Detail.vue}

@@ -142,7 +142,7 @@ watch(productDetails, () => {
 <template>
   <div v-if="!pending">
     <div v-if="productDetails?.configurator">
-      <ProductConfigurator2
+      <ProductConfigurator
         v-if="productDetails?.configurator"
         :p="productDetails.product"
         :c="productDetails.configurator"

package/app/components/SalesChannelSwitch.vue

@@ -8,9 +8,7 @@ const { apiClient } = useShopwareContext();
 
 const config = useRuntimeConfig();
 
-const isMultiChannel = computed(
-  () => config.public.shopBite.feature.multiChannel === "true",
-);
+const isMultiChannel = useRuntimeConfig().public.shopBite.feature.multiChannel;
 
 const storeUrl = computed(() => config.public.storeUrl);
 

package/app/components/User/Detail.vue

@@ -47,7 +47,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="shadow-md rounded-md mb-4 p-6 bg-elevated">
+  <UCard class="mb-4">
     <div>{{ fullName }}</div>
     <div>{{ user?.email }}</div>
     <USeparator
@@ -76,5 +76,5 @@ onMounted(() => {
       :with-edit-button="withEditButton"
       @update:address="handleAddressUpdate"
     />
-  </div>
+  </UCard>
 </template>

package/app/pages/bestellung/bestaetigen.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { isLoggedIn, isGuestSession } = useUser();
+const { setStep } = useCheckoutStore();
+
+if (!isLoggedIn.value && !isGuestSession.value) {
+  await navigateTo("/bestellung/warenkorb");
+}
+
+setStep(2);
+</script>
+
+<template>
+  <CheckoutSummary />
+</template>

package/app/pages/bestellung/warenkorb.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import LoginOrRegister from "~/components/Checkout/LoginOrRegister.vue";
+
+const { isLoggedIn, isGuestSession } = useUser();
+const { isEmpty } = useCart();
+const { setStep } = useCheckoutStore();
+
+setStep(0);
+
+const isCustomerAvailable = computed<boolean>(() => {
+  return isLoggedIn.value || isGuestSession.value;
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 py-8">
+    <div class="flex flex-col gap-4">
+      <h2 class="text-lg font-semibold">
+        {{ isCustomerAvailable ? "Deine Daten" : "Anmelden oder registrieren" }}
+      </h2>
+      <LoginOrRegister v-if="!isLoggedIn && !isGuestSession" />
+      <UserDetail v-else :with-edit-button="true" />
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <h2 class="text-lg font-semibold">Warenkorb</h2>
+      <UCard>
+        <CartQuickView />
+      </UCard>
+      <UButton
+        v-if="!isEmpty && isCustomerAvailable"
+        label="Zahlungs- und Versandart auswählen"
+        size="xl"
+        block
+        trailing-icon="i-lucide-arrow-right"
+        to="/bestellung/zahlung-versand"
+      />
+      <UButton
+        v-if="isEmpty"
+        label="Zur Speisekarte"
+        size="xl"
+        block
+        variant="outline"
+        icon="i-lucide-arrow-left"
+        to="/speisekarte"
+      />
+    </div>
+  </div>
+</template>

package/app/pages/bestellung/zahlung-versand.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { isLoggedIn, isGuestSession } = useUser();
+const { setStep } = useCheckoutStore();
+
+if (!isLoggedIn.value && !isGuestSession.value) {
+  await navigateTo("/bestellung/warenkorb");
+}
+
+setStep(1);
+</script>
+
+<template>
+  <div class="flex flex-col gap-8 py-8">
+    <CheckoutPaymentAndDelivery />
+    <UButton
+      label="Weiter zu Prüfen & Bestellen"
+      trailing-icon="i-lucide-arrow-right"
+      size="xl"
+      block
+      to="/bestellung/bestaetigen"
+    />
+  </div>
+</template>

package/app/pages/bestellung.vue

@@ -1,95 +1,47 @@
 <script setup lang="ts">
-import LoginOrRegister from "~/components/Checkout/LoginOrRegister.vue";
 import type { StepperItem } from "@nuxt/ui";
 
-const { isLoggedIn, isGuestSession } = useUser();
-const { isEmpty } = useCart();
+const checkoutStore = useCheckoutStore();
+const { step } = storeToRefs(checkoutStore);
 
-const items = [
-  {
-    slot: "user" as const,
-    title: "Deine Daten",
-    icon: "i-lucide-user",
-  },
-  {
-    slot: "shipping" as const,
-    title: "Zahlung & Versand",
-    icon: "i-lucide-truck",
-  },
-  {
-    slot: "checkout" as const,
-    title: "Prüfen & Bestellen",
-    icon: "i-lucide-check",
-  },
-] satisfies StepperItem[];
+const stepRoutes = [
+  "/bestellung/warenkorb",
+  "/bestellung/zahlung-versand",
+  "/bestellung/bestaetigen",
+] as const;
 
-const activeStep = ref(0);
+const items = computed(
+  () =>
+    [
+      {
+        title: "Warenkorb",
+        icon: "i-lucide-shopping-cart",
+        disabled: false,
+      },
+      {
+        title: "Zahlung & Versand",
+        icon: "i-lucide-truck",
+        disabled: step.value < 1,
+      },
+      {
+        title: "Prüfen & Bestellen",
+        icon: "i-lucide-check",
+        disabled: step.value < 2,
+      },
+    ] satisfies StepperItem[],
+);
 
-const isCustomerAvailable = computed<boolean>(() => {
-  return isLoggedIn.value || isGuestSession.value;
+watch(step, (newStep) => {
+  navigateTo(stepRoutes[newStep]);
 });
 </script>
 
 <template>
-  <UContainer>
-    <UPageHeader title="Bestellung aufgeben" />
-    <UPageBody>
-      <UStepper v-model="activeStep" :items="items">
-        <template #user>
-          <div class="flex flex-col md:flex-row w-full gap-18 my-16">
-            <LoginOrRegister
-              v-if="!isLoggedIn && !isGuestSession"
-              class="basis-1/2"
-            />
-            <div v-else class="basis-1/2">
-              <UserDetail :with-edit-button="true" />
-            </div>
-            <div class="basis-1/2">
-              <h3 class="text-2xl mb-6 font-semibold">Warenkorb</h3>
-              <CartQuickView />
-              <UButton
-                v-if="!isEmpty && isCustomerAvailable"
-                :disabled="!isLoggedIn && !isGuestSession"
-                label="Zahlungs- und Versandart auswählen"
-                size="xl"
-                block
-                trailing-icon="i-lucide-arrow-right"
-                class="my-4"
-                @click="activeStep = 1"
-              />
-              <UButton
-                v-if="isEmpty"
-                label="Zur Speisekarte"
-                size="xl"
-                block
-                icon="i-lucide-arrow-left"
-                class="my-4"
-                to="/speisekarte"
-              />
-            </div>
-          </div>
-        </template>
-
-        <template #shipping>
-          <div class="my-14">
-            <CheckoutPaymentAndDelivery />
-            <div class="w-full flex justify-end">
-              <UButton
-                label="Weiter zu Prüfen & Bestellen"
-                trailing-icon="i-lucide-arrow-right"
-                class="m-8 md:max-w-96"
-                size="xl"
-                block
-                @click="activeStep = 2"
-              />
-            </div>
-          </div>
-        </template>
-
-        <template #checkout>
-          <CheckoutSummary />
-        </template>
-      </UStepper>
-    </UPageBody>
-  </UContainer>
+  <UPageSection>
+    <UStepper ref="stepper" v-model="step" :items="items" size="lg">
+      <template #content>
+        <NuxtPage />
+      </template>
+    </UStepper>
+  </UPageSection>
 </template>

package/app/pages/index.vue

@@ -47,7 +47,7 @@ useSeoMeta({
 
     <USeparator :ui="{ border: 'border-primary/30' }" />
 
-    <FoodMarquee
+    <LazyFoodMarquee
       v-if="page.marquee.items?.length > 0"
       :title="page.marquee.title"
       :description="page.marquee.description"

package/app/pages/kontakt.vue

@@ -13,7 +13,7 @@ if (config.public.shopBite.feature.contactForm !== true) {
 
 <template>
   <UPageSection
-    title="Sie haben eine Frage oder Anregung?Wir freuen uns auf Ihre Nachricht."
+    title="Sie haben eine Frage oder Anregung? Wir freuen uns auf Ihre Nachricht."
     description="Bitte beachten Sie, dass wir Tischreservierung oder Tischstornierung nur telefonisch entgegennehmen können."
     icon="i-lucide-mail"
     orientation="horizontal"

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

@@ -1,3 +1,4 @@
+H
 <script setup lang="ts">
 import type { Schemas } from "#shopware";
 

package/app/stores/checkout.ts

@@ -0,0 +1,22 @@
+const stepRoutes = [
+  "/bestellung/warenkorb",
+  "/bestellung/zahlung-versand",
+  "/bestellung/bestaetigen",
+] as const;
+
+export const useCheckoutStore = defineStore("checkout", () => {
+  const step = ref(0);
+
+  function setStep(index: number) {
+    step.value = index;
+  }
+
+  async function navigateToStep(index: number) {
+    if (index < 0 || index >= stepRoutes.length) return;
+    if (index <= step.value) {
+      await navigateTo(stepRoutes[index]);
+    }
+  }
+
+  return { step, setStep, navigateToStep };
+});

package/nuxt.config.ts

@@ -57,7 +57,7 @@ export default defineNuxtConfig({
       shopBite: {
         menuCategoryId: "",
         feature: {
-          multiChannel: "",
+          multiChannel: false,
           secureKey: "",
           contactForm: false,
         },
@@ -78,6 +78,9 @@ export default defineNuxtConfig({
     "/registrierung/bestaetigen": {
       ssr: false,
     },
+    "/bestellung": {
+      redirect: "/bestellung/warenkorb",
+    },
   },
 
   css: ["~/assets/css/main.css"],
@@ -100,6 +103,8 @@ export default defineNuxtConfig({
     "@nuxt/scripts",
     "nuxt-vitalizer",
     "@nuxt/eslint",
+    "@pinia/nuxt",
+    "@nuxt/hints",
   ],
 
   content: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopbite-de/storefront",
-  "version": "1.18.0",
+  "version": "1.18.2",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [
@@ -23,10 +23,12 @@
     "@iconify-json/lucide": "^1.2.97",
     "@iconify-json/simple-icons": "^1.2.73",
     "@nuxt/content": "3.12.0",
+    "@nuxt/hints": "1.0.2",
     "@nuxt/image": "^2.0.0",
     "@nuxt/scripts": "0.13.2",
     "@nuxt/ui": "^4.5.1",
     "@nuxtjs/robots": "^6.0.0",
+    "@pinia/nuxt": "0.11.3",
     "@sentry/nuxt": "^10.43.0",
     "@shopware/api-client": "^1.4.0",
     "@shopware/api-gen": "^1.4.0",

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

@@ -39,7 +39,7 @@ async function clearCart(page: Page) {
   await expect(page.getByRole("heading", { name: /warenkorb/i })).toBeVisible();
 
   const deleteButtons = page.getByRole("button", {
-    name: "Remove item from cart",
+    name: "Artikel entfernen",
   });
   const itemCount = await deleteButtons.count();
 
@@ -92,7 +92,7 @@ async function selectProductAndAddToCart(
 }
 
 async function proceedToCheckoutAndLogin(page: Page) {
-  await page.goto("/bestellung", { waitUntil: "load" });
+  await page.goto("/bestellung/warenkorb", { waitUntil: "load" });
 
   const loginTab = page.getByRole("tab", { name: "Einloggen" });
   await expect(loginTab).toBeVisible();
@@ -129,7 +129,7 @@ async function proceedToCheckoutAndLogin(page: Page) {
 
     // Wait for login to complete and navigate back to checkout
     await page.waitForTimeout(2000);
-    await page.goto("/bestellung", { waitUntil: "load" });
+    await page.goto("/bestellung/zahlung-versand", { waitUntil: "load" });
     await page.waitForTimeout(1000);
 
     // Skip the rest of this function since we already logged in
@@ -159,15 +159,15 @@ async function proceedToCheckoutAndLogin(page: Page) {
 
 async function verifyCheckoutQuantity(page: Page) {
   // Ensure we're on the checkout page
-  if (!page.url().includes("/bestellung")) {
-    await page.goto("/bestellung", { waitUntil: "load" });
+  if (!page.url().includes("/bestellung/warenkorb")) {
+    await page.goto("/bestellung/warenkorb", { waitUntil: "load" });
     await page.waitForTimeout(1000);
   }
 
   // Try to find the quantity input with multiple strategies
   const checkoutQuantityInput = page
     .getByRole("spinbutton", {
-      name: /item quantity/i,
+      name: /menge/i,
     })
     .or(page.getByRole("spinbutton"))
     .or(page.locator("input[type='number']"));
@@ -178,7 +178,7 @@ async function verifyCheckoutQuantity(page: Page) {
 }
 
 async function selectPaymentAndShipping(page: Page) {
-  const nextStepButton = page.getByRole("button", {
+  const nextStepButton = page.getByRole("link", {
     name: "Zahlungs- und Versandart auswählen",
   });
   await expect(nextStepButton).toBeVisible({ timeout: 10000 });
@@ -197,7 +197,7 @@ async function selectPaymentAndShipping(page: Page) {
 }
 
 async function proceedToOrderReview(page: Page) {
-  const lastStepButton = page.getByRole("button", {
+  const lastStepButton = page.getByRole("link", {
     name: "Weiter zu Prüfen & Bestellen",
   });
   await expect(lastStepButton).toBeVisible({ timeout: 10000 });

package/test/nuxt/HeaderTitle.test.ts

@@ -1,42 +0,0 @@
-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");
-  });
-});