@shopware/cms-base-layer 4.0.0 → 4.1.0

package/app/components/SwProductListingFiltersHorizontal.vue

@@ -4,23 +4,9 @@ import type {
   CmsElementSidebarFilter,
 } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
-import { getCategoryFilterPostFilter } from "@shopware/helpers";
 import { defu } from "defu";
-import { computed } from "vue";
-import type { ComputedRef } from "vue";
-import type { LocationQueryRaw } from "vue-router";
 
-import {
-  firstQueryValue,
-  getVisibleListingFilters,
-  toNumber,
-  useCategoryListing,
-  useProductSearchListing,
-  useRoute,
-  useRouter,
-  useSelectedListingFilters,
-} from "#imports";
-import type { Schemas, operations } from "#shopware";
+import { useListingFilters } from "#imports";
 
 const props = defineProps<{
   content: CmsElementProductListing | CmsElementSidebarFilter;
@@ -47,194 +33,20 @@ 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();
-
-// 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 ||
-    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(
-      "|",
-    ),
-    // 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: 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" ||
-      code === "categories"
-    ) {
-      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 (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,
-    });
-  } catch (error) {
-    console.error("Search execution failed:", error);
-  }
-};
-
-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;
-  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;
@@ -252,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>

package/app/components/public/cms/CmsBlockSpatialViewer.vue

@@ -12,13 +12,13 @@ const props = defineProps<{
   content: Schemas["CmsBlock"];
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
-const slotContent = getSlotContent("default");
+const { getSlotContent } = useCmsBlock(() => props.content);
+const slotContent = computed(() => getSlotContent("default"));
 
 function getConfigValue(key: string): unknown {
-  if (!slotContent?.config) return null;
-  const configEntry =
-    slotContent.config[key as keyof typeof slotContent.config];
+  const slot = slotContent.value;
+  if (!slot?.config) return null;
+  const configEntry = slot.config[key as keyof typeof slot.config];
   if (
     configEntry &&
     typeof configEntry === "object" &&
@@ -31,8 +31,8 @@ function getConfigValue(key: string): unknown {
 }
 
 const modelUrl = computed(() => {
-  if (slotContent?.data) {
-    const data = slotContent.data as unknown as Schemas["Media"];
+  if (slotContent.value?.data) {
+    const data = slotContent.value.data as unknown as Schemas["Media"];
     if (data?.url && typeof data.url === "string") {
       return data.url;
     }

package/app/components/public/cms/CmsGenericBlock.vue

@@ -17,22 +17,17 @@ const props = defineProps<{
 
 const appConfig = useTypedAppConfig();
 
+// Plain values, not refs: custom elements inject these as a `number` and a
+// `string` (see the README), so providing a ref here would break them.
 const slotCount = props.content.slots?.length || 1;
 provide("cms-block-slot-count", slotCount);
 provide("cms-image-sizes", getImageSizes(slotCount, appConfig.imageSizes));
 
 const DynamicRender = () => {
-  const {
-    resolvedComponent,
-    componentName,
-    isResolved,
-    componentNameToResolve,
-  } = resolveCmsComponent(props.content);
+  const { resolvedComponent, componentName, componentNameToResolve } =
+    resolveCmsComponent(props.content);
 
   if (resolvedComponent) {
-    if (!isResolved)
-      return h("div", {}, `Problem resolving component: ${componentName}`);
-
     const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(
       props.content,
     );
@@ -75,7 +70,8 @@ const DynamicRender = () => {
     );
     return h(resolveComponent("CmsNoComponent"), { content: props.content });
   }
-  return h("div", {}, "");
+  // Production: a block type with no component renders nothing.
+  return null;
 };
 </script>
 

package/app/components/public/cms/CmsGenericElement.md

@@ -1,19 +1,25 @@
-Renders an Element type structure
+Renders an Element type structure.
+
+`content` is optional: `getSlotContent()` returns `undefined` for a slot the block
+does not carry, and this component renders nothing in that case.
 
 Example usage:
 
-```vue{19,22}
+```vue{22,25}
 <script setup lang="ts">
 import type { CmsBlockGalleryBuybox } from "@shopware/composables";
+import { computed } from "vue";
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
   content: CmsBlockGalleryBuybox;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
-const rightContent = getSlotContent("right");
-const leftContent = getSlotContent("left");
+// Pass a getter so the lookups follow a replaced block, and read them through
+// computeds so each one re-runs when it does.
+const { getSlotContent } = useCmsBlock(() => props.content);
+const rightContent = computed(() => getSlotContent("right"));
+const leftContent = computed(() => getSlotContent("left"));
 </script>
 
 <template>

package/app/components/public/cms/CmsGenericElement.vue

@@ -6,20 +6,24 @@ import { h, resolveComponent } from "vue";
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{
-  content: Schemas["CmsSlot"];
+  /**
+   * A block asks for its slots by name, and a block does not have to carry
+   * every slot its layout allows, so this can be undefined.
+   */
+  content?: Schemas["CmsSlot"];
 }>();
 
 const DynamicRender = () => {
-  const {
-    resolvedComponent,
-    componentName,
-    isResolved,
-    componentNameToResolve,
-  } = resolveCmsComponent(props.content);
-  if (resolvedComponent) {
-    if (!isResolved)
-      return h("div", {}, `Problem resolving component: ${componentName}`);
+  // Nothing to render for a slot the block does not carry. An element would
+  // take the class the call site passes and occupy a cell of its own wherever a
+  // block renders this straight into a grid, as CmsBlockCenterText does. A
+  // wrapper the block puts around the call site renders either way — sizing
+  // that wrapper for an absent slot is the block's business, not this one's.
+  if (!props.content) return null;
 
+  const { resolvedComponent, componentName, componentNameToResolve } =
+    resolveCmsComponent(props.content);
+  if (resolvedComponent) {
     const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(
       props.content,
     );
@@ -35,7 +39,9 @@ const DynamicRender = () => {
     );
     return h(resolveComponent("CmsNoComponent"), { content: props.content });
   }
-  return h("div", {}, "");
+  // Production: an element type with no component renders nothing, for the same
+  // reason the missing slot above does.
+  return null;
 };
 </script>
 

package/app/components/public/cms/block/CmsBlockAppRenderer.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { CmsBlockAppRenderer } from "@shopware/composables";
+import { computed, getCurrentInstance } from "vue";
+import type { Component, CSSProperties } from "vue";
+
+import { getAppRendererLayout } from "../../../../helpers/cms/getAppRendererLayout";
+
+const props = defineProps<{
+  content: CmsBlockAppRenderer;
+}>();
+
+const appContext = getCurrentInstance()?.appContext;
+
+const layout = computed(() => getAppRendererLayout(props.content));
+
+const appBlockComponent = computed<Component | undefined>(() => {
+  const name = layout.value.componentName;
+
+  return name ? appContext?.components[name] : undefined;
+});
+
+const gridStyle = computed<CSSProperties>(() => ({
+  display: "grid",
+  grid: layout.value.grid,
+}));
+</script>
+<template>
+  <component
+    :is="appBlockComponent"
+    v-if="appBlockComponent"
+    :content="content"
+  />
+  <div
+    v-else
+    class="cms-block-app-renderer"
+    :class="`cms-block-app-renderer-fallback-block-${layout.appBlockName}`"
+    :style="gridStyle"
+  >
+    <div
+      v-for="slot in layout.slots"
+      :key="slot.id"
+      class="min-w-0"
+      :class="`cms-block-app-renderer-fallback-slot-${slot.type}`"
+    >
+      <CmsGenericElement :content="slot" />
+    </div>
+  </div>
+</template>

package/app/components/public/cms/block/CmsBlockCategoryHeading.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { CmsBlockCategoryHeading } from "@shopware/composables";
+import { computed } from "vue";
+
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockCategoryHeading;
+}>();
+
+const { getSlotContent } = useCmsBlock(() => props.content);
+
+const slotContent = computed(() => getSlotContent("content"));
+</script>
+<template>
+  <div class="cms-block-category-heading">
+    <CmsGenericElement :content="slotContent" />
+  </div>
+</template>

package/app/components/public/cms/block/CmsBlockCategoryNavigation.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { CmsBlockCategoryNavigation } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
   content: CmsBlockCategoryNavigation;
 }>();
-const { getSlotContent } = useCmsBlock(props.content);
-const slotContent = getSlotContent("content");
+const { getSlotContent } = useCmsBlock(() => props.content);
+const slotContent = computed(() => getSlotContent("content"));
 </script>
 
 <template>

package/app/components/public/cms/block/CmsBlockCenterText.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockCenterText } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,10 +8,10 @@ const props = defineProps<{
   content: CmsBlockCenterText;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
-const slotLeftContent = getSlotContent("left");
-const slotRightContent = getSlotContent("right");
-const slotCenterContent = getSlotContent("center");
+const { getSlotContent } = useCmsBlock(() => props.content);
+const slotLeftContent = computed(() => getSlotContent("left"));
+const slotRightContent = computed(() => getSlotContent("right"));
+const slotCenterContent = computed(() => getSlotContent("center"));
 </script>
 <template>
   <div class="cms-block-center-text grid md:grid-cols-3 gap-10 content-center">

package/app/components/public/cms/block/CmsBlockCrossSelling.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { CmsBlockCrossSelling } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
   content: CmsBlockCrossSelling;
 }>();
-const { getSlotContent } = useCmsBlock(props.content);
-const slotContent = getSlotContent("content");
+const { getSlotContent } = useCmsBlock(() => props.content);
+const slotContent = computed(() => getSlotContent("content"));
 </script>
 <template>
   <div class="cms-block-cross-selling">

package/app/components/public/cms/block/CmsBlockCustomForm.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockForm } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockForm;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const cmsContent = getSlotContent("content");
+const cmsContent = computed(() => getSlotContent("content"));
 </script>
 <template>
   <div class="cms-block-form">

package/app/components/public/cms/block/CmsBlockForm.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockForm } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockForm;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const cmsContent = getSlotContent("content");
+const cmsContent = computed(() => getSlotContent("content"));
 </script>
 <template>
   <div class="cms-block-form">

package/app/components/public/cms/block/CmsBlockGalleryBuybox.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockGalleryBuybox } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockGalleryBuybox;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
-const rightContent = getSlotContent("right");
-const leftContent = getSlotContent("left");
+const { getSlotContent } = useCmsBlock(() => props.content);
+const rightContent = computed(() => getSlotContent("right"));
+const leftContent = computed(() => getSlotContent("left"));
 </script>
 
 <template>

package/app/components/public/cms/block/CmsBlockImage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImage } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,8 +8,8 @@ const props = defineProps<{
   content: CmsBlockImage;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
-const imageContent = getSlotContent("image");
+const { getSlotContent } = useCmsBlock(() => props.content);
+const imageContent = computed(() => getSlotContent("image"));
 </script>
 <template>
   <div>

package/app/components/public/cms/block/CmsBlockImageBubbleRow.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageBubbleRow } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,11 +8,11 @@ const props = defineProps<{
   content: CmsBlockImageBubbleRow;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
-const centerContent = getSlotContent("center");
+const leftContent = computed(() => getSlotContent("left"));
+const rightContent = computed(() => getSlotContent("right"));
+const centerContent = computed(() => getSlotContent("center"));
 </script>
 <template>
   <div

package/app/components/public/cms/block/CmsBlockImageCover.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageCover } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,9 +8,9 @@ const props = defineProps<{
   content: CmsBlockImageCover;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const cmsContent = getSlotContent("image");
+const cmsContent = computed(() => getSlotContent("image"));
 </script>
 <template>
   <div class="cms-block-image-cover">

package/app/components/public/cms/block/CmsBlockImageFourColumn.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockImageFourColumn } from "@shopware/composables";
+import { computed } from "vue";
 
 import { useCmsBlock } from "#imports";
 
@@ -7,12 +8,12 @@ const props = defineProps<{
   content: CmsBlockImageFourColumn;
 }>();
 
-const { getSlotContent } = useCmsBlock(props.content);
+const { getSlotContent } = useCmsBlock(() => props.content);
 
-const leftContent = getSlotContent("left");
-const rightContent = getSlotContent("right");
-const centerLeftContent = getSlotContent("center-left");
-const centerRightContent = getSlotContent("center-right");
+const leftContent = computed(() => getSlotContent("left"));
+const rightContent = computed(() => getSlotContent("right"));
+const centerLeftContent = computed(() => getSlotContent("center-left"));
+const centerRightContent = computed(() => getSlotContent("center-right"));
 </script>
 <template>
   <div