@shopbite-de/storefront 1.19.0 → 1.20.0

package/app/components/Product/Configurator.vue

@@ -14,17 +14,12 @@ const { variants: selectableOptions } = useProductVariantsZwei(configurator);
 
 const selectedOptions = ref<Record<string, string>>({});
 
-function initialOptions(variant: Ref<Schemas["Product"]>) {
-  const options = variant.value.options as Schemas["PropertyGroupOption"][];
-  for (const option of options) {
-    if (option.group && option.id) {
-      selectedOptions.value[option.group.id] = option.id;
-    }
+const options = product.value.options as Schemas["PropertyGroupOption"][];
+for (const option of options ?? []) {
+  if (option.group && option.id) {
+    selectedOptions.value[option.group.id] = option.id;
   }
 }
-onMounted(() => {
-  initialOptions(product);
-});
 
 watch(
   selectedOptions.value,

package/app/components/Product/CrossSelling.vue

@@ -1,69 +1,26 @@
 <script setup lang="ts">
 import type { Schemas } from "#shopware";
-import type {
-  AssociationItemProduct,
-  AssociationItem,
-} from "~/types/Association";
-import { useShopwareContext } from "#imports";
+import type { AssociationItemProduct } from "~/types/Association";
 
-const DEFAULT_CURRENCY = "EUR";
-const DEFAULT_LOCALE = "de-DE";
 const LOADING_ICON = "i-lucide-loader";
-const DEFAULT_ICON = "i-lucide-plus";
 
 const props = defineProps<{
   product: Schemas["Product"];
 }>();
 
-const product = computed(() => props.product);
-const selectedExtras = ref<AssociationItemProduct[]>([]);
-
-const { getFormattedPrice } = usePrice({
-  currencyCode: DEFAULT_CURRENCY,
-  localeCode: DEFAULT_LOCALE,
-});
-
-function mapAssociationToItems(
-  associations: Schemas["CrossSellingElement"][],
-): AssociationItem[] {
-  return associations.map((crossSellingElement) => ({
-    label: crossSellingElement.crossSelling.name,
-    products: crossSellingElement.products.map(
-      (product: Schemas["Product"]) => ({
-        label: product.name,
-        value: product.id,
-        price: getFormattedPrice(product.calculatedPrice.unitPrice),
-        icon: DEFAULT_ICON,
-      }),
-    ),
-  }));
-}
-
-const { apiClient } = useShopwareContext();
-
-const { data: productAssociations, pending: isAssociationsLoading } =
-  useAsyncData(`cross-selling-${product.value.id}`, async () => {
-    const response = await apiClient.invoke(
-      "readProductCrossSellings post /product/{productId}/cross-selling",
-      {
-        pathParams: { productId: product.value.id },
-      },
-    );
+const emit = defineEmits<{
+  "extras-selected": [selectedExtras: AssociationItemProduct[]];
+}>();
 
-    return response.data;
-  });
+const selectedExtras = ref<AssociationItemProduct[]>([]);
 
-const associationItems = computed(() =>
-  mapAssociationToItems(productAssociations.value ?? []),
+const { associationItems, isAssociationsLoading } = useProductCrossSelling(
+  () => props.product.id,
 );
 
 watch(selectedExtras, () => emit("extras-selected", selectedExtras.value), {
   deep: true,
 });
-
-const emit = defineEmits<{
-  "extras-selected": [selectedExtras: AssociationItemProduct[]];
-}>();
 </script>
 
 <template>

package/app/components/Product/Detail.vue

@@ -1,142 +1,30 @@
 <script setup lang="ts">
-import type { operations, Schemas } from "#shopware";
-import type { AssociationItemProduct } from "~/types/Association";
-import { useTrackEvent } from "~/composables/useTrackEvent";
+import type { Schemas } from "#shopware";
 
 const props = defineProps<{
   productId: string;
 }>();
 
-const { apiClient } = useShopwareContext();
-const { trackProductView } = useTrackEvent();
-
-const productId = toRef(props.productId);
-
-const searchCriteria = {
-  includes: {
-    product: [
-      "id",
-      "productNumber",
-      "name",
-      "description",
-      "calculatedPrice",
-      "translated",
-      "properties",
-      "propertyIds",
-      "options",
-      "optionIds",
-      "seoCategory",
-      "configuratorSettings",
-      "children",
-      "parentId",
-      "sortedProperties",
-      "cover",
-    ],
-    property: ["id", "name", "translated", "options"],
-    property_group_option: ["id", "name", "translated", "group"],
-    product_configurator_setting: ["id", "optionId", "option", "productId"],
-    product_option: ["id", "groupId", "name", "translated", "group"],
-    category: ["id", "name", "translated"],
-  },
-  associations: {
-    cover: {
-      associations: {
-        media: {},
-      },
-    },
-    properties: {
-      associations: {
-        group: {},
-      },
-    },
-    options: {
-      associations: {
-        group: {},
-      },
-    },
-    configuratorSettings: {
-      associations: {
-        option: {
-          associations: {
-            group: {},
-          },
-        },
-      },
-    },
-    children: {
-      associations: {
-        properties: {
-          associations: {
-            group: {},
-          },
-        },
-        options: {
-          associations: {
-            group: {},
-          },
-        },
-      },
-    },
-  },
-} as operations["searchPage post /search"]["body"];
-
-const { data: productDetails, pending } = useAsyncData(
-  () => `product-${productId.value ?? "none"}`,
-  async () => {
-    if (!productId.value) return null;
-    const response = await apiClient.invoke(
-      "readProductDetail post /product/{productId}",
-      {
-        pathParams: { productId: productId.value },
-        body: searchCriteria,
-      },
-    );
-    return response.data;
-  },
-);
+const emit = defineEmits(["product-added", "variant-selected"]);
 
 const {
+  productDetails,
+  pending,
   selectedProduct,
   selectedQuantity,
   isLoading,
   addToCart,
   setSelectedProduct,
-  setSelectedExtras,
-  setDeselectedIngredients,
-} = useAddToCart();
-
-// Initialize when productDetails is loaded
-watch(
-  () => productDetails.value?.product,
-  (product) => {
-    if (product) {
-      setSelectedProduct(product);
-    }
-  },
-  { immediate: true },
-);
+  onExtrasSelected,
+  onIngredientsDeselected,
+} = useProductDetail(() => props.productId);
 
 const onVariantSwitched = (variant: Schemas["Product"]) => {
   setSelectedProduct(variant);
   emit("variant-selected", variant);
 };
 
-const onExtrasSelected = (extras: AssociationItemProduct[]) => {
-  setSelectedExtras(extras);
-};
-
-const onIngredientsDeselected = (deselected: string[]) => {
-  setDeselectedIngredients(deselected);
-};
-
 const onAddToCart = () => emit("product-added");
-
-const emit = defineEmits(["product-added", "variant-selected"]);
-
-watch(productDetails, () => {
-  if (!productDetails.value) return;
-  trackProductView(productDetails.value.product);
-});
 </script>
 
 <template>

package/app/composables/useProductConfigurator.ts

@@ -1,15 +1,12 @@
 import { computed, ref } from "vue";
 import type { Schemas } from "#shopware";
 import {
-  useShopwareContext,
   useProductConfigurator as useProductConfiguratorOriginal,
   useProduct,
 } from "@shopware/composables";
 import { getTranslatedProperty } from "@shopware/helpers";
 
 export function useProductConfigurator() {
-  const { apiClient } = useShopwareContext();
-
   const original = useProductConfiguratorOriginal();
 
   const { configurator, product } = useProduct();
@@ -18,7 +15,9 @@ export function useProductConfigurator() {
     [key: string]: string;
   }>({});
   const isLoadingOptions = ref(!!product.value.options?.length);
-  const parentProductId = computed(() => product.value?.parentId);
+  const parentProductId = computed(
+    () => product.value?.parentId ?? product.value?.id,
+  );
   const getOptionGroups = computed<Schemas["PropertyGroup"][]>(() => {
     return configurator.value || [];
   });
@@ -45,57 +44,18 @@ export function useProductConfigurator() {
   async function findVariantForSelectedOptions(options?: {
     [code: string]: string;
   }): Promise<Schemas["Product"] | undefined> {
-    const filter: Schemas["Filters"] = [
-      {
-        type: "equals",
-        field: "parentId",
-        value: parentProductId.value as string,
-      },
-      ...Object.values(options || selected.value).map(
-        (id) =>
-          ({
-            type: "equals",
-            field: "optionIds",
-            value: id,
-          }) as Schemas["EqualsFilter"],
-      ),
-    ];
+    if (!parentProductId.value) return undefined;
     try {
-      const response = await apiClient.invoke("readProduct post /product", {
-        body: {
-          filter,
-          limit: 1,
-          includes: {
-            product: [
-              "id",
-              "name",
-              "description",
-              "translated",
-              "productNumber",
-              "options",
-              "properties",
-              "calculatedPrice",
-              "translated",
-            ],
-            product_option: ["id", "groupId", "name", "translated", "group"],
-            property: ["id", "name", "translated", "options"],
-            property_group_option: ["id", "name", "translated", "group"],
-          },
-          associations: {
-            options: {
-              associations: {
-                group: {},
-              },
-            },
-            properties: {
-              associations: {
-                group: {},
-              },
-            },
+      const result = await $fetch<Schemas["Product"] | null>(
+        "/api/product/variant",
+        {
+          query: {
+            parentId: parentProductId.value,
+            optionIds: Object.values(options || selected.value),
           },
         },
-      });
-      return response.data.elements?.[0]; // return first matching product
+      );
+      return result ?? undefined;
     } catch (e) {
       console.error("SwProductDetails:findVariantForSelectedOptions", e);
       return undefined;

package/app/composables/useProductCrossSelling.ts

@@ -0,0 +1,45 @@
+import type { Schemas } from "#shopware";
+import type { AssociationItem } from "~/types/Association";
+
+const DEFAULT_CURRENCY = "EUR";
+const DEFAULT_LOCALE = "de-DE";
+const DEFAULT_ICON = "i-lucide-plus";
+
+function mapAssociationToItems(
+  associations: Schemas["CrossSellingElement"][],
+  getFormattedPrice: (price: number) => string,
+): AssociationItem[] {
+  return associations.map((crossSellingElement) => ({
+    label: crossSellingElement.crossSelling.name,
+    products: crossSellingElement.products.map(
+      (product: Schemas["Product"]) => ({
+        label: product.name,
+        value: product.id,
+        price: getFormattedPrice(product.calculatedPrice.unitPrice),
+        icon: DEFAULT_ICON,
+      }),
+    ),
+  }));
+}
+
+export function useProductCrossSelling(getProductId: () => string) {
+  const { getFormattedPrice } = usePrice({
+    currencyCode: DEFAULT_CURRENCY,
+    localeCode: DEFAULT_LOCALE,
+  });
+
+  const { data, pending: isAssociationsLoading } = useFetch<
+    Schemas["CrossSellingElement"][]
+  >(() => `/api/product/${getProductId()}/cross-selling`, {
+    key: () => `cross-selling-${getProductId()}`,
+  });
+
+  const associationItems = computed(() =>
+    mapAssociationToItems(data.value ?? [], getFormattedPrice),
+  );
+
+  return {
+    associationItems,
+    isAssociationsLoading,
+  };
+}

package/app/composables/useProductDetail.ts

@@ -0,0 +1,62 @@
+import type { Schemas } from "#shopware";
+import type { AssociationItemProduct } from "~/types/Association";
+
+export function useProductDetail(getProductId: () => string) {
+  const { trackProductView } = useTrackEvent();
+
+  const { data: productDetails, pending } = useFetch<{
+    product: Schemas["Product"];
+    configurator?: Schemas["PropertyGroup"][];
+  }>(() => `/api/product/${getProductId()}`, {
+    key: () => `product-${getProductId() ?? "none"}`,
+  });
+
+  const {
+    selectedProduct,
+    selectedQuantity,
+    isLoading,
+    addToCart,
+    setSelectedProduct,
+    setSelectedExtras,
+    setDeselectedIngredients,
+  } = useAddToCart();
+
+  watch(
+    () => productDetails.value?.product,
+    (product) => {
+      if (product) {
+        setSelectedProduct(product);
+      }
+    },
+    { immediate: true },
+  );
+
+  watch(
+    productDetails,
+    () => {
+      if (!productDetails.value) return;
+      trackProductView(productDetails.value.product);
+    },
+    { immediate: true },
+  );
+
+  const onExtrasSelected = (extras: AssociationItemProduct[]) => {
+    setSelectedExtras(extras);
+  };
+
+  const onIngredientsDeselected = (deselected: string[]) => {
+    setDeselectedIngredients(deselected);
+  };
+
+  return {
+    productDetails,
+    pending,
+    selectedProduct,
+    selectedQuantity,
+    isLoading,
+    addToCart,
+    setSelectedProduct,
+    onExtrasSelected,
+    onIngredientsDeselected,
+  };
+}

package/nuxt.config.ts

@@ -55,6 +55,13 @@ export default defineNuxtConfig({
     geoapifyApiKey: "",
     public: {
       shopBite: {
+        cacheTtl: {
+          product: 86400,
+          crossSelling: 86400,
+          listing: 86400,
+          variant: 3600,
+          category: 86400,
+        },
         menuCategoryId: "",
         feature: {
           multiChannel: false,
@@ -72,9 +79,6 @@ export default defineNuxtConfig({
   },
 
   routeRules: {
-    "/": {
-      prerender: true,
-    },
     "/merkliste": {
       ssr: false,
     },
@@ -113,8 +117,6 @@ export default defineNuxtConfig({
     experimental: { sqliteConnector: "native" },
   },
 
-  vitalizer: {},
-
   pwa: {
     strategies: sw ? "injectManifest" : "generateSW",
     srcDir: sw ? "service-worker" : undefined,

package/package.json

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

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

@@ -1,5 +1,6 @@
 import { encodeForQuery } from "@shopware/api-client/helpers";
-import type { Schemas } from "#shopware";
+import type { components } from "~~/api-types/storeApiTypes";
+type Schemas = components["schemas"];
 
 const criteria = encodeForQuery({
   includes: {
@@ -18,7 +19,7 @@ export default defineCachedEventHandler(
     });
   },
   {
-    maxAge: 86400,
+    maxAge: useRuntimeConfig().public.shopBite.cacheTtl.category,
     name: "category",
     getKey: (event) => `category-${getRouterParam(event, "categoryId")}`,
   },

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

@@ -87,7 +87,7 @@ export default defineCachedEventHandler(
     });
   },
   {
-    maxAge: 86400,
+    maxAge: useRuntimeConfig().public.shopBite.cacheTtl.listing,
     name: "listing",
     getKey: (event) => {
       const categoryId = getRouterParam(event, "categoryId") ?? "";

package/server/api/product/[productId]/cross-selling.get.ts

@@ -0,0 +1,31 @@
+import { encodeForQuery } from "@shopware/api-client/helpers";
+import type { components } from "~~/api-types/storeApiTypes";
+
+type Schemas = components["schemas"];
+
+const criteria = encodeForQuery({
+  includes: {
+    cross_selling_element: ["crossSelling", "products"],
+    cross_selling: ["name"],
+    product: ["id", "name", "calculatedPrice", "translated"],
+    calculated_price: ["unitPrice"],
+  },
+});
+
+export default defineCachedEventHandler(
+  async (event): Promise<Schemas["CrossSellingElement"][]> => {
+    const productId = getRouterParam(event, "productId")!;
+    const { endpoint, accessToken } = useRuntimeConfig().public.shopware;
+
+    return await $fetch(`${endpoint}/product/${productId}/cross-selling`, {
+      method: "POST",
+      headers: { "sw-access-key": accessToken },
+      query: { _criteria: criteria },
+    });
+  },
+  {
+    maxAge: useRuntimeConfig().public.shopBite.cacheTtl.crossSelling,
+    name: "cross-selling",
+    getKey: (event) => `cross-selling-${getRouterParam(event, "productId")}`,
+  },
+);

package/server/api/product/[productId].get.ts

@@ -0,0 +1,68 @@
+import { encodeForQuery } from "@shopware/api-client/helpers";
+import type { components } from "~~/api-types/storeApiTypes";
+
+type Schemas = components["schemas"];
+
+const criteria = encodeForQuery({
+  includes: {
+    product: [
+      "id",
+      "productNumber",
+      "name",
+      "description",
+      "calculatedPrice",
+      "translated",
+      "properties",
+      "propertyIds",
+      "options",
+      "optionIds",
+      "seoCategory",
+      "configuratorSettings",
+      "children",
+      "parentId",
+      "sortedProperties",
+      "cover",
+    ],
+    property: ["id", "name", "translated", "options"],
+    property_group_option: ["id", "name", "translated", "group"],
+    product_configurator_setting: ["id", "optionId", "option", "productId"],
+    product_option: ["id", "groupId", "name", "translated", "group"],
+    category: ["id", "name", "translated"],
+  },
+  associations: {
+    cover: { associations: { media: {} } },
+    properties: { associations: { group: {} } },
+    options: { associations: { group: {} } },
+    configuratorSettings: {
+      associations: { option: { associations: { group: {} } } },
+    },
+    children: {
+      associations: {
+        properties: { associations: { group: {} } },
+        options: { associations: { group: {} } },
+      },
+    },
+  },
+});
+
+export default defineCachedEventHandler(
+  async (
+    event,
+  ): Promise<{
+    product: Schemas["Product"];
+    configurator?: Schemas["PropertyGroup"][];
+  }> => {
+    const productId = getRouterParam(event, "productId")!;
+    const { endpoint, accessToken } = useRuntimeConfig().public.shopware;
+
+    return await $fetch(`${endpoint}/product/${productId}`, {
+      headers: { "sw-access-key": accessToken },
+      query: { _criteria: criteria },
+    });
+  },
+  {
+    maxAge: useRuntimeConfig().public.shopBite.cacheTtl.product,
+    name: "product",
+    getKey: (event) => `product-${getRouterParam(event, "productId")}`,
+  },
+);

package/server/api/product/variant.get.ts

@@ -0,0 +1,99 @@
+import type { components } from "~~/api-types/storeApiTypes";
+
+type Schemas = components["schemas"];
+
+const MAX_OPTION_IDS = 20;
+const MAX_OPTION_ID_LENGTH = 64;
+
+function parseOptionIds(raw: unknown): string[] {
+  const arr = Array.isArray(raw) ? raw : [raw];
+  const seen = new Set<string>();
+  for (const v of arr) {
+    if (
+      typeof v !== "string" ||
+      v.trim() === "" ||
+      v.length > MAX_OPTION_ID_LENGTH
+    )
+      continue;
+    seen.add(v);
+    if (seen.size >= MAX_OPTION_IDS) break;
+  }
+  return [...seen];
+}
+
+export default defineCachedEventHandler(
+  async (event): Promise<Schemas["Product"] | null> => {
+    const { parentId, optionIds: rawOptionIds } = getQuery(event);
+
+    if (typeof parentId !== "string" || parentId.trim() === "") {
+      throw createError({
+        statusCode: 400,
+        message: "Missing or invalid parentId",
+      });
+    }
+
+    const optionIds = parseOptionIds(rawOptionIds);
+    if (optionIds.length === 0) {
+      throw createError({
+        statusCode: 400,
+        message: "At least one optionId is required",
+      });
+    }
+
+    const { endpoint, accessToken } = useRuntimeConfig().public.shopware;
+
+    const filter: Schemas["Filters"] = [
+      { type: "equals", field: "parentId", value: parentId },
+      ...optionIds.map(
+        (id) =>
+          ({
+            type: "equals",
+            field: "optionIds",
+            value: id,
+          }) as Schemas["EqualsFilter"],
+      ),
+    ];
+
+    const response = await $fetch<{ elements?: Schemas["Product"][] }>(
+      `${endpoint}/product`,
+      {
+        method: "POST",
+        headers: { "sw-access-key": accessToken },
+        body: {
+          filter,
+          limit: 1,
+          includes: {
+            product: [
+              "id",
+              "name",
+              "description",
+              "translated",
+              "productNumber",
+              "options",
+              "properties",
+              "calculatedPrice",
+            ],
+            product_option: ["id", "groupId", "name", "translated", "group"],
+            property: ["id", "name", "translated", "options"],
+            property_group_option: ["id", "name", "translated", "group"],
+          },
+          associations: {
+            options: { associations: { group: {} } },
+            properties: { associations: { group: {} } },
+          },
+        },
+      },
+    );
+
+    return response.elements?.[0] ?? null;
+  },
+  {
+    maxAge: useRuntimeConfig().public.shopBite.cacheTtl.variant,
+    name: "variant",
+    getKey: (event) => {
+      const { parentId, optionIds } = getQuery(event);
+      const ids = parseOptionIds(optionIds).sort();
+      return `variant-${parentId}-${ids.join("|")}`;
+    },
+  },
+);

package/test/nuxt/useProductConfigurator.test.ts

@@ -1,19 +1,15 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { useProductConfigurator } from "../../app/composables/useProductConfigurator";
 
-const { mockInvoke, mockConfigurator, mockProduct } = vi.hoisted(() => ({
-  mockInvoke: vi.fn(),
+const { mockFetch, mockConfigurator, mockProduct } = vi.hoisted(() => ({
+  mockFetch: vi.fn(),
   mockConfigurator: { value: [] },
   mockProduct: { value: { id: "p1", optionIds: [], options: [] } },
 }));
 
-// Use vi.mock for explicit imports
+vi.stubGlobal("$fetch", mockFetch);
+
 vi.mock("@shopware/composables", () => ({
-  useShopwareContext: () => ({
-    apiClient: {
-      invoke: mockInvoke,
-    },
-  }),
   useProductConfigurator: () => ({
     handleChange: vi.fn(),
   }),
@@ -57,24 +53,25 @@ describe("useProductConfigurator", () => {
     mockProduct.value = {
       parentId: "parent-1",
     } as unknown as typeof mockProduct.value;
-    mockInvoke.mockResolvedValue({
-      data: {
-        elements: [{ id: "variant-1" }],
-      },
-    });
+    mockFetch.mockResolvedValue({ id: "variant-1" });
 
     const { findVariantForSelectedOptions } = useProductConfigurator();
     const result = await findVariantForSelectedOptions({ Size: "o1" });
 
-    expect(mockInvoke).toHaveBeenCalledWith(
-      "readProduct post /product",
-      expect.any(Object),
+    expect(mockFetch).toHaveBeenCalledWith(
+      "/api/product/variant",
+      expect.objectContaining({
+        query: {
+          parentId: "parent-1",
+          optionIds: ["o1"],
+        },
+      }),
     );
     expect(result).toEqual({ id: "variant-1" });
   });
 
   it("should return undefined on error in findVariantForSelectedOptions", async () => {
-    mockInvoke.mockRejectedValue(new Error("API Error"));
+    mockFetch.mockRejectedValue(new Error("API Error"));
     const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
 
     const { findVariantForSelectedOptions } = useProductConfigurator();