@shopbite-de/storefront 1.18.5 → 1.19.0

package/.github/workflows/ci.yaml

@@ -121,51 +121,51 @@ jobs:
       - name: Unit tests
         run: pnpm test:unit
 
-  e2e-test:
-    name: E2E tests
-    environment: test
-    needs: [setup]
-    timeout-minutes: 15
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - uses: pnpm/action-setup@v5
-        with:
-          version: 10.33.0
-
-      - uses: actions/setup-node@v6
-        with:
-          node-version: '24'
-
-      - name: Restore workspace from cache
-        uses: actions/cache/restore@v5
-        with:
-          path: |
-            ~/.local/share/pnpm/store
-            node_modules
-            .nuxt
-            .output
-          key: workspace-${{ runner.os }}-${{ github.sha }}
-
-      - name: Cache Playwright browsers
-        uses: actions/cache@v5
-        with:
-          path: ~/.cache/ms-playwright
-          key: playwright-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-
-      - name: Install Playwright browsers
-        run: pnpm exec playwright install --with-deps chromium
-
-      - name: E2E tests
-        env:
-          TEST_USER: ${{ secrets.TEST_USER }}
-          TEST_USER_PASS: ${{ secrets.TEST_USER_PASS }}
-        run: pnpm test:e2e
-
-      - uses: actions/upload-artifact@v7
-        if: ${{ !cancelled() }}
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 30
+#  e2e-test:
+#    name: E2E tests
+#    environment: test
+#    needs: [setup]
+#    timeout-minutes: 15
+#    runs-on: ubuntu-latest
+#    steps:
+#      - uses: actions/checkout@v6
+#
+#      - uses: pnpm/action-setup@v5
+#        with:
+#          version: 10.33.0
+#
+#      - uses: actions/setup-node@v6
+#        with:
+#          node-version: '24'
+#
+#      - name: Restore workspace from cache
+#        uses: actions/cache/restore@v5
+#        with:
+#          path: |
+#            ~/.local/share/pnpm/store
+#            node_modules
+#            .nuxt
+#            .output
+#          key: workspace-${{ runner.os }}-${{ github.sha }}
+#
+#      - name: Cache Playwright browsers
+#        uses: actions/cache@v5
+#        with:
+#          path: ~/.cache/ms-playwright
+#          key: playwright-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+#
+#      - name: Install Playwright browsers
+#        run: pnpm exec playwright install --with-deps chromium
+#
+#      - name: E2E tests
+#        env:
+#          TEST_USER: ${{ secrets.TEST_USER }}
+#          TEST_USER_PASS: ${{ secrets.TEST_USER_PASS }}
+#        run: pnpm test:e2e
+#
+#      - uses: actions/upload-artifact@v7
+#        if: ${{ !cancelled() }}
+#        with:
+#          name: playwright-report
+#          path: playwright-report/
+#          retention-days: 30

package/app/components/Category/Listing.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { operations, Schemas } from "#shopware";
+import type { Schemas } from "#shopware";
 import Breadcrumb from "~/components/Category/Breadcrumb.vue";
 
 const props = defineProps<{
@@ -8,72 +8,43 @@ const props = defineProps<{
 
 const { id: categoryId } = toRefs(props);
 
-const searchCriteria = {
-  includes: {
-    product: [
-      "id",
-      "productNumber",
-      "name",
-      "description",
-      "calculatedPrice",
-      "translated",
-      "properties",
-      "propertyIds",
-      "sortedProperties",
-      "cover",
-    ],
-    property: ["id", "name", "translated", "options"],
-    property_group_option: ["id", "name", "translated", "group"],
-    product_option: ["id", "groupId", "name", "translated", "group"],
-  },
-  associations: {
-    cover: {
-      associations: {
-        media: {},
-      },
-    },
-    properties: {
-      associations: {
-        group: {},
-      },
-    },
-  },
-  limit: 100,
-} as operations["searchPage post /search"]["body"];
+const { category } = await useCategory(categoryId);
 
 const {
-  resetFilters,
+  showSkeleton,
   loading,
-  search,
-  getElements,
-  getCurrentListing,
-  getCurrentSortingOrder,
-  getSortingOrders,
-  changeCurrentSortingOrder,
-  getAvailableFilters,
-  getCurrentFilters,
-  setCurrentFilters,
-  setInitialListing,
-} = useListing({
-  listingType: "categoryListing",
-  categoryId: props.id,
-  defaultSearchCriteria: searchCriteria,
-});
-
-const { category } = await useCategory(categoryId);
+  elements,
+  sortingOrders,
+  currentSortingOrder,
+  availableFilters,
+  currentFilters,
+  changeSorting,
+  setFilters,
+  resetFilters,
+} = useCategoryListing(props.id);
 
 useCategorySeo(category);
 
-const currentSorting = ref(getCurrentSortingOrder.value ?? "Sortieren");
+const currentSorting = ref(currentSortingOrder.value ?? "Sortieren");
+
+// Sync currentSorting when listing data arrives during client-side navigation
+// (currentSortingOrder.value is null at setup time in that case).
+watch(
+  currentSortingOrder,
+  (val) => {
+    if (val) currentSorting.value = val;
+  },
+  { once: true },
+);
 
 const propertyFilters = computed<Schemas["PropertyGroup"][]>(
   () =>
-    (getAvailableFilters.value?.filter(
+    (availableFilters.value?.filter(
       (availableFilter) => availableFilter.code === "properties",
     ) ?? []) as unknown as Schemas["PropertyGroup"][],
 );
 
-const selectedPropertyFilters = ref(getCurrentFilters.value?.properties ?? []);
+const selectedPropertyFilters = ref(currentFilters.value?.properties ?? []);
 const selectedPropertyFiltersString = computed(() =>
   selectedPropertyFilters.value?.join("|"),
 );
@@ -87,48 +58,26 @@ const selectedListingFilters = computed<ShortcutFilterParam[]>(() => {
   ];
 });
 
-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);
+let filterChain = Promise.resolve();
 
 watch(selectedListingFilters, (newFilters, oldFilters) => {
-  if (newFilters[0]?.value === oldFilters?.[0]?.value) {
-    return;
-  }
-  setCurrentFilters(newFilters);
+  if (newFilters[0]?.value === oldFilters?.[0]?.value) return;
   currentSorting.value = "Sortieren";
+  filterChain = filterChain
+    .catch(() => {})
+    .then(() => setFilters(newFilters))
+    .catch(() => {});
 });
 
-watch(currentSorting, async () => {
+watch(currentSorting, async (val) => {
+  if (val === currentSortingOrder.value) return;
   const sortingQuery = {
-    query: getCurrentFilters.value?.search,
-    properties: getCurrentFilters.value?.properties?.join("|"),
+    query: currentFilters.value?.search,
+    properties: currentFilters.value?.properties?.join("|"),
   };
-  await changeCurrentSortingOrder(currentSorting.value as string, sortingQuery);
+  await changeSorting(val as string, sortingQuery);
 });
 
-async function handleFilterRest() {
-  await resetFilters();
-}
-
 const moreThanOneFilterAndOption = computed<boolean>(
   () => propertyFilters.value.length > 0,
 );
@@ -148,15 +97,12 @@ const moreThanOneFilterAndOption = computed<boolean>(
           <Breadcrumb :category-id="category?.id" />
           <CategoryHeader v-if="category" :category="category" />
           <div class="flex flex-row justify-between gap-4 mb-4">
-            <UBadge
-              variant="subtle"
-              :label="`${getElements.length} Produkte`"
-            />
+            <UBadge variant="subtle" :label="`${elements.length} Produkte`" />
             <USelect
               v-model="currentSorting"
               icon="i-lucide-arrow-down-wide-narrow"
               value-key="key"
-              :items="getSortingOrders"
+              :items="sortingOrders"
               placeholder="Sortierung"
             />
             <ClientOnly v-if="moreThanOneFilterAndOption">
@@ -205,7 +151,7 @@ const moreThanOneFilterAndOption = computed<boolean>(
                       label="Zurücksetzen"
                       variant="outline"
                       block
-                      @click="handleFilterRest"
+                      @click="resetFilters"
                     />
                   </div>
                 </template>
@@ -231,7 +177,7 @@ const moreThanOneFilterAndOption = computed<boolean>(
             :class="{ 'opacity-40 pointer-events-none': loading }"
           >
             <ProductCard
-              v-for="product in getElements"
+              v-for="product in elements"
               :key="product.id"
               :product="product"
               :with-favorite-button="true"
@@ -281,7 +227,7 @@ const moreThanOneFilterAndOption = computed<boolean>(
                 label="Zurücksetzen"
                 variant="outline"
                 block
-                @click="handleFilterRest"
+                @click="resetFilters"
               />
             </div>
             <template #fallback>

package/app/composables/useCategory.ts

@@ -1,38 +1,10 @@
-import { encodeForQuery } from "@shopware/api-client/helpers";
+import type { Schemas } from "#shopware";
+import type { NitroFetchRequest } from "nitropack";
 
 export async function useCategory(categoryId: Ref<string>) {
-  const { apiClient } = useShopwareContext();
+  const { data: category } = await useFetch<Schemas["Category"]>(
+    `/api/category/${categoryId.value}` as NitroFetchRequest,
+  );
 
-  const criteria = encodeForQuery({
-    includes: {
-      category: [
-        "name",
-        "translated",
-        "seoUrl",
-        "externalLink",
-        "customFields",
-      ],
-    },
-  });
-
-  const cacheKey = computed(() => `category-${categoryId.value}`);
-
-  const { data } = await useAsyncData(cacheKey, async () => {
-    const response = await apiClient.invoke(
-      "readCategoryGet get /category/{navigationId}",
-      {
-        // @ts-expect-error: _criteria is not in the type definition
-        query: { _criteria: criteria },
-        pathParams: {
-          navigationId: categoryId.value,
-        },
-      },
-    );
-
-    return response.data;
-  });
-
-  return {
-    category: data,
-  };
+  return { category };
 }

package/app/composables/useCategoryListing.ts

@@ -0,0 +1,131 @@
+import { getListingFilters } from "@shopware/helpers";
+import type { Schemas, operations } from "#shopware";
+import type { NitroFetchRequest } from "nitropack";
+
+export type CategoryListingCriteria = NonNullable<
+  operations["readProductListingGet get /product-listing/{categoryId}"]["query"]
+>;
+
+export type ShortcutFilterParam = {
+  code: string;
+  value: string | string[] | undefined;
+};
+
+const DEFAULT_CRITERIA: CategoryListingCriteria = {
+  includes: {
+    product: [
+      "id",
+      "productNumber",
+      "name",
+      "description",
+      "calculatedPrice",
+      "translated",
+      "properties",
+      "propertyIds",
+      "sortedProperties",
+      "cover",
+    ],
+    property: ["id", "name", "translated", "options"],
+    property_group_option: ["id", "name", "translated", "group"],
+    product_option: ["id", "groupId", "name", "translated", "group"],
+  },
+  associations: {
+    cover: {
+      associations: {
+        media: {},
+      },
+    },
+    properties: {
+      associations: {
+        group: {},
+      },
+    },
+  },
+  limit: 100,
+};
+
+export function useCategoryListing(
+  categoryId: string,
+  _defaultCriteria: CategoryListingCriteria = DEFAULT_CRITERIA,
+) {
+  const nuxtApp = useNuxtApp();
+
+  async function fetchListing(
+    criteria: CategoryListingCriteria,
+  ): Promise<Schemas["ProductListingResult"]> {
+    // Send only the allowlisted filter params; the server merges them with the
+    // fixed includes/associations/limit so clients cannot influence projections.
+    const c = criteria as Record<string, unknown>;
+    return await $fetch(`/api/listing/${categoryId}` as NitroFetchRequest, {
+      query: {
+        order: c.order,
+        properties: c.properties,
+        manufacturer: c.manufacturer,
+        query: c.query,
+        p: c.p,
+      },
+    });
+  }
+
+  const loading = ref(false);
+
+  const { data: listing, pending } = useLazyAsyncData(
+    `listing-${categoryId}`,
+    () => fetchListing({}),
+  );
+
+  // Suppress skeleton during SSR hydration to prevent hydration mismatch.
+  const showSkeleton = computed(() => pending.value && !nuxtApp.isHydrating);
+
+  const elements = computed(() => listing.value?.elements ?? []);
+  const sortingOrders = computed(() => listing.value?.availableSortings);
+  const currentSortingOrder = computed(() => listing.value?.sorting);
+  const availableFilters = computed(() =>
+    getListingFilters(listing.value?.aggregations),
+  );
+  const currentFilters = computed(() => listing.value?.currentFilters);
+
+  async function applySearch(criteria: CategoryListingCriteria) {
+    loading.value = true;
+    try {
+      listing.value = await fetchListing(criteria);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function changeSorting(order: string, query?: CategoryListingCriteria) {
+    await applySearch({ ...query, order } as CategoryListingCriteria);
+  }
+
+  async function setFilters(filters: ShortcutFilterParam[]) {
+    const filterObj: Record<string, unknown> = {};
+    for (const f of filters) {
+      filterObj[f.code] = f.value;
+    }
+    const appliedFilters = {
+      query: currentFilters.value?.search,
+      manufacturer: currentFilters.value?.manufacturer?.join("|"),
+      properties: currentFilters.value?.properties?.join("|"),
+      ...filterObj,
+    };
+    await applySearch(appliedFilters as CategoryListingCriteria);
+  }
+
+  async function resetFilters() {
+    await applySearch({});
+  }
+
+  return {
+    showSkeleton,
+    loading,
+    elements,
+    sortingOrders,
+    currentSortingOrder,
+    availableFilters,
+    currentFilters,
+    changeSorting,
+    setFilters,
+    resetFilters,
+  };
+}

package/app/pages/bestellung/bestaetigen.vue

@@ -1,4 +1,13 @@
 <script setup lang="ts">
+const {
+  public: { site },
+} = useRuntimeConfig();
+
+useSeoMeta({
+  title: `Prüfen & Bestellen | ${site.name}`,
+  robots: "noindex, nofollow",
+});
+
 const { isLoggedIn, isGuestSession } = useUser();
 const { setStep } = useCheckoutStore();
 

package/app/pages/bestellung/warenkorb.vue

@@ -1,4 +1,13 @@
 <script setup lang="ts">
+const {
+  public: { site },
+} = useRuntimeConfig();
+
+useSeoMeta({
+  title: `Warenkorb | ${site.name}`,
+  robots: "noindex, nofollow",
+});
+
 const { isLoggedIn, isGuestSession } = useUser();
 const { isEmpty } = useCart();
 const { setStep } = useCheckoutStore();

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

@@ -1,4 +1,13 @@
 <script setup lang="ts">
+const {
+  public: { site },
+} = useRuntimeConfig();
+
+useSeoMeta({
+  title: `Zahlung & Versand | ${site.name}`,
+  robots: "noindex, nofollow",
+});
+
 const { isLoggedIn, isGuestSession } = useUser();
 const { setStep } = useCheckoutStore();
 

package/nuxt.config.ts

@@ -72,6 +72,9 @@ export default defineNuxtConfig({
   },
 
   routeRules: {
+    "/": {
+      prerender: true,
+    },
     "/merkliste": {
       ssr: false,
     },
@@ -110,9 +113,7 @@ export default defineNuxtConfig({
     experimental: { sqliteConnector: "native" },
   },
 
-  vitalizer: {
-    disablePrefetchLinks: true,
-  },
+  vitalizer: {},
 
   pwa: {
     strategies: sw ? "injectManifest" : "generateSW",
@@ -123,6 +124,8 @@ export default defineNuxtConfig({
       name: storeName,
       short_name: storeName,
       theme_color: "#ff5b00",
+      display: "standalone",
+      start_url: "/",
       icons: [
         {
           src: "logo-192.png",

package/package.json

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

package/server/api/category/[categoryId].get.ts

@@ -0,0 +1,25 @@
+import { encodeForQuery } from "@shopware/api-client/helpers";
+import type { Schemas } from "#shopware";
+
+const criteria = encodeForQuery({
+  includes: {
+    category: ["name", "translated", "seoUrl", "externalLink", "customFields"],
+  },
+});
+
+export default defineCachedEventHandler(
+  async (event): Promise<Schemas["Category"]> => {
+    const categoryId = getRouterParam(event, "categoryId")!;
+    const { endpoint, accessToken } = useRuntimeConfig().public.shopware;
+
+    return await $fetch(`${endpoint}/category/${categoryId}`, {
+      headers: { "sw-access-key": accessToken },
+      query: { _criteria: criteria },
+    });
+  },
+  {
+    maxAge: 86400,
+    name: "category",
+    getKey: (event) => `category-${getRouterParam(event, "categoryId")}`,
+  },
+);

package/server/api/listing/[categoryId].get.ts

@@ -0,0 +1,107 @@
+import { encodeForQuery } from "@shopware/api-client/helpers";
+
+/**
+ * Fixed projections applied to every listing request. Defined server-side so
+ * clients cannot override includes/associations/limit via query params.
+ */
+const BASE_CRITERIA = {
+  includes: {
+    product: [
+      "id",
+      "productNumber",
+      "name",
+      "description",
+      "calculatedPrice",
+      "translated",
+      "properties",
+      "propertyIds",
+      "sortedProperties",
+      "cover",
+    ],
+    property: ["id", "name", "translated", "options"],
+    property_group_option: ["id", "name", "translated", "group"],
+    product_option: ["id", "groupId", "name", "translated", "group"],
+  },
+  associations: {
+    cover: {
+      associations: {
+        media: {},
+      },
+    },
+    properties: {
+      associations: {
+        group: {},
+      },
+    },
+  },
+  limit: 100,
+};
+
+/** Validates and returns a non-empty string up to maxLength, or undefined. */
+function sanitizeString(value: unknown, maxLength: number): string | undefined {
+  if (typeof value !== "string" || value === "") return undefined;
+  const trimmed = value.trim();
+  return trimmed.length <= maxLength ? trimmed : undefined;
+}
+
+/** Validates page number: positive integer in [1, 1000]. */
+function sanitizePage(value: unknown): number | undefined {
+  const n = Number(value);
+  return Number.isInteger(n) && n >= 1 && n <= 1000 ? n : undefined;
+}
+
+function resolveAllowedParams(query: Record<string, unknown>) {
+  return {
+    order: sanitizeString(query.order, 64),
+    properties: sanitizeString(query.properties, 2048),
+    manufacturer: sanitizeString(query.manufacturer, 2048),
+    query: sanitizeString(query.query, 256),
+    p: sanitizePage(query.p),
+  };
+}
+
+export default defineCachedEventHandler(
+  async (event) => {
+    const categoryId = getRouterParam(event, "categoryId")!;
+    const { endpoint, accessToken } = useRuntimeConfig().public.shopware;
+
+    const { order, properties, manufacturer, query, p } = resolveAllowedParams(
+      getQuery(event) as Record<string, unknown>,
+    );
+
+    const criteria = {
+      ...BASE_CRITERIA,
+      ...(order !== undefined && { order }),
+      ...(properties !== undefined && { properties }),
+      ...(manufacturer !== undefined && { manufacturer }),
+      ...(query !== undefined && { query }),
+      ...(p !== undefined && { p }),
+    };
+
+    return await $fetch(`${endpoint}/product-listing/${categoryId}`, {
+      headers: {
+        "sw-access-key": accessToken,
+        "sw-include-seo-urls": "true",
+      },
+      query: { _criteria: encodeForQuery(criteria) },
+    });
+  },
+  {
+    maxAge: 86400,
+    name: "listing",
+    getKey: (event) => {
+      const categoryId = getRouterParam(event, "categoryId") ?? "";
+      const q = getQuery(event) as Record<string, unknown>;
+      const { order, properties, manufacturer, query, p } =
+        resolveAllowedParams(q);
+      return [
+        categoryId,
+        order ?? "",
+        properties ?? "",
+        manufacturer ?? "",
+        query ?? "",
+        p ?? 1,
+      ].join("|");
+    },
+  },
+);