@shopware/cms-base-layer 3.1.0 → 4.1.0

package/app/helpers/cms/getVideoElementOptions.test.ts

@@ -0,0 +1,384 @@
+import type { CmsElementVideo } from "@shopware/composables";
+import { describe, expect, it } from "vitest";
+
+import {
+  getVideoAttributes,
+  getVideoElementOptions,
+  getVideoToggleAttributes,
+} from "./getVideoElementOptions";
+import type { VideoElementOptions } from "./getVideoElementOptions";
+
+type Config = Partial<Record<keyof CmsElementVideo["config"], unknown>>;
+
+const media = {
+  url: "https://shop.test/media/intro.mp4",
+  mimeType: "video/mp4",
+  alt: "Alt",
+  title: "Title",
+  translated: { alt: "Translated alt", title: "Translated title" },
+  extensions: {
+    videoCoverMedia: { url: "https://shop.test/media/intro-cover.jpg" },
+  },
+};
+
+const element = (
+  config: Config = {},
+  data: Partial<CmsElementVideo["data"]> = {},
+) =>
+  ({
+    type: "video",
+    config: Object.fromEntries(
+      Object.entries(config).map(([key, value]) => [
+        key,
+        { source: "static", value },
+      ]),
+    ),
+    data: {
+      apiAlias: "cms_video",
+      media,
+      ariaLabel: "ariaLabel" in config ? String(config.ariaLabel ?? "") : null,
+      ...data,
+    },
+  }) as unknown as CmsElementVideo;
+
+const withMedia = (overrides: Record<string, unknown>) => ({
+  media: { ...media, ...overrides } as CmsElementVideo["data"]["media"],
+});
+
+describe("getVideoElementOptions", () => {
+  describe("media", () => {
+    it("plays the resolved media", () => {
+      const options = getVideoElementOptions(element());
+
+      expect(options.src).toBe("https://shop.test/media/intro.mp4");
+      expect(options.mimeType).toBe("video/mp4");
+      expect(options.preload).toBe("auto");
+    });
+
+    it("has no source when no media resolved", () => {
+      expect(
+        getVideoElementOptions(element({}, { media: null })).src,
+      ).toBeUndefined();
+    });
+  });
+
+  describe("displayMode", () => {
+    it.each(["standard", "stretch", "cover"])("accepts %s", (displayMode) => {
+      expect(getVideoElementOptions(element({ displayMode })).displayMode).toBe(
+        displayMode,
+      );
+    });
+
+    it("falls back to standard for a missing or unknown value", () => {
+      expect(getVideoElementOptions(element()).displayMode).toBe("standard");
+      expect(
+        getVideoElementOptions(element({ displayMode: "contain" })).displayMode,
+      ).toBe("standard");
+    });
+
+    it("applies the minimum height to cover only", () => {
+      expect(
+        getVideoElementOptions(
+          element({ displayMode: "cover", minHeight: "400px" }),
+        ).minHeight,
+      ).toBe("400px");
+      expect(
+        getVideoElementOptions(
+          element({ displayMode: "standard", minHeight: "400px" }),
+        ).minHeight,
+      ).toBeUndefined();
+    });
+  });
+
+  describe("alignment", () => {
+    it("reads both alignments", () => {
+      const options = getVideoElementOptions(
+        element({ verticalAlign: "flex-end", horizontalAlign: "center" }),
+      );
+
+      expect(options.verticalAlign).toBe("flex-end");
+      expect(options.horizontalAlign).toBe("center");
+    });
+
+    it("ignores both alignments for cover, which fills the element", () => {
+      const options = getVideoElementOptions(
+        element({
+          displayMode: "cover",
+          verticalAlign: "flex-end",
+          horizontalAlign: "center",
+        }),
+      );
+
+      expect(options.verticalAlign).toBeUndefined();
+      expect(options.horizontalAlign).toBeUndefined();
+    });
+
+    it("drops an empty or unknown alignment", () => {
+      const options = getVideoElementOptions(
+        element({ verticalAlign: "", horizontalAlign: "left" }),
+      );
+
+      expect(options.verticalAlign).toBeUndefined();
+      expect(options.horizontalAlign).toBeUndefined();
+    });
+  });
+
+  describe("playback", () => {
+    const switchesOf = ({
+      muted,
+      loop,
+      playsInline,
+      controls,
+    }: VideoElementOptions) => ({ muted, loop, playsInline, controls });
+
+    it.each([
+      ["muted", "muted"],
+      ["loop", "loop"],
+      ["playsInline", "playsInline"],
+      ["showControls", "controls"],
+    ] as const)("maps %s to %s and nothing else", (configKey, optionKey) => {
+      expect(
+        switchesOf(getVideoElementOptions(element({ [configKey]: true }))),
+      ).toEqual({
+        muted: false,
+        loop: false,
+        playsInline: false,
+        controls: false,
+        [optionKey]: true,
+      });
+    });
+
+    it("leaves every switch off when it is not configured", () => {
+      expect(getVideoElementOptions(element())).toMatchObject({
+        autoplay: false,
+        muted: false,
+        loop: false,
+        playsInline: false,
+        controls: false,
+      });
+    });
+
+    it("mutes an autoplaying video", () => {
+      expect(
+        getVideoElementOptions(element({ autoPlay: true, muted: false })),
+      ).toMatchObject({ autoplay: true, muted: true });
+    });
+  });
+
+  describe("load only after confirmation", () => {
+    it("shows the cover, loads nothing up front and does not autoplay", () => {
+      expect(
+        getVideoElementOptions(element({ showCover: true, autoPlay: true })),
+      ).toMatchObject({
+        poster: "https://shop.test/media/intro-cover.jpg",
+        preload: "none",
+        autoplay: false,
+        muted: false,
+      });
+    });
+
+    it("waits for the visitor even when the video has no cover", () => {
+      const options = getVideoElementOptions(
+        element({ showCover: true }, withMedia({ extensions: {} })),
+      );
+
+      expect(options.poster).toBeUndefined();
+      expect(options.preload).toBe("none");
+    });
+
+    it("does not use the cover without the option", () => {
+      expect(getVideoElementOptions(element()).poster).toBeUndefined();
+    });
+
+    it("reserves a 16:9 box for a stretched video without a cover", () => {
+      expect(
+        getVideoElementOptions(
+          element(
+            { showCover: true, displayMode: "stretch" },
+            withMedia({ extensions: {} }),
+          ),
+        ).placeholderAspectRatio,
+      ).toBe("auto 16 / 9");
+    });
+
+    it.each([
+      ["the cover sizes it", { showCover: true, displayMode: "stretch" }, {}],
+      [
+        "it is a standard video",
+        { showCover: true, displayMode: "standard" },
+        withMedia({ extensions: {} }),
+      ],
+      [
+        "it covers the element",
+        { showCover: true, displayMode: "cover" },
+        withMedia({ extensions: {} }),
+      ],
+      [
+        "its metadata preloads",
+        { displayMode: "stretch" },
+        withMedia({ extensions: {} }),
+      ],
+    ])("reserves no box when %s", (_, config, data) => {
+      expect(
+        getVideoElementOptions(element(config, data)).placeholderAspectRatio,
+      ).toBeUndefined();
+    });
+  });
+
+  describe("accessible name", () => {
+    it("uses the screen reader title", () => {
+      const options = getVideoElementOptions(
+        element({ ariaLabel: " Product demo " }),
+      );
+
+      expect(options.ariaLabel).toBe("Product demo");
+      expect(options.title).toBe("Product demo");
+    });
+
+    it("falls back to the media alt text and title", () => {
+      const options = getVideoElementOptions(element({ ariaLabel: null }));
+
+      expect(options.ariaLabel).toBe("Translated alt");
+      expect(options.title).toBe("Translated title");
+    });
+
+    it("trims the media alt text and title", () => {
+      const options = getVideoElementOptions(
+        element(
+          {},
+          withMedia({ translated: { alt: "  Alt  ", title: " Title " } }),
+        ),
+      );
+
+      expect(options.ariaLabel).toBe("Alt");
+      expect(options.title).toBe("Title");
+    });
+
+    it("has no name when nothing provides one", () => {
+      const options = getVideoElementOptions(
+        element(
+          { ariaLabel: "  " },
+          withMedia({
+            alt: "",
+            title: "",
+            translated: { alt: " ", title: "" },
+          }),
+        ),
+      );
+
+      expect(options.ariaLabel).toBeUndefined();
+      expect(options.title).toBeUndefined();
+    });
+
+    it("ignores a mapped screen reader title, which arrives as the mapping path", () => {
+      const mapped = element({}, { ariaLabel: "media.title" });
+      mapped.config.ariaLabel = { source: "mapped", value: "media.title" };
+
+      expect(getVideoElementOptions(mapped).ariaLabel).toBe("Translated alt");
+    });
+  });
+});
+
+describe("getVideoAttributes", () => {
+  it("renders no playsinline attribute when inline playback is off", () => {
+    expect(
+      getVideoAttributes(getVideoElementOptions(element())).playsinline,
+    ).toBeUndefined();
+    expect(
+      getVideoAttributes(getVideoElementOptions(element({ playsInline: true })))
+        .playsinline,
+    ).toBe(true);
+  });
+
+  it("passes the options on to the video", () => {
+    expect(
+      getVideoAttributes(
+        getVideoElementOptions(
+          element({ autoPlay: true, loop: true, ariaLabel: "Product demo" }),
+        ),
+      ),
+    ).toEqual({
+      preload: "auto",
+      poster: undefined,
+      autoplay: true,
+      muted: true,
+      loop: true,
+      playsinline: undefined,
+      controls: false,
+      "aria-label": "Product demo",
+      title: "Product demo",
+    });
+  });
+});
+
+describe("getVideoToggleAttributes", () => {
+  const labels = {
+    playLabel: "Play video",
+    pauseLabel: "Pause video",
+    loadError: "The video could not be loaded.",
+  };
+  const state = { isPlaying: false, hasFailed: false, videoId: "video-1" };
+  const unnamed = getVideoElementOptions(
+    element(
+      {},
+      withMedia({ alt: "", title: "", translated: { alt: "", title: "" } }),
+    ),
+  );
+
+  it("adds nothing when the video shows its controls", () => {
+    expect(
+      getVideoToggleAttributes(
+        getVideoElementOptions(element({ showControls: true })),
+        state,
+        labels,
+      ),
+    ).toEqual({});
+  });
+
+  it("names the button after what it does", () => {
+    expect(getVideoToggleAttributes(unnamed, state, labels)).toEqual({
+      role: "button",
+      tabindex: 0,
+      "aria-label": "Play video",
+      "aria-describedby": undefined,
+      "aria-disabled": undefined,
+      title: "Play video",
+    });
+    expect(
+      getVideoToggleAttributes(unnamed, { ...state, isPlaying: true }, labels)[
+        "aria-label"
+      ],
+    ).toBe("Pause video");
+  });
+
+  it("keeps the action in the name of a named video and describes it by the video", () => {
+    const named = getVideoElementOptions(
+      element({ ariaLabel: "Product demo" }),
+    );
+
+    expect(
+      getVideoToggleAttributes(named, { ...state, isPlaying: true }, labels),
+    ).toMatchObject({
+      "aria-label": "Pause video",
+      "aria-describedby": "video-1",
+      title: "Product demo",
+    });
+  });
+
+  it("reports a video that failed to load and stays focusable", () => {
+    expect(
+      getVideoToggleAttributes(
+        getVideoElementOptions(element({ ariaLabel: "Product demo" })),
+        { ...state, hasFailed: true },
+        labels,
+      ),
+    ).toEqual({
+      role: "button",
+      tabindex: 0,
+      "aria-label": "The video could not be loaded.",
+      "aria-describedby": "video-1",
+      "aria-disabled": true,
+      title: "The video could not be loaded.",
+    });
+  });
+});

package/app/helpers/cms/getVideoElementOptions.ts

@@ -0,0 +1,142 @@
+import type {
+  CmsElementVideo,
+  MediaDisplayMode,
+  VerticalAlign,
+} from "@shopware/composables";
+import { getTranslatedProperty } from "@shopware/helpers";
+
+type Alignment = Exclude<VerticalAlign, "">;
+
+export type VideoElementOptions = {
+  src?: string;
+  mimeType?: string;
+  poster?: string;
+  displayMode: MediaDisplayMode;
+  minHeight?: string;
+  placeholderAspectRatio?: string;
+  verticalAlign?: Alignment;
+  horizontalAlign?: Alignment;
+  autoplay: boolean;
+  muted: boolean;
+  loop: boolean;
+  playsInline: boolean;
+  controls: boolean;
+  preload: "auto" | "none";
+  ariaLabel?: string;
+  title?: string;
+};
+
+export type VideoToggleState = {
+  isPlaying: boolean;
+  hasFailed: boolean;
+  videoId: string;
+};
+
+export type VideoToggleLabels = {
+  playLabel: string;
+  pauseLabel: string;
+  loadError: string;
+};
+
+const DISPLAY_MODES: MediaDisplayMode[] = ["standard", "stretch", "cover"];
+const ALIGNMENTS: Alignment[] = ["flex-start", "center", "flex-end"];
+
+function getConfigValue<KEY extends keyof CmsElementVideo["config"]>(
+  element: CmsElementVideo,
+  key: KEY,
+): CmsElementVideo["config"][KEY]["value"] | undefined {
+  const config = element.config?.[key];
+
+  return config?.source === "mapped" ? undefined : config?.value;
+}
+
+function toAlignment(value: unknown): Alignment | undefined {
+  return ALIGNMENTS.find((alignment) => alignment === value);
+}
+
+export function getVideoElementOptions(
+  element: CmsElementVideo,
+): VideoElementOptions {
+  const media = element.data?.media ?? undefined;
+  const displayMode =
+    DISPLAY_MODES.find(
+      (mode) => mode === getConfigValue(element, "displayMode"),
+    ) ?? "standard";
+  const isCover = displayMode === "cover";
+  const showCover = !!getConfigValue(element, "showCover");
+  const autoplay = !showCover && !!getConfigValue(element, "autoPlay");
+  const poster =
+    (showCover && media?.extensions?.videoCoverMedia?.url) || undefined;
+  const label =
+    element.config?.ariaLabel?.source === "mapped"
+      ? ""
+      : (element.data?.ariaLabel ?? "").trim();
+
+  return {
+    src: media?.url || undefined,
+    mimeType: media?.mimeType || undefined,
+    poster,
+    displayMode,
+    minHeight: (isCover && getConfigValue(element, "minHeight")) || undefined,
+    placeholderAspectRatio:
+      showCover && !poster && displayMode === "stretch"
+        ? "auto 16 / 9"
+        : undefined,
+    verticalAlign: isCover
+      ? undefined
+      : toAlignment(getConfigValue(element, "verticalAlign")),
+    horizontalAlign: isCover
+      ? undefined
+      : toAlignment(getConfigValue(element, "horizontalAlign")),
+    autoplay,
+    muted: autoplay || !!getConfigValue(element, "muted"),
+    loop: !!getConfigValue(element, "loop"),
+    playsInline: !!getConfigValue(element, "playsInline"),
+    controls: !!getConfigValue(element, "showControls"),
+    preload: showCover ? "none" : "auto",
+    ariaLabel: label || getTranslatedProperty(media, "alt").trim() || undefined,
+    title: label || getTranslatedProperty(media, "title").trim() || undefined,
+  };
+}
+
+export function getVideoAttributes(options: VideoElementOptions) {
+  return {
+    preload: options.preload,
+    poster: options.poster,
+    autoplay: options.autoplay,
+    muted: options.muted,
+    loop: options.loop,
+    playsinline: options.playsInline || undefined,
+    controls: options.controls,
+    "aria-label": options.ariaLabel,
+    title: options.title,
+  };
+}
+
+function getToggleLabel(
+  state: VideoToggleState,
+  labels: VideoToggleLabels,
+): string {
+  if (state.hasFailed) return labels.loadError;
+
+  return state.isPlaying ? labels.pauseLabel : labels.playLabel;
+}
+
+export function getVideoToggleAttributes(
+  options: VideoElementOptions,
+  state: VideoToggleState,
+  labels: VideoToggleLabels,
+) {
+  if (options.controls) return {};
+
+  const label = getToggleLabel(state, labels);
+
+  return {
+    role: "button",
+    tabindex: 0,
+    "aria-label": label,
+    "aria-describedby": options.ariaLabel ? state.videoId : undefined,
+    "aria-disabled": state.hasFailed || undefined,
+    title: (!state.hasFailed && options.title) || label,
+  };
+}

package/app/helpers/html-to-vue/renderToHtml.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vitest";
+import { h } from "vue";
+
+import { renderHtml } from "./renderToHtml";
+
+describe("renderHtml", () => {
+  const resolveUrl = (url: string) => url;
+
+  const render = (
+    html: string,
+    config: Parameters<typeof renderHtml>[1] = {},
+  ) => renderHtml(html, config, h, null, resolveUrl);
+
+  it("wraps the content in a plain div by default", () => {
+    const vnode = render("<p>content</p>");
+
+    expect(vnode.type).toBe("div");
+    expect(vnode.props?.class).toBeUndefined();
+  });
+
+  it("applies container.class to the wrapper element", () => {
+    const vnode = render("<h1>headline</h1>", {
+      container: { type: "div", class: "cms-element-text" },
+    });
+
+    expect(vnode.props?.class).toBe("cms-element-text");
+  });
+
+  it("honours a custom container type", () => {
+    const vnode = render("<p>content</p>", {
+      container: { type: "section", class: "cms-element-text" },
+    });
+
+    expect(vnode.type).toBe("section");
+  });
+
+  it("does not leak container.class into later renders", () => {
+    render("<p>scoped</p>", {
+      container: { type: "div", class: "cms-element-text" },
+    });
+
+    const vnode = render("<p>unscoped</p>");
+
+    expect(vnode.props?.class).toBeUndefined();
+  });
+
+  it("passes the attributes of a tag as flat props", () => {
+    const vnode = render(
+      '<table><tr><td colspan="2" id="total" class="sum" style="color:red">1</td></tr></table>',
+    );
+    const table = (vnode.children as { children: unknown[] }[])[0];
+    const row = table?.children[0] as { children: unknown[] };
+    const cell = row.children[0] as { props: Record<string, unknown> };
+
+    expect(cell.props).toEqual({
+      colspan: "2",
+      id: "total",
+      class: "sum",
+      style: "color:red",
+    });
+  });
+
+  it("keeps rendering the parsed children next to the container class", () => {
+    const vnode = render("<h2>headline</h2>", {
+      container: { type: "div", class: "cms-element-text" },
+    });
+
+    expect(Array.isArray(vnode.children)).toBe(true);
+    expect((vnode.children as { type: string }[])[0]?.type).toBe("h2");
+  });
+});

package/app/helpers/html-to-vue/renderToHtml.ts

@@ -25,7 +25,11 @@ export function renderHtml(
   context: ComponentInternalInstance | null,
   resolveUrl: (url: string) => string,
 ) {
-  const mergedConfig = Object.assign(defaultConfig, config);
+  const mergedConfig: DefaultConfig = {
+    ...defaultConfig,
+    ...config,
+    container: { ...defaultConfig.container, ...config.container },
+  };
   const _ast = generateAST(html);
   const rectifyConfig: RectifyConfig = {
     extraComponentsMap: config.extraComponentsMap,

package/app/helpers/html-to-vue/renderer.ts

@@ -27,6 +27,7 @@ export type ExtraComponentConfig = {
 export type RendererConfig = {
   container: {
     type: string;
+    class?: string;
   };
   extraComponentsMap: Record<string, ExtraComponentConfig>;
   renderAnyway: boolean;
@@ -91,7 +92,6 @@ export function renderer(
         return config.textTransformer(node.content); // return text
       }
       if (node.type === "tag") {
-        const transformedNode = getOptionsFromNode(node, resolveUrl);
         const children: RawChildren[] = [];
         for (const child of node.children) {
           const rendered = _render(h, child);
@@ -103,8 +103,9 @@ export function renderer(
         if (componentConfig !== undefined) {
           return componentConfig.renderer(node, children, h, context);
         }
-        // else, create normal html element
-        return h(node.name, transformedNode, [...children]);
+        // else, create normal html element; Vue 3 takes attributes as flat props
+        const { attrs, ...options } = getOptionsFromNode(node, resolveUrl);
+        return h(node.name, { ...attrs, ...options }, [...children]);
       }
     }
     return undefined;
@@ -113,5 +114,13 @@ export function renderer(
   const rendered = _render(createElement, ast);
   const children = flattenChildren(rendered);
 
-  return createElement(config.container.type, context?.data || {}, children);
+  const containerProps: Record<string, unknown> = { ...(context?.data || {}) };
+
+  if (config.container.class) {
+    containerProps.class = containerProps.class
+      ? [containerProps.class, config.container.class]
+      : config.container.class;
+  }
+
+  return createElement(config.container.type, containerProps, children);
 }

package/app/helpers/product/shouldShowBuyButton.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+
+import { shouldShowBuyButton } from "./shouldShowBuyButton";
+
+describe("shouldShowBuyButton", () => {
+  it("shows the button for a product without variants", () => {
+    expect(shouldShowBuyButton({ childCount: 0 })).toBe(true);
+  });
+
+  it("shows the button when childCount is missing", () => {
+    expect(shouldShowBuyButton({})).toBe(true);
+  });
+
+  it("hides the button for a variant parent", () => {
+    expect(shouldShowBuyButton({ childCount: 2 })).toBe(false);
+  });
+
+  it("hides the button when there is a from price", () => {
+    expect(shouldShowBuyButton({ childCount: 0 }, true)).toBe(false);
+  });
+});

package/app/helpers/product/shouldShowBuyButton.ts

@@ -0,0 +1,6 @@
+export function shouldShowBuyButton(
+  product: { childCount?: number } | undefined,
+  displayFrom = false,
+): boolean {
+  return !displayFrom && (product?.childCount ?? 0) <= 0;
+}