@shopware/cms-base-layer 3.1.0 → 4.1.0

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

@@ -3,6 +3,7 @@ import type {
   CmsElementCrossSelling,
   SliderElementConfig,
 } from "@shopware/composables";
+import { getTranslatedProperty } from "@shopware/helpers";
 import { useElementSize } from "@vueuse/core";
 import { computed, inject, ref, useTemplateRef } from "vue";
 
@@ -86,7 +87,7 @@ const toggleTab = (index: number) => {
         }"
         @click="toggleTab(index)"
       >
-        {{ collection.crossSelling.name }}
+        {{ getTranslatedProperty(collection.crossSelling, "name") }}
       </a>
     </div>
     <transition name="fade" mode="out-in">

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

@@ -11,7 +11,7 @@ const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
 
 const HtmlComponent = () => {
   return h("div", {
-    class: cssClasses,
+    class: ["cms-element-html", "cms-element-text", cssClasses],
     style: layoutStyles,
     innerHTML: props.content.data.content || "",
   });

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

@@ -5,9 +5,14 @@ import type {
 } from "@shopware/composables";
 import { buildUrlPrefix } from "@shopware/helpers";
 import { useElementSize } from "@vueuse/core";
+import { defu } from "defu";
 import { computed, defineAsyncComponent, useTemplateRef } from "vue";
 
-import { useCmsElementImage, useUrlResolver } from "#imports";
+import {
+  useCmsElementImage,
+  useCmsTranslations,
+  useUrlResolver,
+} from "#imports";
 
 import { isSpatial } from "../../../../helpers/media/isSpatial";
 
@@ -16,17 +21,51 @@ const props = defineProps<{
   imageGallery?: boolean;
 }>();
 
+type Translations = {
+  cms: {
+    image: {
+      linkWithoutLabel: string;
+    };
+  };
+};
+
+let translations: Translations = {
+  cms: {
+    image: {
+      linkWithoutLabel: "Open linked page",
+    },
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
 const { getUrlPrefix } = useUrlResolver();
 const {
+  ariaLabel,
   containerStyle,
   displayMode,
   imageContainerAttrs,
   imageAttrs,
   imageLink,
+  isDecorative,
   isVideoElement,
   mimeType,
 } = useCmsElementImage(props.content);
 
+// A link wrapping only an image is nameless without alt text, which axe
+// reports as a `link-name` violation.
+const linkAriaLabel = computed(() => {
+  if (!imageLink.value.url || imageAttrs.value.alt) {
+    return undefined;
+  }
+
+  const mediaTitle = isDecorative.value ? "" : props.content.data?.media?.title;
+
+  return (
+    ariaLabel.value || mediaTitle || translations.cms.image.linkWithoutLabel
+  );
+});
+
 const imageElement = useTemplateRef<HTMLImageElement>("imageElement");
 const { width, height } = useElementSize(imageElement);
 
@@ -69,6 +108,7 @@ const SwMedia3D = computed(() => {
     }"
     :style="containerStyle"
     v-bind="imageComputedContainerAttrs"
+    :aria-label="linkAriaLabel"
   >
     <video
       v-if="isVideoElement"

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsElementImageGallery } from "@shopware/composables";
+import { getTranslatedProperty } from "@shopware/helpers";
 import { computed, defineAsyncComponent, ref } from "vue";
 
 import { useCmsElementConfig, useImagePlaceholder } from "#imports";
@@ -129,7 +130,7 @@ function onTouchEnd() {
             class="w-full h-full absolute inset-0 object-cover"
             :placeholder="placeholderSvg"
             :src="currentImage.url"
-            :alt="currentImage.alt || 'Product image'"
+            :alt="getTranslatedProperty(currentImage, 'alt') || 'Product image'"
           />
           <!-- Placeholder -->
           <img

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

@@ -133,7 +133,7 @@ onMounted(async () => {
           class="self-stretch text-surface-on-surface text-base font-normal leading-normal"
         >
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <div v-html="description"></div>
+          <div class="cms-element-text" v-html="description"></div>
         </div>
       </div>
     </Transition>
@@ -242,7 +242,7 @@ onMounted(async () => {
               :key="category.id"
               class="mb-2"
             >
-              {{ category.name }}
+              {{ getTranslatedProperty(category, "name") }}
             </div>
           </div>
           <div v-else>No categories available</div>

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.md

@@ -1 +1,78 @@
 Display a text. Html to Vue mechanism is used to render buttons, links, images accordingly as Vue elements
+
+#### Styling CMS-authored HTML
+
+The rendered container always carries the `cms-element-text` class. Because the
+content comes from the Shopware admin editor, its tags (`h1`–`h6`, `ul`, `table`,
+`img`, …) arrive without any classes, so they can only be reached with element
+selectors — and those must never be declared globally, or they would also hit
+product names, buttons and other markup you do control.
+
+This layer ships that typography for you in
+[`app/assets/css/rich-text.css`](../../../../assets/css/rich-text.css),
+registered through `css: []` in the layer's `nuxt.config.ts`. It is plain CSS, so
+it also works for apps that don't use UnoCSS. Nothing to wire up in your app.
+
+##### Retheming
+
+Every value reads from a `--rte-*` custom property with a built-in fallback, so
+you only set the properties you want to change — no need to redeclare the rules:
+
+```css
+:root {
+  --rte-h1-size: 3rem;
+  --rte-h1-line: 3.25rem;
+  --rte-border-color: var(--color-outline-variant);
+}
+```
+
+| Property                          | Default                         |
+| --------------------------------- | ------------------------------- |
+| `--rte-h1-size` / `--rte-h1-line` | `2.25rem` / `2.5rem`            |
+| `--rte-h2-size` / `--rte-h2-line` | `1.75rem` / `2rem`              |
+| `--rte-h3-size` / `--rte-h3-line` | `1.25rem` / `1.5rem`            |
+| `--rte-h4-size` / `--rte-h4-line` | `1.125rem` / `1.5rem` (h4–h6)   |
+| `--rte-heading-weight`            | `600`                           |
+| `--rte-heading-mb`                | `10px`                          |
+| `--rte-flow`                      | `1rem` (spacing between blocks) |
+| `--rte-list-indent`               | `40px`                          |
+| `--rte-cell-padding`              | `0.5rem 0.75rem`                |
+| `--rte-border-color`              | `#e5e7eb` (tables, `hr`)        |
+
+Because the properties are inherited, you can also scope them contextually
+instead of overriding selectors:
+
+```css
+.cms-block-image-text-cover .cms-element-text {
+  --rte-h1-size: 3.5rem;
+}
+```
+
+##### Scope
+
+The class is set everywhere admin-authored HTML is injected, so one rule set
+covers all of them:
+
+| Component                                      | Classes                               |
+| ---------------------------------------------- | ------------------------------------- |
+| `CmsElementText`                               | `cms-element-text`                    |
+| `CmsElementHtml`                               | `cms-element-html cms-element-text`   |
+| `CmsElementProductDescriptionReviews`          | `cms-element-text` (description body) |
+| `FrontendAccountCustomerGroupRegistrationPage` | `cms-element-text` (intro text)       |
+
+Add `cms-element-text` to your own wrappers if you render admin HTML elsewhere,
+for example custom fields using the HTML editor.
+
+##### Notes
+
+The stylesheet uses `:where()` throughout, which keeps the specificity at
+`(0,1,0)`. Two consequences worth knowing:
+
+- A utility class or an inline style set by the editor still wins, without
+  `!important`.
+- The rules beat a framework reset (`ul { list-style: none }`) no matter which
+  stylesheet is injected first, so the CSS order does not matter.
+
+A `<style scoped>` block inside this component would _not_ work: the markup is
+created by a render function, and Vue only applies the scope id to the container
+root, not to its descendants.

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"),
@@ -32,6 +31,10 @@ const CmsTextRender = defineComponent({
     const { resolveUrl } = useUrlResolver();
 
     const config = {
+      container: {
+        type: "div",
+        class: "cms-element-text",
+      },
       textTransformer: (text: string) => decodeHTML(text),
       extraComponentsMap: {
         link: {
@@ -145,12 +148,14 @@ const CmsTextRender = defineComponent({
         },
       },
     };
-    const rawHtml =
-      mappedContent.value?.length > 0
-        ? mappedContent.value
-        : "<div class='cms-element-text 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>
@@ -160,34 +165,3 @@ const CmsTextRender = defineComponent({
   </div>
   <CmsTextRender v-else />
 </template>
-<style scoped>
-/** Global CSS styles for text elements */
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin-bottom: 10px;
-  font-weight: 600;
-}
-h1 {
-  line-height: 2.5rem;
-  font-size: 2.25rem;
-}
-h2 {
-  line-height: 2rem;
-  font-size: 1.75rem;
-}
-h3 {
-  line-height: 1.5rem;
-  font-size: 1.25rem;
-}
-ol,
-ul,
-dl {
-  list-style-type: disc;
-  padding-left: 40px;
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-</style>

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");