@shopware/cms-base-layer 4.0.0 → 4.1.0

package/app/components/public/cms/element/CmsElementCategoryName.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type {
+  CmsElementCategoryName,
+  CmsElementText,
+} from "@shopware/composables";
+import { computed } from "vue";
+
+import { getCategoryNameContent } from "../../../../helpers/cms/getCategoryNameContent";
+
+const props = defineProps<{
+  content: CmsElementCategoryName;
+}>();
+
+const textContent = computed(
+  () =>
+    ({
+      ...props.content,
+      type: "text",
+      config: {
+        ...props.content.config,
+        verticalAlign: {
+          source: "static",
+          value: props.content.config?.verticalAlign?.value ?? "",
+        },
+      },
+      data: {
+        apiAlias: "cms_text",
+        content: getCategoryNameContent(props.content),
+      },
+    }) as CmsElementText,
+);
+</script>
+<template>
+  <CmsElementText :content="textContent" class="cms-element-category-name" />
+</template>

package/app/components/public/cms/element/CmsElementProductListing.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import type { CmsElementProductListing } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
+import { until } from "@vueuse/core";
 import { defu } from "defu";
 import { computed, ref, useTemplateRef, watch } from "vue";
+import type { LocationQuery } from "vue-router";
 
 import {
+  firstQueryValue,
+  toNumber,
   useCategoryListing,
   useCmsElementConfig,
   useRoute,
@@ -58,26 +62,63 @@ const limit = ref(
       : defaultLimit,
 );
 
-const initalRoute = defu(route);
+const initialPath = route.path;
+
+/** Query values are strings; the Store API expects numbers and booleans. */
+function buildCriteria(query: LocationQuery) {
+  const criteria: Record<string, unknown> = {
+    limit: toNumber(firstQueryValue(query.limit)) ?? defaultLimit,
+    p: toNumber(firstQueryValue(query.p)) ?? defaultPage,
+    order: firstQueryValue(query.order) ?? defaultOrder,
+  };
+
+  const manufacturer = firstQueryValue(query.manufacturer);
+  if (manufacturer) criteria.manufacturer = manufacturer;
+  const properties = firstQueryValue(query.properties);
+  if (properties) criteria.properties = properties;
+  const minPrice = toNumber(firstQueryValue(query["min-price"]));
+  if (minPrice !== undefined) criteria["min-price"] = minPrice;
+  const maxPrice = toNumber(firstQueryValue(query["max-price"]));
+  if (maxPrice !== undefined) criteria["max-price"] = maxPrice;
+  const rating = toNumber(firstQueryValue(query.rating));
+  if (rating !== undefined) criteria.rating = rating;
+  if (query["shipping-free"])
+    criteria["shipping-free"] =
+      firstQueryValue(query["shipping-free"]) === "true";
+
+  return criteria as unknown as operations["searchPage post /search"]["body"];
+}
+
+// The only place that fetches, so back and forward work.
 watch(
-  () => route,
-  (newRoute) => {
-    if (initalRoute.path !== newRoute.path) {
-      return;
-    }
-    if (Object.keys(newRoute.query).length > 0) {
-      return;
-    }
-    // this fires to reset the page when query are removed/empty on client side navigation for the same page (without hard reload)
-    changeCurrentPage(defaultPage, {
-      limit: defaultLimit,
-      p: defaultPage,
-      order: defaultOrder,
-    } as unknown as operations["searchPage post /search"]["body"]);
+  () => route.query,
+  (query) => {
+    // A different path mounts its own component.
+    if (route.path !== initialPath) return;
+
+    // The select and the skeleton count read this, so it has to follow the URL
+    // too, not just the products.
+    limit.value = toNumber(firstQueryValue(query.limit)) ?? defaultLimit;
+
+    // Caught, not discarded: the Store API drops calls often enough that an
+    // unhandled rejection here would be a routine occurrence.
+    changeCurrentPage(
+      toNumber(firstQueryValue(query.p)) ?? defaultPage,
+      buildCriteria(query),
+    ).catch((error) => {
+      console.error("Listing update failed:", error);
+    });
   },
   { deep: true },
 );
 
+// `v-if="!loading"` unmounts the list while the watcher refetches, so scrolling
+// straight after the push would target a node that is about to be detached.
+async function scrollToListing() {
+  await until(loading).toBe(false);
+  productListElement.value?.scrollIntoView({ behavior: "smooth" });
+}
+
 const changePage = async (page: number) => {
   await router.push({
     query: {
@@ -86,11 +127,7 @@ const changePage = async (page: number) => {
       limit: limit.value,
     },
   });
-  await changeCurrentPage(
-    page,
-    route.query as unknown as operations["searchPage post /search"]["body"],
-  );
-  productListElement.value?.scrollIntoView({ behavior: "smooth" });
+  await scrollToListing();
 };
 
 const changeLimit = async (newLimit: number) => {
@@ -101,11 +138,7 @@ const changeLimit = async (newLimit: number) => {
       p: defaultPage,
     },
   });
-  await changeCurrentPage(
-    defaultPage,
-    route.query as unknown as operations["searchPage post /search"]["body"],
-  );
-  productListElement.value?.scrollIntoView({ behavior: "smooth" });
+  await scrollToListing();
 };
 
 const isProductListing = computed(

package/app/components/public/cms/element/CmsElementText.vue

@@ -6,6 +6,7 @@ import type { CSSProperties, VNode, VNodeArrayChildren } from "vue";
 
 import { useCmsElementConfig, useUrlResolver } from "#imports";
 
+import { getTextElementContent } from "../../../../helpers/cms/getTextElementContent";
 import { getOptionsFromNode } from "../../../../helpers/html-to-vue/getOptionsFromNode";
 import type { NodeObject } from "../../../../helpers/html-to-vue/getOptionsFromNode";
 import { renderHtml } from "../../../../helpers/html-to-vue/renderToHtml";
@@ -15,11 +16,9 @@ const props = defineProps<{
   content: CmsElementText;
 }>();
 const context = getCurrentInstance();
-const { getConfigValue } = useCmsElementConfig(props.content);
+const { getConfigValue } = useCmsElementConfig(() => props.content);
 
-const mappedContent = computed<string>(() => {
-  return props.content?.data?.content || getConfigValue("content");
-});
+const mappedContent = computed(() => getTextElementContent(props.content));
 
 const style = computed<CSSProperties>(() => ({
   alignContent: getConfigValue("verticalAlign"),
@@ -149,12 +148,14 @@ const CmsTextRender = defineComponent({
         },
       },
     };
-    const rawHtml =
-      mappedContent.value?.length > 0
-        ? mappedContent.value
-        : "<div class='missing-content-element'></div>";
-
-    return () => renderHtml(rawHtml, config, h, context, resolveUrl);
+    return () =>
+      renderHtml(
+        mappedContent.value || "<div class='missing-content-element'></div>",
+        config,
+        h,
+        context,
+        resolveUrl,
+      );
   },
 });
 </script>

package/app/components/public/cms/element/CmsElementVideo.md

@@ -0,0 +1,27 @@
+Play a video uploaded to the Shopware media library, in the `video` block. YouTube and Vimeo videos have their own elements.
+
+Every option of the element in the Administration is supported:
+
+| Option                       | Behaviour                                                                                                                                                                                          |
+| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Video                        | Static or mapped media. Nothing is rendered when it does not resolve.                                                                                                                              |
+| Display mode                 | `standard` keeps the video's size, `stretch` makes it full width, `cover` fills the element and crops the video.                                                                                   |
+| Minimum height               | Applies to `cover` only.                                                                                                                                                                           |
+| Vertical / horizontal align  | Positions a `standard` or `stretch` video. Ignored for `cover`.                                                                                                                                    |
+| Play automatically           | Also mutes the video, because browsers only autoplay muted videos.                                                                                                                                 |
+| Play muted, Play in a loop   | Set `muted` and `loop`.                                                                                                                                                                            |
+| Play inline on iOS devices   | Sets `playsinline`.                                                                                                                                                                                |
+| Show controls                | Shows the native controls. Without them the whole element is a play/pause button with a play icon, operable by keyboard too.                                                                       |
+| Load only after confirmation | Shows the cover image set for the video in the media module and loads nothing until playback starts. Turns autoplay off. Without a cover image, a `stretch` video keeps a 16:9 box until it loads. |
+| Screen reader title          | Names the video, falling back to the media alt text (and title for the tooltip).                                                                                                                   |
+
+Without controls, the button's name always says what it does: play or pause. The video's name is announced as its description. A video that cannot be loaded, for example in a format the browser does not play or with a missing file, shows an error in place of the play icon and names the button after the error.
+
+The texts can be translated through `cmsTranslations`:
+
+| Key                      | Default                                              |
+| ------------------------ | ---------------------------------------------------- |
+| `cms.video.playLabel`    | `Play video`                                         |
+| `cms.video.pauseLabel`   | `Pause video`                                        |
+| `cms.video.loadError`    | `The video could not be loaded.`                     |
+| `cms.video.notSupported` | `Your browser does not support the HTML5 video tag.` |

package/app/components/public/cms/element/CmsElementVideo.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import type { CmsElementVideo } from "@shopware/composables";
+import { defu } from "defu";
+import { computed, onMounted, ref, useId, useTemplateRef } from "vue";
+
+import { useCmsTranslations } from "#imports";
+
+import {
+  getVideoAttributes,
+  getVideoElementOptions,
+  getVideoToggleAttributes,
+} from "../../../../helpers/cms/getVideoElementOptions";
+
+const props = defineProps<{
+  content: CmsElementVideo;
+}>();
+
+type Translations = {
+  cms: {
+    video: {
+      playLabel: string;
+      pauseLabel: string;
+      loadError: string;
+      notSupported: string;
+    };
+  };
+};
+
+let translations: Translations = {
+  cms: {
+    video: {
+      playLabel: "Play video",
+      pauseLabel: "Pause video",
+      loadError: "The video could not be loaded.",
+      notSupported: "Your browser does not support the HTML5 video tag.",
+    },
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const JUSTIFY_CLASSES = {
+  "flex-start": "justify-start",
+  center: "justify-center",
+  "flex-end": "justify-end",
+} as const;
+
+const ALIGN_CLASSES = {
+  "flex-start": "self-start",
+  center: "self-center",
+  "flex-end": "self-end",
+} as const;
+
+const options = computed(() => getVideoElementOptions(props.content));
+const videoAttributes = computed(() => getVideoAttributes(options.value));
+
+const videoId = useId();
+const videoElement = useTemplateRef<HTMLVideoElement>("videoElement");
+const isPlaying = ref(false);
+const hasFailed = ref(false);
+
+function syncPlayingState() {
+  const video = videoElement.value;
+  isPlaying.value = !!video && !video.paused && !video.ended;
+}
+
+function markFailed() {
+  hasFailed.value = true;
+  videoElement.value?.pause();
+  isPlaying.value = false;
+}
+
+function togglePlayback() {
+  const video = videoElement.value;
+  if (!video || hasFailed.value) return;
+
+  if (video.error || video.networkState === video.NETWORK_NO_SOURCE) {
+    markFailed();
+    return;
+  }
+
+  if (video.paused || video.ended) {
+    video.play()?.catch((error: unknown) => {
+      if ((error as DOMException | undefined)?.name === "NotSupportedError") {
+        markFailed();
+      }
+    });
+    return;
+  }
+
+  video.pause();
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key !== "Enter" && event.key !== " ") return;
+
+  event.preventDefault();
+  if (event.repeat) return;
+
+  togglePlayback();
+}
+
+const toggleAttrs = computed(() =>
+  getVideoToggleAttributes(
+    options.value,
+    { isPlaying: isPlaying.value, hasFailed: hasFailed.value, videoId },
+    translations.cms.video,
+  ),
+);
+
+const toggleListeners = computed(() =>
+  options.value.controls ? {} : { click: togglePlayback, keydown: onKeydown },
+);
+
+onMounted(syncPlayingState);
+</script>
+<template>
+  <div
+    v-if="options.src"
+    class="cms-element-video relative h-full"
+    :class="[
+      `is-${options.displayMode}`,
+      options.displayMode !== 'cover' && 'flex',
+      options.horizontalAlign && JUSTIFY_CLASSES[options.horizontalAlign],
+    ]"
+    v-bind="toggleAttrs"
+    v-on="toggleListeners"
+  >
+    <div
+      class="cms-element-alignment min-w-0 max-w-full"
+      :class="[
+        options.verticalAlign && ALIGN_CLASSES[options.verticalAlign],
+        options.displayMode !== 'standard' && 'w-full',
+        options.displayMode === 'cover' && 'h-full',
+      ]"
+    >
+      <div
+        class="cms-video-container relative w-full"
+        :class="{ 'h-full': options.displayMode === 'cover' }"
+        :style="
+          options.minHeight ? { minHeight: options.minHeight } : undefined
+        "
+      >
+        <span
+          v-if="!options.controls && !hasFailed"
+          class="cms-video-play-icon pointer-events-none absolute left-1/2 top-1/2 z-2 flex h-16 w-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-black/60 text-white transition-opacity duration-200"
+          :class="isPlaying ? 'opacity-0' : 'opacity-100'"
+          aria-hidden="true"
+        >
+          <span class="i-carbon-play-filled-alt h-8 w-8" />
+        </span>
+        <span
+          v-if="hasFailed"
+          class="cms-video-error pointer-events-none absolute inset-0 z-2 flex items-center justify-center p-4"
+        >
+          <span
+            class="rounded bg-black/60 px-3 py-2 text-center text-sm text-white"
+          >
+            {{ translations.cms.video.loadError }}
+          </span>
+        </span>
+        <video
+          :id="videoId"
+          ref="videoElement"
+          class="cms-video block max-w-full"
+          :class="{
+            'w-full': options.displayMode !== 'standard',
+            'absolute inset-0 h-full object-cover':
+              options.displayMode === 'cover',
+            'cursor-pointer': !options.controls && !hasFailed,
+          }"
+          :style="
+            options.placeholderAspectRatio
+              ? { aspectRatio: options.placeholderAspectRatio }
+              : undefined
+          "
+          v-bind="videoAttributes"
+          @play="syncPlayingState"
+          @pause="syncPlayingState"
+          @ended="syncPlayingState"
+          @error="markFailed"
+        >
+          <source
+            :src="options.src"
+            :type="options.mimeType"
+            @error="markFailed"
+          />
+          {{ translations.cms.video.notSupported }}
+        </video>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/public/cms/section/CmsSectionSidebar.vue

@@ -6,12 +6,12 @@ import { computed, provide } from "vue";
 const props = defineProps<{
   content: CmsSectionSidebar;
 }>();
-const { getPositionContent, section } = useCmsSection(props.content);
+const { getPositionContent } = useCmsSection(() => props.content);
 
-const sidebarBlocks = getPositionContent("sidebar");
-const mainBlocks = getPositionContent("main");
+const sidebarBlocks = computed(() => getPositionContent("sidebar"));
+const mainBlocks = computed(() => getPositionContent("main"));
 const mobileBehavior = computed(() => props.content.mobileBehavior);
-const fullWidth = computed(() => section.sizingMode === "full_width");
+const fullWidth = computed(() => props.content.sizingMode === "full_width");
 
 // Provide layout context for child components
 provide("cms-section-layout", "sidebar");

package/app/composables/useListingFilters.ts

@@ -0,0 +1,189 @@
+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 } from "#shopware";
+
+/** Shared by the sidebar and horizontal filter components. */
+export function useListingFilters(isProductSearch: boolean) {
+  const route = useRoute();
+  const router = useRouter();
+
+  const { getCurrentSortingOrder, getInitialFilters, getSortingOrders } =
+    isProductSearch ? useProductSearchListing() : useCategoryListing();
+
+  const selectedFilters = useSelectedListingFilters();
+
+  // Only the filters this listing can apply; the category filter is search-only.
+  const visibleFilters = computed(() =>
+    getVisibleListingFilters(getInitialFilters.value, { isProductSearch }),
+  );
+
+  const showResetFiltersButton = computed<boolean>(
+    () =>
+      selectedFilters.manufacturer.size !== 0 ||
+      selectedFilters.properties.size !== 0 ||
+      (isProductSearch && selectedFilters.categories.size !== 0) ||
+      !!selectedFilters["max-price"] ||
+      !!selectedFilters["min-price"] ||
+      !!selectedFilters.rating ||
+      !!selectedFilters["shipping-free"],
+  );
+
+  const searchCriteriaForRequest: ComputedRef<
+    Schemas["ProductListingCriteria"]
+  > = computed(() => ({
+    manufacturer: [...(selectedFilters.manufacturer as Set<string>)]?.join("|"),
+    properties: [...(selectedFilters.properties as Set<string>)]?.join("|"),
+    "min-price": selectedFilters["min-price"] as number,
+    "max-price": selectedFilters["max-price"] as number,
+    order: getCurrentSortingOrder.value as string,
+    "shipping-free": selectedFilters["shipping-free"] as boolean,
+    rating: selectedFilters.rating as number,
+    search: isProductSearch ? (firstQueryValue(route.query.search) ?? "") : "",
+    limit: toNumber(firstQueryValue(route.query.limit)) ?? 15,
+  }));
+
+  const executeSearch = async () => {
+    try {
+      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 && selectedFilters.categories.size > 0)
+        query.categories = [
+          ...(selectedFilters.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 so filtering does not reset the query.
+      if (isProductSearch && route.query.search)
+        query.search = route.query.search;
+      // Preserve the page size, which rebuilding the query would drop.
+      if (route.query.limit) query.limit = route.query.limit;
+
+      // URL first: gating it on the request lost the filter when the call
+      // failed. The listing refetches from the URL, so this is the whole job.
+      await router.push({ query: query as LocationQueryRaw });
+    } catch (error) {
+      console.error("Search execution failed:", error);
+    }
+  };
+
+  const handleFilterChange = async (event: {
+    code: string;
+    value: string | number | boolean;
+  }) => {
+    try {
+      const { code, value } = event;
+
+      if (
+        code === "manufacturer" ||
+        code === "properties" ||
+        code === "categories"
+      ) {
+        const filterSet = selectedFilters[code];
+        const stringValue = String(value);
+        if (filterSet.has(stringValue)) filterSet.delete(stringValue);
+        else filterSet.add(stringValue);
+      } else if (code === "min-price" || code === "max-price") {
+        selectedFilters[code] =
+          typeof value === "number" ? value : Number(value);
+      } else if (code === "rating") {
+        selectedFilters.rating = Number(value);
+      } else if (code === "shipping-free") {
+        selectedFilters["shipping-free"] = Boolean(value);
+      }
+
+      await executeSearch();
+    } catch (error) {
+      console.error("Filter update failed:", error);
+    }
+  };
+
+  const clearFilters = () => {
+    (selectedFilters.manufacturer as Set<string>).clear();
+    (selectedFilters.properties as Set<string>).clear();
+    (selectedFilters.categories as Set<string>).clear();
+    selectedFilters["min-price"] = undefined;
+    selectedFilters["max-price"] = undefined;
+    selectedFilters.rating = undefined;
+    selectedFilters["shipping-free"] = undefined;
+  };
+
+  async function invokeCleanFilters() {
+    try {
+      clearFilters();
+      await executeSearch();
+    } catch (error) {
+      console.error("Clear filters failed:", error);
+    }
+  }
+
+  const currentSortingOrder = computed({
+    get: (): string => getCurrentSortingOrder.value || "",
+    set: async (order: string): Promise<void> => {
+      try {
+        // Pushing is the whole job; the listing refetches from the URL.
+        await router.push({ query: { ...route.query, order } });
+      } catch (error) {
+        console.error("Sorting order change 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" ||
+      chip.code === "categories"
+    ) {
+      (selectedFilters[chip.code] as Set<string>).delete(String(chip.value));
+    } else if (chip.code === "price") {
+      selectedFilters["min-price"] = undefined;
+      selectedFilters["max-price"] = undefined;
+    } else if (chip.code === "rating") {
+      selectedFilters.rating = undefined;
+    } else if (chip.code === "shipping-free") {
+      selectedFilters["shipping-free"] = undefined;
+    }
+
+    await executeSearch();
+  };
+
+  return {
+    currentSortingOrder,
+    getCurrentSortingOrder,
+    executeSearch,
+    getSortingOrders,
+    handleFilterChange,
+    handleRemoveFilterChip,
+    handleSortChange,
+    invokeCleanFilters,
+    selectedFilters,
+    showResetFiltersButton,
+    visibleFilters,
+  };
+}

package/app/composables/useSelectedListingFilters.ts

@@ -0,0 +1,46 @@
+import { reactive, watch } from "vue";
+import type { UnwrapNestedRefs } from "vue";
+
+// Nuxt's useRoute, never vue-router's: this layer does not depend on
+// vue-router, so a bare import resolves to whichever copy the consumer's
+// package manager hoisted. When that is not the copy Nuxt's router uses, its
+// inject() returns undefined and every page with a listing filter 500s in SSR.
+import {
+  applyQueryToFilters,
+  createEmptyFilterState,
+  useRoute,
+} from "#imports";
+
+import type { FilterState } from "../utils/listingFilterState";
+
+/**
+ * Returns the reactive filter state, populated from the current route.query at
+ * setup (runs on server AND client -> identical first render, no hydration
+ * mismatch) and kept in sync on every subsequent query-only navigation
+ * (Back/Forward, manual URL edits, the component's own executeSearch push).
+ *
+ * The watcher is intentionally NOT immediate: the setup-time apply already
+ * covers the first render, and an immediate watcher would re-run during
+ * hydration. It only resyncs UI state - it never navigates or fetches - so it
+ * cannot loop with executeSearch() nor cause an extra listing request.
+ */
+export const useSelectedListingFilters = (): UnwrapNestedRefs<FilterState> => {
+  const route = useRoute();
+  // Fresh state per call, deliberately: the sidebar and the horizontal filter
+  // bar each hold their own selection object, so a mutation in one is invisible
+  // to the other until it reaches the route. The URL is what synchronises them.
+  const state = reactive<FilterState>(createEmptyFilterState());
+
+  // Initial parse (SSR + first client render).
+  applyQueryToFilters(state as FilterState, route.query);
+
+  // Resync on query-only route changes while the component stays mounted.
+  watch(
+    () => route.query,
+    (query) => {
+      applyQueryToFilters(state as FilterState, query);
+    },
+  );
+
+  return state;
+};