@shopware/cms-base-layer 3.0.1 → 4.0.0

package/app/components/SwProductListingFilters.vue

@@ -4,12 +4,22 @@ import type {
   CmsElementSidebarFilter,
 } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
+import { getCategoryFilterPostFilter } from "@shopware/helpers";
 import { defu } from "defu";
-import { computed, reactive } from "vue";
-import type { ComputedRef, UnwrapNestedRefs } from "vue";
+import { computed } from "vue";
+import type { ComputedRef } from "vue";
 import type { LocationQueryRaw } from "vue-router";
 
-import { useCategoryListing, useRoute, useRouter } from "#imports";
+import {
+  firstQueryValue,
+  getVisibleListingFilters,
+  toNumber,
+  useCategoryListing,
+  useProductSearchListing,
+  useRoute,
+  useRouter,
+  useSelectedListingFilters,
+} from "#imports";
 import type { Schemas, operations } from "#shopware";
 
 const props = defineProps<{
@@ -17,6 +27,8 @@ const props = defineProps<{
   listingType?: string;
 }>();
 
+const isProductSearch = props.listingType === "productSearchListing";
+
 type Translations = {
   listing: {
     filters: string;
@@ -25,15 +37,6 @@ type Translations = {
   };
 };
 
-type FilterState = {
-  manufacturer: Set<string>;
-  properties: Set<string>;
-  "min-price": number | undefined;
-  "max-price": number | undefined;
-  rating: number | undefined;
-  "shipping-free": boolean | undefined;
-};
-
 let translations: Translations = {
   listing: {
     filters: "Filters",
@@ -54,22 +57,21 @@ const {
   getInitialFilters,
   getSortingOrders,
   search,
-} = useCategoryListing();
+} = isProductSearch ? useProductSearchListing() : useCategoryListing();
 
-const sidebarSelectedFilters: UnwrapNestedRefs<FilterState> =
-  reactive<FilterState>({
-    manufacturer: new Set(),
-    properties: new Set(),
-    "min-price": undefined,
-    "max-price": undefined,
-    rating: undefined,
-    "shipping-free": undefined,
-  });
+const sidebarSelectedFilters = useSelectedListingFilters();
+
+// Only the filters this listing can actually apply - the category filter is
+// search-only, matching the post-filter and URL gates below.
+const visibleFilters = computed(() =>
+  getVisibleListingFilters(getInitialFilters.value, { isProductSearch }),
+);
 
 const showResetFiltersButton = computed<boolean>(() => {
   if (
     sidebarSelectedFilters.manufacturer.size !== 0 ||
     sidebarSelectedFilters.properties.size !== 0 ||
+    (isProductSearch && sidebarSelectedFilters.categories.size !== 0) ||
     sidebarSelectedFilters["max-price"] ||
     sidebarSelectedFilters["min-price"] ||
     sidebarSelectedFilters.rating ||
@@ -89,56 +91,28 @@ const searchCriteriaForRequest: ComputedRef<Schemas["ProductListingCriteria"]> =
     properties: [...(sidebarSelectedFilters.properties as Set<string>)]?.join(
       "|",
     ),
+    // Category selection travels as a post-filter so the category
+    // aggregation itself is not reduced (faceted behavior). Search pages
+    // only: category pages never offer this filter, so a stale
+    // ?categories= param must not silently narrow them.
+    ...(isProductSearch && sidebarSelectedFilters.categories.size > 0
+      ? {
+          "post-filter": [
+            getCategoryFilterPostFilter([
+              ...(sidebarSelectedFilters.categories as Set<string>),
+            ]),
+          ],
+        }
+      : {}),
     "min-price": sidebarSelectedFilters["min-price"] as number,
     "max-price": sidebarSelectedFilters["max-price"] as number,
     order: getCurrentSortingOrder.value as string,
     "shipping-free": sidebarSelectedFilters["shipping-free"] as boolean,
     rating: sidebarSelectedFilters.rating as number,
-    search: "",
-    limit: route.query.limit ? Number(route.query.limit) : 15,
+    search: isProductSearch ? (firstQueryValue(route.query.search) ?? "") : "",
+    limit: toNumber(firstQueryValue(route.query.limit)) ?? 15,
   }));
 
-for (const param in route.query) {
-  if (param in sidebarSelectedFilters) {
-    const queryValue = route.query[param];
-
-    // Skip arrays
-    if (Array.isArray(queryValue)) continue;
-
-    if (["manufacturer", "properties"].includes(param)) {
-      if (typeof queryValue === "string") {
-        const elements = queryValue.split("|");
-        const targetSet = sidebarSelectedFilters[
-          param as keyof FilterState
-        ] as Set<string>;
-        for (const element of elements) {
-          targetSet.add(element);
-        }
-      }
-    } else if (queryValue && typeof queryValue === "string") {
-      // Fix: Use specific property assignments instead of generic keyof
-      if (param === "min-price") {
-        const numValue = Number(queryValue);
-        if (!Number.isNaN(numValue)) {
-          sidebarSelectedFilters["min-price"] = numValue;
-        }
-      } else if (param === "max-price") {
-        const numValue = Number(queryValue);
-        if (!Number.isNaN(numValue)) {
-          sidebarSelectedFilters["max-price"] = numValue;
-        }
-      } else if (param === "rating") {
-        const numValue = Number(queryValue);
-        if (!Number.isNaN(numValue)) {
-          sidebarSelectedFilters.rating = numValue;
-        }
-      } else if (param === "shipping-free") {
-        sidebarSelectedFilters["shipping-free"] = queryValue === "true";
-      }
-    }
-  }
-}
-
 const handleFilterChange = async (event: {
   code: string;
   value: string | number | boolean;
@@ -146,7 +120,11 @@ const handleFilterChange = async (event: {
   try {
     const { code, value } = event;
 
-    if (code === "manufacturer" || code === "properties") {
+    if (
+      code === "manufacturer" ||
+      code === "properties" ||
+      code === "categories"
+    ) {
       const filterSet = sidebarSelectedFilters[code];
       const stringValue = String(value);
 
@@ -172,7 +150,12 @@ const handleFilterChange = async (event: {
 
 const executeSearch = async () => {
   try {
-    await search(searchCriteriaForRequest.value);
+    // Search context refetches from the URL (the page's useAsyncData watches
+    // route.query), so navigating below is enough; calling search() here too
+    // would double-fetch and flicker. Category listings have no URL watcher.
+    if (!isProductSearch) {
+      await search(searchCriteriaForRequest.value);
+    }
 
     // Build query directly from searchCriteriaForRequest which already has pipe-separated strings
     const criteria = searchCriteriaForRequest.value;
@@ -180,12 +163,22 @@ const executeSearch = async () => {
 
     if (criteria.manufacturer) query.manufacturer = criteria.manufacturer;
     if (criteria.properties) query.properties = criteria.properties;
+    if (isProductSearch && sidebarSelectedFilters.categories.size > 0)
+      query.categories = [
+        ...(sidebarSelectedFilters.categories as Set<string>),
+      ].join("|");
     if (criteria["min-price"]) query["min-price"] = criteria["min-price"];
     if (criteria["max-price"]) query["max-price"] = criteria["max-price"];
     if (criteria.rating) query.rating = criteria.rating;
     if (criteria["shipping-free"])
       query["shipping-free"] = criteria["shipping-free"];
     if (criteria.order) query.order = criteria.order;
+    // Keep the search term in the URL so filtering on the search page does not reset the query
+    if (isProductSearch && route.query.search)
+      query.search = route.query.search;
+    // Preserve the page-size selection; rebuilding the query from scratch would
+    // otherwise drop `limit` and revert to the default on refresh/navigation.
+    if (route.query.limit) query.limit = route.query.limit;
 
     await router.push({
       query: query as LocationQueryRaw,
@@ -198,6 +191,7 @@ const executeSearch = async () => {
 const clearFilters = () => {
   (sidebarSelectedFilters.manufacturer as Set<string>).clear();
   (sidebarSelectedFilters.properties as Set<string>).clear();
+  (sidebarSelectedFilters.categories as Set<string>).clear();
   sidebarSelectedFilters["min-price"] = undefined;
   sidebarSelectedFilters["max-price"] = undefined;
   sidebarSelectedFilters.rating = undefined;
@@ -215,10 +209,13 @@ const currentSortingOrder = computed({
         },
       });
 
-      await changeCurrentSortingOrder(order, {
-        ...(route.query as unknown as operations["searchPage post /search"]["body"]),
-        limit: route.query.limit ? Number(route.query.limit) : 15,
-      });
+      // Search context refetches from the URL; category fetches directly.
+      if (!isProductSearch) {
+        await changeCurrentSortingOrder(order, {
+          ...(route.query as unknown as operations["searchPage post /search"]["body"]),
+          limit: toNumber(firstQueryValue(route.query.limit)) ?? 15,
+        });
+      }
     } catch (error) {
       console.error("Sorting order change failed:", error);
     }
@@ -242,7 +239,11 @@ const handleRemoveFilterChip = async (chip: {
   code: string;
   value: string | number;
 }) => {
-  if (chip.code === "properties" || chip.code === "manufacturer") {
+  if (
+    chip.code === "properties" ||
+    chip.code === "manufacturer" ||
+    chip.code === "categories"
+  ) {
     const filterSet = sidebarSelectedFilters[chip.code] as Set<string>;
     filterSet.delete(String(chip.value));
   } else if (chip.code === "price") {
@@ -262,7 +263,7 @@ const handleRemoveFilterChip = async (chip: {
     <!-- Active Filter Chips -->
     <SwFilterChips
       :filters="sidebarSelectedFilters"
-      :available-filters="getInitialFilters"
+      :available-filters="visibleFilters"
       @remove="handleRemoveFilterChip"
     />
 
@@ -288,11 +289,12 @@ const handleRemoveFilterChip = async (chip: {
     <!-- Filters List -->
     <div class="self-stretch flex flex-col justify-start items-start gap-4">
       <SwProductListingFilter
-        v-for="filter in getInitialFilters"
+        v-for="filter in visibleFilters"
         :key="filter.id"
         :filter="filter"
         :selected-manufacturer="sidebarSelectedFilters.manufacturer"
         :selected-properties="sidebarSelectedFilters.properties"
+        :selected-categories="sidebarSelectedFilters.categories"
         :selected-min-price="sidebarSelectedFilters['min-price']"
         :selected-max-price="sidebarSelectedFilters['max-price']"
         :selected-rating="sidebarSelectedFilters.rating"

package/app/components/SwProductListingFiltersHorizontal.vue

@@ -4,12 +4,22 @@ import type {
   CmsElementSidebarFilter,
 } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
+import { getCategoryFilterPostFilter } from "@shopware/helpers";
 import { defu } from "defu";
-import { computed, reactive } from "vue";
-import type { ComputedRef, UnwrapNestedRefs } from "vue";
+import { computed } from "vue";
+import type { ComputedRef } from "vue";
 import type { LocationQueryRaw } from "vue-router";
 
-import { useCategoryListing, useRoute, useRouter } from "#imports";
+import {
+  firstQueryValue,
+  getVisibleListingFilters,
+  toNumber,
+  useCategoryListing,
+  useProductSearchListing,
+  useRoute,
+  useRouter,
+  useSelectedListingFilters,
+} from "#imports";
 import type { Schemas, operations } from "#shopware";
 
 const props = defineProps<{
@@ -17,6 +27,8 @@ const props = defineProps<{
   listingType?: string;
 }>();
 
+const isProductSearch = props.listingType === "productSearchListing";
+
 type Translations = {
   listing: {
     filters: string;
@@ -25,15 +37,6 @@ type Translations = {
   };
 };
 
-type FilterState = {
-  manufacturer: Set<string>;
-  properties: Set<string>;
-  "min-price": number | undefined;
-  "max-price": number | undefined;
-  rating: number | undefined;
-  "shipping-free": boolean | undefined;
-};
-
 let translations: Translations = {
   listing: {
     filters: "Filters",
@@ -53,22 +56,21 @@ const {
   getInitialFilters,
   getSortingOrders,
   search,
-} = useCategoryListing();
+} = isProductSearch ? useProductSearchListing() : useCategoryListing();
 
-const sidebarSelectedFilters: UnwrapNestedRefs<FilterState> =
-  reactive<FilterState>({
-    manufacturer: new Set(),
-    properties: new Set(),
-    "min-price": undefined,
-    "max-price": undefined,
-    rating: undefined,
-    "shipping-free": undefined,
-  });
+const sidebarSelectedFilters = useSelectedListingFilters();
+
+// Only the filters this listing can actually apply - the category filter is
+// search-only, matching the post-filter and URL gates below.
+const visibleFilters = computed(() =>
+  getVisibleListingFilters(getInitialFilters.value, { isProductSearch }),
+);
 
 const showResetFiltersButton = computed<boolean>(() => {
   if (
     sidebarSelectedFilters.manufacturer.size !== 0 ||
     sidebarSelectedFilters.properties.size !== 0 ||
+    (isProductSearch && sidebarSelectedFilters.categories.size !== 0) ||
     sidebarSelectedFilters["max-price"] ||
     sidebarSelectedFilters["min-price"] ||
     sidebarSelectedFilters.rating ||
@@ -88,56 +90,28 @@ const searchCriteriaForRequest: ComputedRef<Schemas["ProductListingCriteria"]> =
     properties: [...(sidebarSelectedFilters.properties as Set<string>)]?.join(
       "|",
     ),
+    // Category selection travels as a post-filter so the category
+    // aggregation itself is not reduced (faceted behavior). Search pages
+    // only: category pages never offer this filter, so a stale
+    // ?categories= param must not silently narrow them.
+    ...(isProductSearch && sidebarSelectedFilters.categories.size > 0
+      ? {
+          "post-filter": [
+            getCategoryFilterPostFilter([
+              ...(sidebarSelectedFilters.categories as Set<string>),
+            ]),
+          ],
+        }
+      : {}),
     "min-price": sidebarSelectedFilters["min-price"] as number,
     "max-price": sidebarSelectedFilters["max-price"] as number,
     order: getCurrentSortingOrder.value as string,
     "shipping-free": sidebarSelectedFilters["shipping-free"] as boolean,
     rating: sidebarSelectedFilters.rating as number,
-    search: "",
-    limit: route.query.limit ? Number(route.query.limit) : 15,
+    search: isProductSearch ? (firstQueryValue(route.query.search) ?? "") : "",
+    limit: toNumber(firstQueryValue(route.query.limit)) ?? 15,
   }));
 
-for (const param in route.query) {
-  if (param in sidebarSelectedFilters) {
-    const queryValue = route.query[param];
-
-    // Skip arrays
-    if (Array.isArray(queryValue)) continue;
-
-    if (["manufacturer", "properties"].includes(param)) {
-      if (typeof queryValue === "string") {
-        const elements = queryValue.split("|");
-        const targetSet = sidebarSelectedFilters[
-          param as keyof FilterState
-        ] as Set<string>;
-        for (const element of elements) {
-          targetSet.add(element);
-        }
-      }
-    } else if (queryValue && typeof queryValue === "string") {
-      // Fix: Use specific property assignments instead of generic keyof
-      if (param === "min-price") {
-        const numValue = Number(queryValue);
-        if (!Number.isNaN(numValue)) {
-          sidebarSelectedFilters["min-price"] = numValue;
-        }
-      } else if (param === "max-price") {
-        const numValue = Number(queryValue);
-        if (!Number.isNaN(numValue)) {
-          sidebarSelectedFilters["max-price"] = numValue;
-        }
-      } else if (param === "rating") {
-        const numValue = Number(queryValue);
-        if (!Number.isNaN(numValue)) {
-          sidebarSelectedFilters.rating = numValue;
-        }
-      } else if (param === "shipping-free") {
-        sidebarSelectedFilters["shipping-free"] = queryValue === "true";
-      }
-    }
-  }
-}
-
 const handleFilterChange = async (event: {
   code: string;
   value: string | number | boolean;
@@ -145,7 +119,11 @@ const handleFilterChange = async (event: {
   try {
     const { code, value } = event;
 
-    if (code === "manufacturer" || code === "properties") {
+    if (
+      code === "manufacturer" ||
+      code === "properties" ||
+      code === "categories"
+    ) {
       const filterSet = sidebarSelectedFilters[code];
       const stringValue = String(value);
 
@@ -171,7 +149,12 @@ const handleFilterChange = async (event: {
 
 const executeSearch = async () => {
   try {
-    await search(searchCriteriaForRequest.value);
+    // Search context refetches from the URL (the page's useAsyncData watches
+    // route.query), so navigating below is enough; calling search() here too
+    // would double-fetch and flicker. Category listings have no URL watcher.
+    if (!isProductSearch) {
+      await search(searchCriteriaForRequest.value);
+    }
 
     // Build query directly from searchCriteriaForRequest which already has pipe-separated strings
     const criteria = searchCriteriaForRequest.value;
@@ -179,12 +162,22 @@ const executeSearch = async () => {
 
     if (criteria.manufacturer) query.manufacturer = criteria.manufacturer;
     if (criteria.properties) query.properties = criteria.properties;
+    if (isProductSearch && sidebarSelectedFilters.categories.size > 0)
+      query.categories = [
+        ...(sidebarSelectedFilters.categories as Set<string>),
+      ].join("|");
     if (criteria["min-price"]) query["min-price"] = criteria["min-price"];
     if (criteria["max-price"]) query["max-price"] = criteria["max-price"];
     if (criteria.rating) query.rating = criteria.rating;
     if (criteria["shipping-free"])
       query["shipping-free"] = criteria["shipping-free"];
     if (criteria.order) query.order = criteria.order;
+    // Keep the search term in the URL so filtering on the search page does not reset the query
+    if (isProductSearch && route.query.search)
+      query.search = route.query.search;
+    // Preserve the page-size selection; rebuilding the query from scratch would
+    // otherwise drop `limit` and revert to the default on refresh/navigation.
+    if (route.query.limit) query.limit = route.query.limit;
 
     await router.push({
       query: query as LocationQueryRaw,
@@ -197,6 +190,7 @@ const executeSearch = async () => {
 const clearFilters = () => {
   (sidebarSelectedFilters.manufacturer as Set<string>).clear();
   (sidebarSelectedFilters.properties as Set<string>).clear();
+  (sidebarSelectedFilters.categories as Set<string>).clear();
   sidebarSelectedFilters["min-price"] = undefined;
   sidebarSelectedFilters["max-price"] = undefined;
   sidebarSelectedFilters.rating = undefined;
@@ -214,10 +208,13 @@ const currentSortingOrder = computed({
         },
       });
 
-      await changeCurrentSortingOrder(order, {
-        ...(route.query as unknown as operations["searchPage post /search"]["body"]),
-        limit: route.query.limit ? Number(route.query.limit) : 15,
-      });
+      // Search context refetches from the URL; category fetches directly.
+      if (!isProductSearch) {
+        await changeCurrentSortingOrder(order, {
+          ...(route.query as unknown as operations["searchPage post /search"]["body"]),
+          limit: toNumber(firstQueryValue(route.query.limit)) ?? 15,
+        });
+      }
     } catch (error) {
       console.error("Sorting order change failed:", error);
     }
@@ -242,6 +239,9 @@ const hasActiveFilter = (filter: { code: string }) => {
   if (filter.code === "manufacturer") {
     return sidebarSelectedFilters.manufacturer.size > 0;
   }
+  if (filter.code === "categories") {
+    return sidebarSelectedFilters.categories.size > 0;
+  }
   if (filter.code === "price") {
     return (
       sidebarSelectedFilters["min-price"] !== undefined ||
@@ -265,7 +265,7 @@ const hasActiveFilter = (filter: { code: string }) => {
     <div class="flex flex-wrap items-center justify-start gap-4 z-10">
       <!-- Filter dropdowns -->
       <SwFilterDropdown
-        v-for="filter in getInitialFilters"
+        v-for="filter in visibleFilters"
         :key="filter.id"
         :label="filter.label"
         :is-active="hasActiveFilter(filter)"
@@ -275,6 +275,7 @@ const hasActiveFilter = (filter: { code: string }) => {
           display-mode="dropdown"
           :selected-manufacturer="sidebarSelectedFilters.manufacturer"
           :selected-properties="sidebarSelectedFilters.properties"
+          :selected-categories="sidebarSelectedFilters.categories"
           :selected-min-price="sidebarSelectedFilters['min-price']"
           :selected-max-price="sidebarSelectedFilters['max-price']"
           :selected-rating="sidebarSelectedFilters.rating"

package/app/components/SwStockInfo.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { getTranslatedProperty } from "@shopware/helpers";
 import { defu } from "defu";
 
 import { useCmsTranslations } from "#imports";
@@ -37,13 +38,15 @@ translations = defu(useCmsTranslations(), translations) as Translations;
     ></div>
     <div class="w-2 h-2 bg-states-error rounded-full" v-else></div>
     <span v-if="availableStock >= minPurchase && deliveryTime"
-      >{{ translations.product.deliveryTime }} {{ deliveryTime?.name }}
+      >{{ translations.product.deliveryTime }}
+      {{ getTranslatedProperty(deliveryTime, "name") }}
     </span>
     <span
       v-else-if="availableStock < minPurchase && deliveryTime && restockTime"
     >
       {{ translations.product.deliveryTime }} {{ restockTime }}
-      {{ translations.product.days }} {{ deliveryTime?.name }}</span
+      {{ translations.product.days }}
+      {{ getTranslatedProperty(deliveryTime, "name") }}</span
     >
     <span v-else>{{ translations.product.noAvailable }}</span>
   </div>

package/app/components/SwVariantConfigurator.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { useCmsTranslations } from "@shopware/composables";
-import { buildUrlPrefix, getProductRoute } from "@shopware/helpers";
+import {
+  buildUrlPrefix,
+  getProductRoute,
+  getTranslatedProperty,
+} from "@shopware/helpers";
 import { defu } from "defu";
 import { computed, ref, unref } from "vue";
 import type { ComputedRef } from "vue";
@@ -86,11 +90,12 @@ const onHandleChange = async () => {
       class="mt-6"
     >
       <div class="text-sm text-gray-900 font-medium">
-        {{ optionGroup.name }}
+        {{ getTranslatedProperty(optionGroup, "name") }}
       </div>
       <fieldset class="mt-4 flex-1">
         <legend class="sr-only">
-          {{ translations.product.chooseA }} {{ optionGroup.name }}
+          {{ translations.product.chooseA }}
+          {{ getTranslatedProperty(optionGroup, "name") }}
         </legend>
         <div class="flex gap-3">
           <label