@shopbite-de/storefront 1.18.1 → 1.18.3

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,
@@ -89,14 +89,8 @@ if (import.meta.client) {
   }
 }
 
-const { refresh: refreshToppings } = useShopBiteConfig();
-
 onMounted(async () => {
-  await Promise.all([
-    refreshHolidays(),
-    refreshBusinessHours(),
-    refreshToppings(),
-  ]);
+  await Promise.all([refreshHolidays(), refreshBusinessHours()]);
   refreshCart();
   displayStoreStatus();
 });

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) {
@@ -139,66 +159,77 @@ const moreThanOneFilterAndOption = computed<boolean>(
               :items="getSortingOrders"
               placeholder="Sortierung"
             />
-            <UDrawer
-              v-if="moreThanOneFilterAndOption"
-              class="lg:hidden"
-              title="Filter"
-              direction="right"
-            >
-              <UButton
-                label="Filter"
-                icon="i-lucide-sliders-horizontal"
-                color="neutral"
-                variant="subtle"
-              />
+            <ClientOnly v-if="moreThanOneFilterAndOption">
+              <UDrawer class="lg:hidden" title="Filter" direction="right">
+                <UButton
+                  label="Filter"
+                  icon="i-lucide-sliders-horizontal"
+                  color="neutral"
+                  variant="subtle"
+                />
 
-              <template #body>
-                <div class="flex flex-col gap-4">
-                  <div
-                    v-for="filter in propertyFilters"
-                    :key="filter.id"
-                    class="flex flex-col gap-4"
-                  >
-                    <UCollapsible
-                      class="flex flex-col gap-2 w-48"
-                      :default-open="true"
+                <template #body>
+                  <div class="flex flex-col gap-4">
+                    <div
+                      v-for="filter in propertyFilters"
+                      :key="filter.id"
+                      class="flex flex-col gap-4"
                     >
-                      <UButton
-                        :label="filter.translated.name"
-                        color="neutral"
-                        variant="subtle"
-                        trailing-icon="i-lucide-chevron-down"
-                        block
-                        :ui="{
-                          trailingIcon:
-                            'group-data-[state=open]:rotate-180 transition-transform duration-200',
-                        }"
-                      />
-
-                      <template #content>
-                        <UCheckboxGroup
-                          v-model="selectedPropertyFilters"
-                          :items="filter.options"
-                          value-key="id"
-                          label-key="translated.name"
+                      <UCollapsible
+                        class="flex flex-col gap-2 w-48"
+                        :default-open="true"
+                      >
+                        <UButton
+                          :label="filter.translated.name"
+                          color="neutral"
+                          variant="subtle"
+                          trailing-icon="i-lucide-chevron-down"
+                          block
+                          :ui="{
+                            trailingIcon:
+                              'group-data-[state=open]:rotate-180 transition-transform duration-200',
+                          }"
                         />
-                      </template>
-                    </UCollapsible>
+
+                        <template #content>
+                          <UCheckboxGroup
+                            v-model="selectedPropertyFilters"
+                            :items="filter.options"
+                            value-key="id"
+                            label-key="translated.name"
+                          />
+                        </template>
+                      </UCollapsible>
+                    </div>
+                    <UButton
+                      label="Zurücksetzen"
+                      variant="outline"
+                      block
+                      @click="handleFilterRest"
+                    />
                   </div>
-                  <UButton
-                    label="Zurücksetzten"
-                    variant="outline"
-                    block
-                    @click="handleFilterRest"
-                  />
-                </div>
+                </template>
+              </UDrawer>
+              <template #fallback>
+                <USkeleton class="h-8 w-20 lg:hidden" />
               </template>
-            </UDrawer>
+            </ClientOnly>
           </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"
@@ -212,46 +243,64 @@ const moreThanOneFilterAndOption = computed<boolean>(
 
       <template #right>
         <UPageAside>
-          <div v-if="moreThanOneFilterAndOption" class="flex flex-col gap-4">
-            <h2 class="text-3xl md:text-4xl mb-3 pb-2">Filter</h2>
-            <div
-              v-for="filter in propertyFilters"
-              :key="filter.id"
-              class="flex flex-col gap-4"
-            >
-              <UCollapsible
-                class="flex flex-col gap-2 w-48"
-                :default-open="true"
+          <ClientOnly v-if="moreThanOneFilterAndOption">
+            <div class="flex flex-col gap-4">
+              <h2 class="text-3xl md:text-4xl mb-3 pb-2">Filter</h2>
+              <div
+                v-for="filter in propertyFilters"
+                :key="filter.id"
+                class="flex flex-col gap-4"
               >
-                <UButton
-                  :label="filter.translated.name"
-                  color="neutral"
-                  variant="subtle"
-                  trailing-icon="i-lucide-chevron-down"
-                  block
-                  :ui="{
-                    trailingIcon:
-                      'group-data-[state=open]:rotate-180 transition-transform duration-200',
-                  }"
-                />
-
-                <template #content>
-                  <UCheckboxGroup
-                    v-model="selectedPropertyFilters"
-                    :items="filter.options"
-                    value-key="id"
-                    label-key="translated.name"
+                <UCollapsible
+                  class="flex flex-col gap-2 w-48"
+                  :default-open="true"
+                >
+                  <UButton
+                    :label="filter.translated.name"
+                    color="neutral"
+                    variant="subtle"
+                    trailing-icon="i-lucide-chevron-down"
+                    block
+                    :ui="{
+                      trailingIcon:
+                        'group-data-[state=open]:rotate-180 transition-transform duration-200',
+                    }"
                   />
-                </template>
-              </UCollapsible>
+
+                  <template #content>
+                    <UCheckboxGroup
+                      v-model="selectedPropertyFilters"
+                      :items="filter.options"
+                      value-key="id"
+                      label-key="translated.name"
+                    />
+                  </template>
+                </UCollapsible>
+              </div>
+              <UButton
+                label="Zurücksetzen"
+                variant="outline"
+                block
+                @click="handleFilterRest"
+              />
             </div>
-            <UButton
-              label="Zurücksetzten"
-              variant="outline"
-              block
-              @click="handleFilterRest"
-            />
-          </div>
+            <template #fallback>
+              <div class="flex flex-col gap-4">
+                <USkeleton class="h-9 w-20" />
+                <div class="flex flex-col gap-2">
+                  <USkeleton class="h-8 w-48" />
+                  <USkeleton class="h-4 w-36" />
+                  <USkeleton class="h-4 w-32" />
+                  <USkeleton class="h-4 w-40" />
+                </div>
+                <div class="flex flex-col gap-2">
+                  <USkeleton class="h-8 w-48" />
+                  <USkeleton class="h-4 w-36" />
+                  <USkeleton class="h-4 w-32" />
+                </div>
+              </div>
+            </template>
+          </ClientOnly>
         </UPageAside>
       </template>
     </UPage>

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/Right.vue

@@ -110,7 +110,7 @@ const dropDownMenu = computed<DropdownMenuItem[][]>(() => {
       />
     </UChip>
   </div>
-  <UDrawer
+  <LazyUDrawer
     v-if="isCheckoutEnabled"
     v-model:open="cartQuickViewOpen"
     title="Warenkorb"
@@ -134,11 +134,11 @@ 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"
       />
     </template>
-  </UDrawer>
+  </LazyUDrawer>
 </template>

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

@@ -17,7 +17,7 @@ const loginSlide = ref(false);
     </template>
 
     <template #body>
-      <HeaderBody />
+      <LazyHeaderBody />
     </template>
   </UHeader>
 
@@ -28,7 +28,7 @@ const loginSlide = ref(false);
   >
     <template #body>
       <div class="h-full m-4">
-        <UserLoginForm />
+        <LazyUserLoginForm />
       </div>
     </template>
   </USlideover>