@shopbite-de/storefront 1.18.5 → 1.20.0

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/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/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

@@ -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,
@@ -110,10 +117,6 @@ export default defineNuxtConfig({
     experimental: { sqliteConnector: "native" },
   },
 
-  vitalizer: {
-    disablePrefetchLinks: true,
-  },
-
   pwa: {
     strategies: sw ? "injectManifest" : "generateSW",
     srcDir: sw ? "service-worker" : undefined,
@@ -123,6 +126,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.20.0",
   "main": "nuxt.config.ts",
   "description": "Shopware storefront for food delivery shops",
   "keywords": [

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

@@ -0,0 +1,26 @@
+import { encodeForQuery } from "@shopware/api-client/helpers";
+import type { components } from "~~/api-types/storeApiTypes";
+type Schemas = components["schemas"];
+
+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: useRuntimeConfig().public.shopBite.cacheTtl.category,
+    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: useRuntimeConfig().public.shopBite.cacheTtl.listing,
+    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("|");
+    },
+  },
+);

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")}`,
+  },
+);