test: debug listing

examples/snippets-middleware/nuxt.config.ts

@@ -1,20 +1,25 @@
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   extends: ["@shopware/composables/nuxt-layer", "@shopware/cms-base-layer"],
+
   runtimeConfig: {
     // These values are used in the Shopware API client
     // TODO: replace with environment variables copied from Github once feature is supported
     api_client_id: "SWIARW9QA2DYOUX3OXJMRGX2UQ", // or import.meta.env.NUXT_SHOPWARE_ACCESS_KEY_ID when .env is defined
     api_client_secret: "dTRpT3ptZDlmMHZocDNrb2ZOODYxYWtIWnZtRTByUnBvRXh5M3Q", // or import.meta.env.NUXT_SHOPWARE_SECRET_ACCESS_KEY  when .env is defined
   },
+
   shopware: {
     endpoint: "https://demo-frontends.shopware.store/store-api",
     accessToken: "SWSCBHFSNTVMAWNZDNFKSHLAYW",
   },
+
   modules: ["@shopware/nuxt-module", "@nuxtjs/i18n"],
+
   typescript: {
     strict: true,
   },
+
   i18n: {
     defaultLocale: "en-GB",
     detectBrowserLanguage: false,
@@ -32,5 +37,7 @@ export default defineNuxtConfig({
       },
     ],
   },
+
   telemetry: false,
+  compatibilityDate: "2025-02-03",
 });

packages/cms-base-layer/components/public/cms/element/CmsElementProductListing.vue

@@ -56,6 +56,7 @@ const initalRoute = defu(route);
 watch(
   () => route,
   (newRoute) => {
+    console.warn("route", newRoute.query, route.query);
     if (initalRoute.path !== newRoute.path) {
       return;
     }
@@ -119,6 +120,20 @@ const compareRouteQueryWithInitialListing = async () => {
     (route.query.p && Number(route.query.p) !== pageListing) ||
     (route.query.order && route.query.order !== orderListing);
 
+  console.warn(
+    "isChangeNeeded",
+    isChangePageNeeded,
+    route.query.limit,
+    limit.value,
+    limitListing,
+    route.query.p,
+    Number(route.query.p),
+    pageListing,
+    route.query.order,
+    route.query.order,
+    orderListing,
+  );
+
   if (isChangePageNeeded) {
     const limitQuery = route.query.limit
       ? Number(route.query.limit)

packages/composables/src/useCategorySearch/useCategorySearch.ts

@@ -40,6 +40,8 @@ export function useCategorySearch(): UseCategorySearchReturn {
     },
   ) {
     const associations = options?.withCmsAssociations ? cmsAssociations : {};
+
+    console.warn("useCategorySearch", categoryId, options?.query);
     const result = await apiClient.invoke(
       "readCategory post /category/{navigationId}",
       {

packages/composables/src/useListing/useListing.ts

@@ -190,6 +190,8 @@ export function useListing(params?: {
   // const { getDefaults } = useDefaults({ defaultsKey: contextName });
   const { apiClient } = useShopwareContext();
 
+  console.log("params", params);
+
   let searchMethod: typeof listingType extends "productSearchListing"
     ? (
         searchParams: operations["readProductListing post /product-listing/{categoryId}"]["body"],
@@ -202,6 +204,7 @@ export function useListing(params?: {
     searchMethod = async (
       searchCriteria: operations["searchPage post /search"]["body"],
     ) => {
+      console.log("searchCriteria-1", searchCriteria);
       const { data } = await apiClient.invoke("searchPage post /search", {
         headers: {
           "sw-include-seo-urls": true,
@@ -219,6 +222,8 @@ export function useListing(params?: {
     searchMethod = async (
       searchCriteria: operations["readProductListing post /product-listing/{categoryId}"]["body"],
     ) => {
+      console.log("searchCriteria-2", searchCriteria);
+
       const { data } = await apiClient.invoke(
         "readProductListing post /product-listing/{categoryId}",
         {
@@ -350,6 +355,7 @@ export function createListingComposable({
         searchDefaults,
         criteria,
       );
+      console.log("initSearch", searchCriteria);
       const result = await searchMethod(searchCriteria);
       return result;
     } finally {
@@ -367,6 +373,7 @@ export function createListingComposable({
         searchDefaults,
         criteria,
       );
+      console.log("async search", searchCriteria);
       const result = await searchMethod(searchCriteria);
 
       _storeAppliedListing.value = result;
@@ -525,6 +532,8 @@ export function createListingComposable({
       };
     }
 
+    console.log("setCurrentFilters", appliedFilters);
+
     return search(appliedFilters);
   };
 

templates/vue-demo-store/components/FrontendNavigationPage.vue

@@ -9,66 +9,51 @@ const props = defineProps<{
 }>();
 
 const { search } = useCategorySearch();
-const route = useRoute();
 const { buildDynamicBreadcrumbs } = useBreadcrumbs();
 const { apiClient } = useShopwareContext();
 const errorDetails = ref();
 
-const { data, error } = await useAsyncData(
+const { data, error, refresh } = await useAsyncData(
   `cmsNavigation${props.navigationId}`,
   async () => {
-    const responses = await Promise.allSettled([
-      search(props.navigationId, {
-        withCmsAssociations: true,
-        query: {
-          ...route.query,
-        },
-      }),
-      apiClient
-        .invoke("readBreadcrumb get /breadcrumb/{id}", {
-          pathParams: {
-            id: props.navigationId,
-          },
-        })
-        .catch(() => {
-          console.error("Error while fetching breadcrumbs");
-        }),
-    ]);
+    const route = useRoute();
 
-    for (const response of responses) {
-      if (response.status === "rejected") {
-        console.error("[FrontendNavigationPage.vue]", response.reason.message);
-        errorDetails.value = response.reason.message;
-      }
-    }
+    const queryParams = route.query;
+
+    console.warn("search query inside useAsyncData", queryParams);
+
+    const categoryResponse1 = await search(props.navigationId, {
+      withCmsAssociations: true,
+      query: {
+        ...queryParams,
+      },
+    });
 
     return {
-      category: responses[0].status === "fulfilled" ? responses[0].value : null,
-      breadcrumbs:
-        responses[1].status === "fulfilled" ? responses[1].value : null,
+      category: categoryResponse1 ?? null,
     };
   },
 );
+
 const categoryResponse = ref(data.value?.category);
 
-if (data.value?.breadcrumbs) {
-  buildDynamicBreadcrumbs(data.value.breadcrumbs.data);
-}
+// if (data.value?.breadcrumbs) {
+//   //buildDynamicBreadcrumbs(data.value.breadcrumbs.data);
+// }
 
-if (!categoryResponse.value) {
-  const statusMessage = error.value || errorDetails.value;
-  console.error("[FrontendNavigationPage.vue]", statusMessage);
-  throw createError({
-    statusCode: 500,
-    message: statusMessage,
-  });
-}
+// const statusMessage = error.value || errorDetails.value;
+// console.error("[FrontendNavigationPage.vue]", statusMessage);
+// throw createError({
+//   statusCode: 500,
+//   message: statusMessage,
+// });
 
-const { category } = useCategory(categoryResponse as Ref<Schemas["Category"]>);
+const { category } = useCategory(
+  categoryResponse as unknown as Ref<Schemas["Category"]>,
+);
 useCmsHead(category, { mainShopTitle: "Shopware Frontends Demo Store" });
 </script>
 
-<template>
-  <LayoutBreadcrumbs v-if="route.path != '/'" />
+<template :key="`${route.query.manufacturer}`">
   <CmsPage v-if="category?.cmsPage" :content="category.cmsPage" />
 </template>

templates/vue-demo-store/nuxt.config.ts

@@ -1,6 +1,7 @@
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({
   extends: ["@shopware/composables/nuxt-layer", "@shopware/cms-base-layer"],
+
   runtimeConfig: {
     shopware: {
       /**
@@ -39,11 +40,15 @@ export default defineNuxtConfig({
       broadcasting: false,
     },
   },
+
   shopware: {
     accessToken: "SWSCBHFSNTVMAWNZDNFKSHLAYW",
     endpoint: "https://demo-frontends.shopware.store/store-api/",
     devStorefrontUrl: "",
   },
+
+  debug: true,
+
   routeRules: {
     "/": {
       isr: 60 * 60 * 24,
@@ -82,9 +87,26 @@ export default defineNuxtConfig({
       ssr: false,
     },
     "/**": {
-      isr: 60 * 60 * 24,
+      isr: {
+        expiration: 60 * 60 * 24,
+        // see https://github.com/shopware/frontends/issues/1652
+        allowQuery: [
+          "page",
+          "limit",
+          "sort",
+          "filter",
+          "search",
+          "manufacturer",
+          "properties",
+          "rating",
+          "price",
+        ],
+        //passQuery: true,
+      },
+      prerender: false,
     },
   },
+
   /**
    * Commented because of the StackBlitz error
    * Issue: https://github.com/shopware/frontends/issues/88
@@ -93,12 +115,16 @@ export default defineNuxtConfig({
     // typeCheck: true,
     strict: true,
   },
+
   modules: [
     "@vueuse/nuxt",
     "@unocss/nuxt",
     "@shopware/nuxt-module",
     "@nuxtjs/i18n",
   ],
+
+  devtools: { enabled: true },
+
   // components: true,
   components: {
     dirs: [
@@ -109,24 +135,30 @@ export default defineNuxtConfig({
     ],
     global: true,
   },
+
   vueuse: {
     ssrHandlers: true,
   },
+
   nitro: {
     compressPublicAssets: true,
   },
+
   unocss: {
     // for presets, theme config, ... look at the uno.config.ts file
   },
+
   css: [
     "@unocss/reset/tailwind-compat.css", // needed to reset styles see https://unocss.dev/guide/style-reset (@unocss/reset)
   ],
+
   router: {
     options: {
       linkActiveClass: "link-active",
       linkExactActiveClass: "link-exact-active text-primary",
     },
   },
+
   i18n: {
     strategy: "prefix_except_default",
     defaultLocale: "en-GB",
@@ -153,4 +185,5 @@ export default defineNuxtConfig({
     ],
   },
   telemetry: false,
+  compatibilityDate: "2025-01-27",
 });

templates/vue-demo-store/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "nuxt prepare && nuxt dev",
-    "build": "nuxt prepare && nuxt build",
+    "build": "export NITRO_PRESET=vercel nuxt prepare && nuxt build",
     "start": "nuxt start",
     "lint": "biome check .",
     "lint:fix": "biome check --write . && pnpm run typecheck",

templates/vue-demo-store/pages/[...all].vue → templates/vue-demo-store/pages/[...slug].vue

@@ -70,4 +70,4 @@ function render() {
 
 <template>
   <render />
-</template>
+</template>