@shopware/cms-base-layer 3.1.0 → 4.0.0

package/app/components/SwStockInfo.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { getTranslatedProperty } from "@shopware/helpers";
 import { defu } from "defu";
 
 import { useCmsTranslations } from "#imports";
@@ -37,13 +38,15 @@ translations = defu(useCmsTranslations(), translations) as Translations;
     ></div>
     <div class="w-2 h-2 bg-states-error rounded-full" v-else></div>
     <span v-if="availableStock >= minPurchase && deliveryTime"
-      >{{ translations.product.deliveryTime }} {{ deliveryTime?.name }}
+      >{{ translations.product.deliveryTime }}
+      {{ getTranslatedProperty(deliveryTime, "name") }}
     </span>
     <span
       v-else-if="availableStock < minPurchase && deliveryTime && restockTime"
     >
       {{ translations.product.deliveryTime }} {{ restockTime }}
-      {{ translations.product.days }} {{ deliveryTime?.name }}</span
+      {{ translations.product.days }}
+      {{ getTranslatedProperty(deliveryTime, "name") }}</span
     >
     <span v-else>{{ translations.product.noAvailable }}</span>
   </div>

package/app/components/SwVariantConfigurator.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { useCmsTranslations } from "@shopware/composables";
-import { buildUrlPrefix, getProductRoute } from "@shopware/helpers";
+import {
+  buildUrlPrefix,
+  getProductRoute,
+  getTranslatedProperty,
+} from "@shopware/helpers";
 import { defu } from "defu";
 import { computed, ref, unref } from "vue";
 import type { ComputedRef } from "vue";
@@ -86,11 +90,12 @@ const onHandleChange = async () => {
       class="mt-6"
     >
       <div class="text-sm text-gray-900 font-medium">
-        {{ optionGroup.name }}
+        {{ getTranslatedProperty(optionGroup, "name") }}
       </div>
       <fieldset class="mt-4 flex-1">
         <legend class="sr-only">
-          {{ translations.product.chooseA }} {{ optionGroup.name }}
+          {{ translations.product.chooseA }}
+          {{ getTranslatedProperty(optionGroup, "name") }}
         </legend>
         <div class="flex gap-3">
           <label

package/app/components/listing-filters/SwFilterCategories.vue

@@ -0,0 +1,158 @@
+<script
+  setup
+  lang="ts"
+  generic="
+    ListingFilter extends {
+      code: string;
+      label: string;
+      name: string;
+      entities?: Array<{
+        id: string;
+        name?: string;
+        translated?: { name?: string };
+      }>;
+    }
+  "
+>
+import { useCmsTranslations } from "@shopware/composables";
+import { excludeRootCategory, getTranslatedProperty } from "@shopware/helpers";
+import { defu } from "defu";
+import { computed, ref } from "vue";
+
+import { useSessionContext } from "#imports";
+
+const {
+  filter,
+  selectedFilters,
+  displayMode = "accordion",
+} = defineProps<{
+  filter: ListingFilter;
+  selectedFilters: {
+    categories?: string[];
+    [key: string]: unknown;
+  };
+  displayMode?: "accordion" | "dropdown";
+}>();
+
+const emits =
+  defineEmits<
+    (e: "select-value", value: { code: string; value: unknown }) => void
+  >();
+
+type Translations = {
+  listing: {
+    categories: string;
+  };
+};
+
+let translations: Translations = {
+  listing: {
+    categories: "Categories",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const { sessionContext } = useSessionContext();
+
+const categoryOptions = computed(() =>
+  excludeRootCategory(
+    filter.entities,
+    sessionContext.value?.salesChannel?.navigationCategoryId,
+  ),
+);
+
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
+
+const selectedIds = computed(() => selectedFilters?.categories || []);
+
+const isChecked = (id: string) => selectedIds.value.includes(id);
+
+const selectValue = (id: string) => {
+  emits("select-value", {
+    code: filter.code,
+    value: id,
+  });
+};
+</script>
+
+<template>
+  <div
+    v-if="categoryOptions.length"
+    class="self-stretch flex flex-col justify-start items-start gap-4"
+  >
+    <!-- Accordion header (only in accordion mode) -->
+    <template v-if="displayMode === 'accordion'">
+      <div class="self-stretch flex flex-col justify-center items-center">
+        <div
+          class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-between items-center gap-1 cursor-pointer"
+          @click="toggle"
+          role="button"
+          tabindex="0"
+          :aria-expanded="isFilterVisible"
+          :aria-controls="filter.code"
+          :aria-label="translations.listing.categories"
+          @keydown.enter="toggle"
+          @keydown.space.prevent="toggle"
+        >
+          <div class="flex-1 flex items-center gap-2.5">
+            <div
+              class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left"
+            >
+              {{ translations.listing.categories }}
+            </div>
+          </div>
+          <span class="flex items-center justify-center" aria-hidden="true">
+            <SwChevronIcon
+              :direction="isFilterVisible ? 'up' : 'down'"
+              :size="24"
+            />
+          </span>
+        </div>
+      </div>
+    </template>
+
+    <!-- Filter content -->
+    <transition name="filter-collapse">
+      <div
+        v-if="isFilterVisible || displayMode === 'dropdown'"
+        :id="filter.code"
+        class="self-stretch flex flex-col justify-start items-start gap-4"
+      >
+        <fieldset
+          class="self-stretch flex flex-col justify-start items-start gap-4"
+        >
+          <legend class="sr-only">{{ translations.listing.categories }}</legend>
+          <label
+            v-for="option in categoryOptions"
+            :key="option.id"
+            class="self-stretch inline-flex justify-start items-start gap-2 cursor-pointer"
+          >
+            <div
+              class="w-4 self-stretch pt-[3px] flex justify-start items-start gap-2.5"
+            >
+              <SwCheckbox
+                :model-value="isChecked(option.id)"
+                @update:model-value="() => selectValue(option.id)"
+              />
+            </div>
+            <div
+              class="flex-1 inline-flex flex-col justify-start items-start gap-0.5"
+            >
+              <div class="inline-flex justify-start items-center gap-1">
+                <div
+                  class="flex-1 text-surface-on-surface text-base font-normal leading-normal"
+                >
+                  {{ getTranslatedProperty(option, "name") }}
+                </div>
+              </div>
+            </div>
+          </label>
+        </fieldset>
+      </div>
+    </transition>
+  </div>
+</template>

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

@@ -38,7 +38,7 @@ useSeoMeta({
     >
       <div
         v-if="registrationResponse?.translated.registrationIntroduction"
-        class="px-6 sm:px-4 mb-6"
+        class="cms-element-text px-6 sm:px-4 mb-6"
         v-html="registrationResponse.translated.registrationIntroduction"
       />
       <AccountRegistrationForm

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { CmsElementBuyBox } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
+import { getTranslatedProperty } from "@shopware/helpers";
 import { defu } from "defu";
 import { computed } from "vue";
 
@@ -64,7 +65,9 @@ const referencePrice = computed(
   () => product.value?.calculatedPrice?.referencePrice,
 );
 const purchaseUnit = computed(() => product.value?.purchaseUnit);
-const unitName = computed(() => product.value?.unit?.name);
+const unitName = computed(() =>
+  getTranslatedProperty(product.value?.unit, "name"),
+);
 const productName = computed(() => product.value?.translated?.name || "");
 </script>
 <template>

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/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

@@ -32,6 +32,10 @@ const CmsTextRender = defineComponent({
     const { resolveUrl } = useUrlResolver();
 
     const config = {
+      container: {
+        type: "div",
+        class: "cms-element-text",
+      },
       textTransformer: (text: string) => decodeHTML(text),
       extraComponentsMap: {
         link: {
@@ -148,7 +152,7 @@ const CmsTextRender = defineComponent({
     const rawHtml =
       mappedContent.value?.length > 0
         ? mappedContent.value
-        : "<div class='cms-element-text missing-content-element'></div>";
+        : "<div class='missing-content-element'></div>";
 
     return () => renderHtml(rawHtml, config, h, context, resolveUrl);
   },
@@ -160,34 +164,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/helpers/html-to-vue/renderToHtml.test.ts

@@ -0,0 +1,55 @@
+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("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;
@@ -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/utils/listingFilters.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+
+import { getVisibleListingFilters } from "./listingFilters";
+
+describe("getVisibleListingFilters", () => {
+  const filters = [
+    { code: "manufacturer" },
+    { code: "categories" },
+    { code: "price" },
+  ];
+
+  it("should keep the categories filter on a search listing", () => {
+    expect(
+      getVisibleListingFilters(filters, { isProductSearch: true }),
+    ).toStrictEqual(filters);
+  });
+
+  it("should drop the categories filter on a non-search listing", () => {
+    expect(
+      getVisibleListingFilters(filters, { isProductSearch: false }),
+    ).toStrictEqual([{ code: "manufacturer" }, { code: "price" }]);
+  });
+
+  it("should leave listings without a categories filter untouched", () => {
+    const withoutCategories = [{ code: "manufacturer" }, { code: "rating" }];
+    expect(
+      getVisibleListingFilters(withoutCategories, { isProductSearch: false }),
+    ).toStrictEqual(withoutCategories);
+  });
+
+  it("should return an empty array for missing filters", () => {
+    expect(
+      getVisibleListingFilters(undefined, { isProductSearch: true }),
+    ).toStrictEqual([]);
+    expect(
+      getVisibleListingFilters(null, { isProductSearch: false }),
+    ).toStrictEqual([]);
+  });
+});

package/app/utils/listingFilters.ts

@@ -0,0 +1,19 @@
+import { CATEGORY_AGGREGATION_NAME } from "@shopware/helpers";
+
+/**
+ * Narrows the listing filters to the ones the current listing can act on.
+ *
+ * The category selection is only written to the `categories` URL param and to
+ * the criteria `post-filter` on search listings. A category listing that
+ * happens to request the category aggregations would otherwise render a
+ * checkbox that the next query sync resets and that never changes the result
+ * set, so the filter is dropped there.
+ */
+export const getVisibleListingFilters = <T extends { code: string }>(
+  filters: T[] | undefined | null,
+  { isProductSearch }: { isProductSearch: boolean },
+): T[] => {
+  if (!filters) return [];
+  if (isProductSearch) return filters;
+  return filters.filter((filter) => filter.code !== CATEGORY_AGGREGATION_NAME);
+};