@shopware/cms-base-layer 3.1.0 → 4.1.0

package/app/components/SwProductListingFilter.vue

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import type { Component } from "vue";
 
+import SwFilterCategoriesVue from "./listing-filters/SwFilterCategories.vue";
 import SwFilterPriceVue from "./listing-filters/SwFilterPrice.vue";
 import SwFilterPropertiesVue from "./listing-filters/SwFilterProperties.vue";
 import SwFilterRatingVue from "./listing-filters/SwFilterRating.vue";
@@ -11,6 +12,7 @@ const {
   filter,
   selectedManufacturer,
   selectedProperties,
+  selectedCategories = new Set<string>(),
   selectedMinPrice,
   selectedMaxPrice,
   selectedRating,
@@ -20,6 +22,7 @@ const {
   filter: ListingFilter;
   selectedManufacturer: Set<string>;
   selectedProperties: Set<string>;
+  selectedCategories?: Set<string>;
   selectedMinPrice: number | undefined;
   selectedMaxPrice: number | undefined;
   selectedRating: number | undefined;
@@ -40,11 +43,13 @@ const transformedFilters = computed(() => ({
   "shipping-free": selectedShippingFree,
   manufacturer: [...selectedManufacturer],
   properties: [...selectedProperties],
+  categories: [...selectedCategories],
 }));
 
 const filterComponent = computed<Component | undefined>(() => {
   const componentMap: Record<string, Component> = {
     manufacturer: SwFilterPropertiesVue,
+    categories: SwFilterCategoriesVue,
     price: SwFilterPriceVue,
     rating: SwFilterRatingVue,
     "shipping-free": SwFilterShippingFreeVue,
@@ -67,7 +72,7 @@ const handleSelectValue = ({
 };
 </script>
 <template>
-  <div>
+  <div :data-testid="`listing-filter-${filter.code}`">
     <component
       :is="filterComponent"
       :filter="filter"

package/app/components/SwProductListingFilters.vue

@@ -5,20 +5,8 @@ import type {
 } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
-import { computed } from "vue";
-import type { ComputedRef } from "vue";
-import type { LocationQueryRaw } from "vue-router";
 
-import {
-  firstQueryValue,
-  toNumber,
-  useCategoryListing,
-  useProductSearchListing,
-  useRoute,
-  useRouter,
-  useSelectedListingFilters,
-} from "#imports";
-import type { Schemas, operations } from "#shopware";
+import { useListingFilters } from "#imports";
 
 const props = defineProps<{
   content?: CmsElementProductListing | CmsElementSidebarFilter;
@@ -45,190 +33,25 @@ let translations: Translations = {
 
 translations = defu(useCmsTranslations(), translations) as Translations;
 
-const route = useRoute();
-const router = useRouter();
-
 const {
-  changeCurrentSortingOrder,
-  getCurrentFilters,
+  currentSortingOrder,
   getCurrentSortingOrder,
-  getInitialFilters,
   getSortingOrders,
-  search,
-} = isProductSearch ? useProductSearchListing() : useCategoryListing();
-
-const sidebarSelectedFilters = useSelectedListingFilters();
-
-const showResetFiltersButton = computed<boolean>(() => {
-  if (
-    sidebarSelectedFilters.manufacturer.size !== 0 ||
-    sidebarSelectedFilters.properties.size !== 0 ||
-    sidebarSelectedFilters["max-price"] ||
-    sidebarSelectedFilters["min-price"] ||
-    sidebarSelectedFilters.rating ||
-    sidebarSelectedFilters["shipping-free"]
-  ) {
-    return true;
-  }
-
-  return false;
-});
-
-const searchCriteriaForRequest: ComputedRef<Schemas["ProductListingCriteria"]> =
-  computed(() => ({
-    manufacturer: [
-      ...(sidebarSelectedFilters.manufacturer as Set<string>),
-    ]?.join("|"),
-    properties: [...(sidebarSelectedFilters.properties as Set<string>)]?.join(
-      "|",
-    ),
-    "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: isProductSearch ? (firstQueryValue(route.query.search) ?? "") : "",
-    limit: toNumber(firstQueryValue(route.query.limit)) ?? 15,
-  }));
-
-const handleFilterChange = async (event: {
-  code: string;
-  value: string | number | boolean;
-}) => {
-  try {
-    const { code, value } = event;
-
-    if (code === "manufacturer" || code === "properties") {
-      const filterSet = sidebarSelectedFilters[code];
-      const stringValue = String(value);
-
-      if (filterSet.has(stringValue)) {
-        filterSet.delete(stringValue);
-      } else {
-        filterSet.add(stringValue);
-      }
-    } else if (code === "min-price" || code === "max-price") {
-      sidebarSelectedFilters[code] =
-        typeof value === "number" ? value : Number(value);
-    } else if (code === "rating") {
-      sidebarSelectedFilters.rating = Number(value);
-    } else if (code === "shipping-free") {
-      sidebarSelectedFilters["shipping-free"] = Boolean(value);
-    }
-
-    await executeSearch();
-  } catch (error) {
-    console.error("Filter update failed:", error);
-  }
-};
-
-const executeSearch = async () => {
-  try {
-    // 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;
-    const query: Record<string, unknown> = {};
-
-    if (criteria.manufacturer) query.manufacturer = criteria.manufacturer;
-    if (criteria.properties) query.properties = criteria.properties;
-    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,
-    });
-  } catch (error) {
-    console.error("Search execution failed:", error);
-  }
-};
-
-const clearFilters = () => {
-  (sidebarSelectedFilters.manufacturer as Set<string>).clear();
-  (sidebarSelectedFilters.properties as Set<string>).clear();
-  sidebarSelectedFilters["min-price"] = undefined;
-  sidebarSelectedFilters["max-price"] = undefined;
-  sidebarSelectedFilters.rating = undefined;
-  sidebarSelectedFilters["shipping-free"] = undefined;
-};
-
-const currentSortingOrder = computed({
-  get: (): string => getCurrentSortingOrder.value || "",
-  set: async (order: string): Promise<void> => {
-    try {
-      await router.push({
-        query: {
-          ...route.query,
-          order,
-        },
-      });
-
-      // 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);
-    }
-  },
-});
-
-async function invokeCleanFilters() {
-  try {
-    clearFilters();
-    await executeSearch();
-  } catch (error) {
-    console.error("Clear filters failed:", error);
-  }
-}
-
-const handleSortChange = (sortKey: string) => {
-  currentSortingOrder.value = sortKey;
-};
-
-const handleRemoveFilterChip = async (chip: {
-  code: string;
-  value: string | number;
-}) => {
-  if (chip.code === "properties" || chip.code === "manufacturer") {
-    const filterSet = sidebarSelectedFilters[chip.code] as Set<string>;
-    filterSet.delete(String(chip.value));
-  } else if (chip.code === "price") {
-    sidebarSelectedFilters["min-price"] = undefined;
-    sidebarSelectedFilters["max-price"] = undefined;
-  } else if (chip.code === "rating") {
-    sidebarSelectedFilters.rating = undefined;
-  } else if (chip.code === "shipping-free") {
-    sidebarSelectedFilters["shipping-free"] = undefined;
-  }
-
-  await executeSearch();
-};
+  handleFilterChange,
+  handleRemoveFilterChip,
+  handleSortChange,
+  invokeCleanFilters,
+  selectedFilters: sidebarSelectedFilters,
+  showResetFiltersButton,
+  visibleFilters,
+} = useListingFilters(isProductSearch);
 </script>
 <template>
   <div>
     <!-- Active Filter Chips -->
     <SwFilterChips
       :filters="sidebarSelectedFilters"
-      :available-filters="getInitialFilters"
+      :available-filters="visibleFilters"
       @remove="handleRemoveFilterChip"
     />
 
@@ -254,11 +77,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

@@ -5,20 +5,8 @@ import type {
 } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
-import { computed } from "vue";
-import type { ComputedRef } from "vue";
-import type { LocationQueryRaw } from "vue-router";
 
-import {
-  firstQueryValue,
-  toNumber,
-  useCategoryListing,
-  useProductSearchListing,
-  useRoute,
-  useRouter,
-  useSelectedListingFilters,
-} from "#imports";
-import type { Schemas, operations } from "#shopware";
+import { useListingFilters } from "#imports";
 
 const props = defineProps<{
   content: CmsElementProductListing | CmsElementSidebarFilter;
@@ -45,169 +33,27 @@ let translations: Translations = {
 
 translations = defu(useCmsTranslations(), translations) as Translations;
 
-const route = useRoute();
-const router = useRouter();
-
 const {
-  changeCurrentSortingOrder,
+  currentSortingOrder,
   getCurrentSortingOrder,
-  getInitialFilters,
   getSortingOrders,
-  search,
-} = isProductSearch ? useProductSearchListing() : useCategoryListing();
-
-const sidebarSelectedFilters = useSelectedListingFilters();
-
-const showResetFiltersButton = computed<boolean>(() => {
-  if (
-    sidebarSelectedFilters.manufacturer.size !== 0 ||
-    sidebarSelectedFilters.properties.size !== 0 ||
-    sidebarSelectedFilters["max-price"] ||
-    sidebarSelectedFilters["min-price"] ||
-    sidebarSelectedFilters.rating ||
-    sidebarSelectedFilters["shipping-free"]
-  ) {
-    return true;
-  }
-
-  return false;
-});
-
-const searchCriteriaForRequest: ComputedRef<Schemas["ProductListingCriteria"]> =
-  computed(() => ({
-    manufacturer: [
-      ...(sidebarSelectedFilters.manufacturer as Set<string>),
-    ]?.join("|"),
-    properties: [...(sidebarSelectedFilters.properties as Set<string>)]?.join(
-      "|",
-    ),
-    "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: isProductSearch ? (firstQueryValue(route.query.search) ?? "") : "",
-    limit: toNumber(firstQueryValue(route.query.limit)) ?? 15,
-  }));
-
-const handleFilterChange = async (event: {
-  code: string;
-  value: string | number | boolean;
-}) => {
-  try {
-    const { code, value } = event;
-
-    if (code === "manufacturer" || code === "properties") {
-      const filterSet = sidebarSelectedFilters[code];
-      const stringValue = String(value);
-
-      if (filterSet.has(stringValue)) {
-        filterSet.delete(stringValue);
-      } else {
-        filterSet.add(stringValue);
-      }
-    } else if (code === "min-price" || code === "max-price") {
-      sidebarSelectedFilters[code] =
-        typeof value === "number" ? value : Number(value);
-    } else if (code === "rating") {
-      sidebarSelectedFilters.rating = Number(value);
-    } else if (code === "shipping-free") {
-      sidebarSelectedFilters["shipping-free"] = Boolean(value);
-    }
-
-    await executeSearch();
-  } catch (error) {
-    console.error("Filter update failed:", error);
-  }
-};
-
-const executeSearch = async () => {
-  try {
-    // 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;
-    const query: Record<string, unknown> = {};
-
-    if (criteria.manufacturer) query.manufacturer = criteria.manufacturer;
-    if (criteria.properties) query.properties = criteria.properties;
-    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,
-    });
-  } catch (error) {
-    console.error("Search execution failed:", error);
-  }
-};
-
-const clearFilters = () => {
-  (sidebarSelectedFilters.manufacturer as Set<string>).clear();
-  (sidebarSelectedFilters.properties as Set<string>).clear();
-  sidebarSelectedFilters["min-price"] = undefined;
-  sidebarSelectedFilters["max-price"] = undefined;
-  sidebarSelectedFilters.rating = undefined;
-  sidebarSelectedFilters["shipping-free"] = undefined;
-};
-
-const currentSortingOrder = computed({
-  get: (): string => getCurrentSortingOrder.value || "",
-  set: async (order: string): Promise<void> => {
-    try {
-      await router.push({
-        query: {
-          ...route.query,
-          order,
-        },
-      });
-
-      // 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);
-    }
-  },
-});
-
-async function invokeCleanFilters() {
-  try {
-    clearFilters();
-    await executeSearch();
-  } catch (error) {
-    console.error("Clear filters failed:", error);
-  }
-}
-
-const handleSortChange = (sortKey: string) => {
-  currentSortingOrder.value = sortKey;
-};
-
-// Helper to check if a filter has active selections
+  handleFilterChange,
+  handleRemoveFilterChip,
+  handleSortChange,
+  invokeCleanFilters,
+  selectedFilters: sidebarSelectedFilters,
+  showResetFiltersButton,
+  visibleFilters,
+} = useListingFilters(isProductSearch);
+
+// Whether a filter has an active selection, for the collapsed chip state.
 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 ||
@@ -218,9 +64,10 @@ const hasActiveFilter = (filter: { code: string }) => {
     return sidebarSelectedFilters.rating !== undefined;
   }
   if (filter.code === "shipping-free") {
-    return sidebarSelectedFilters["shipping-free"] === true;
+    return sidebarSelectedFilters["shipping-free"] !== undefined;
   }
-  // Properties filter - check if any property from this filter group is selected
+  // Any other code is a property group. Each carries its own code and only
+  // normalises to "properties" when it emits, so this has to stay a fallback.
   return sidebarSelectedFilters.properties.size > 0;
 };
 </script>
@@ -231,7 +78,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)"
@@ -241,6 +88,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