@shopware/cms-base-layer 3.0.1 → 4.0.0

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/CmsGenericBlock.vue

@@ -71,7 +71,7 @@ const DynamicRender = () => {
   }
   if (import.meta.dev) {
     console.warn(
-      `[CMS] Block type "${componentName}" is not implemented.\n  → Create a component named "${componentNameToResolve}.vue" to render it.\n  📖 Docs: https://frontends.shopware.com/getting-started/cms/create-blocks`,
+      `[CMS] Block type "${componentName}" is not implemented.\n  → Create a component named "${componentNameToResolve}.vue" to render it.\n  📖 Docs: https://developer.shopware.com/frontends/guides/cms/create-blocks`,
     );
     return h(resolveComponent("CmsNoComponent"), { content: props.content });
   }

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

@@ -31,7 +31,7 @@ const DynamicRender = () => {
   }
   if (import.meta.dev) {
     console.warn(
-      `[CMS] Element type "${componentName}" is not implemented.\n  → Create a component named "${componentNameToResolve}.vue" to render it.\n  📖 Docs: https://frontends.shopware.com/getting-started/cms/create-elements`,
+      `[CMS] Element type "${componentName}" is not implemented.\n  → Create a component named "${componentNameToResolve}.vue" to render it.\n  📖 Docs: https://developer.shopware.com/frontends/guides/cms/create-elements`,
     );
     return h(resolveComponent("CmsNoComponent"), { content: props.content });
   }

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

@@ -28,7 +28,7 @@ const docsUrl = computed(() => {
     component: expectedComponentName.value,
     type: elementType.value.toLowerCase(),
   });
-  return `https://frontends.shopware.com/getting-started/cms/missing-component?${params}`;
+  return `https://developer.shopware.com/frontends/guides/cms/missing-component?${params}`;
 });
 
 const aiPrompt = computed(() => {

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/block/CmsBlockCenterText.vue

@@ -22,6 +22,7 @@ const slotCenterContent = getSlotContent("center");
 
 <style scoped>
 .cms-block-center-text .cms-element-image {
-  @apply self-stretch min-h-12;
+  align-self: stretch;
+  min-height: 3rem;
 }
 </style>

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

@@ -30,6 +30,10 @@ const centerContent = getSlotContent("center");
 </template>
 <style scoped>
 .cms-block-image-bubble-row :deep(.cms-element-image) {
-  @apply object-cover max-w-xs overflow-hidden rounded-full aspect-square;
+  aspect-ratio: 1 / 1;
+  max-width: 20rem;
+  overflow: hidden;
+  border-radius: 9999px;
+  object-fit: cover;
 }
 </style>

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

@@ -35,10 +35,14 @@ const centerRightContent = getSlotContent("center-right");
 
 <style scoped>
 .cms-block-image-four-column :deep(.cms-element-image) {
-  @apply relative h-full w-full;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
 .cms-block-image-four-column :deep(.cms-element-image img) {
-  @apply w-full h-full object-cover;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 </style>

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

@@ -20,24 +20,28 @@ const cmsContent = getSlotContent("imageGallery");
 
 <style scoped>
 .cms-block-image-gallery-big {
-  @apply w-full;
+  width: 100%;
 }
 
 .cms-block-image-gallery-big :deep(.cms-element-image-gallery) {
-  @apply max-w-screen-xl mx-auto;
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 /* Enhanced styling for the big gallery version */
 .cms-block-image-gallery-big :deep(.gallery-slider) {
-  @apply max-h-[800px];
+  max-height: 800px;
 }
 
 .cms-block-image-gallery-big :deep(img) {
-  @apply object-contain mx-auto;
+  margin-left: auto;
+  margin-right: auto;
+  object-fit: contain;
 }
 
 /* Larger navigation controls */
 .cms-block-image-gallery-big :deep(.gallery-slider-controls) {
-  @apply scale-125;
+  transform: scale(1.25);
 }
 </style>

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

@@ -31,10 +31,15 @@ const centerContent = getSlotContent("center");
 
 <style scoped>
 .cms-block-image-highlight-row :deep(.cms-element-image) {
-  @apply relative h-full w-full border-[12px] border-surface-surface;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  border: 12px solid #ffffff;
 }
 
 .cms-block-image-highlight-row :deep(.cms-element-image img) {
-  @apply w-full h-full object-cover;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 </style>

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

@@ -43,14 +43,20 @@ const rightTextContent = getSlotContent("right-text");
 
 <style scoped>
 .cms-block-image-text-row :deep(.cms-element-image) {
-  @apply relative h-full w-full;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
 .cms-block-image-text-row :deep(.cms-element-image img) {
-  @apply w-full h-full object-cover rounded-lg;
+  height: 100%;
+  width: 100%;
+  border-radius: 0.5rem;
+  object-fit: cover;
 }
 
 .cms-block-image-text-row :deep(.cms-element-text) {
-  @apply self-stretch min-h-12;
+  align-self: stretch;
+  min-height: 3rem;
 }
 </style>

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

@@ -31,10 +31,15 @@ const centerContent = getSlotContent("center");
 
 <style scoped>
 .cms-block-image-three-cover :deep(.cms-element-image) {
-  @apply aspect-square relative h-full w-full;
+  position: relative;
+  aspect-ratio: 1 / 1;
+  height: 100%;
+  width: 100%;
 }
 
 .cms-block-image-three-cover :deep(.cms-element-image img) {
-  @apply w-full h-full object-cover;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 </style>

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

@@ -27,14 +27,18 @@ const rightContent = getSlotContent("right");
 
 <style scoped>
 .cms-block-image-two-column :deep(.cms-element-image) {
-  @apply relative h-full w-full;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
 .cms-block-image-two-column :deep(.cms-element-image img) {
-  @apply w-full h-full object-cover;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 
 .cms-block-image-two-column :deep(.cms-element-image-slider) {
-  @apply w-full;
+  width: 100%;
 }
 </style>

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

@@ -22,6 +22,7 @@ const rightContent = getSlotContent("right");
 
 <style scoped>
 .cms-block-product-heading .cms-element-image {
-  @apply max-w-[7.5rem] max-h-[7.5rem];
+  max-height: 7.5rem;
+  max-width: 7.5rem;
 }
 </style>

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"
@@ -92,7 +132,6 @@ const SwMedia3D = computed(() => {
       preset="productDetail"
       loading="lazy"
       :width="imageSize"
-      :height="imageSize"
       :class="{
         'w-full': !imageGallery,
         'h-full': !imageGallery && ['cover', 'stretch'].includes(displayMode),

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { encodeForQuery } from "@shopware/api-client/helpers";
 import type { CmsElementProductDescriptionReviews } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
 import { getTranslatedProperty } from "@shopware/helpers";
@@ -56,18 +57,26 @@ const isSectionOpen = (sectionNumber: number) => {
 };
 
 const reviews: Ref<Schemas["ProductReview"][]> = ref([]);
-const { apiClient } = useShopwareContext();
+const { apiClient, cacheableReads } = useShopwareContext();
 const { isLoggedIn } = useUser();
 const reviewAdded = ref(false);
 
 const fetchReviews = async () => {
   try {
-    const reviewsResponse = await apiClient.invoke(
-      "readProductReviews post /product/{productId}/reviews",
-      {
-        pathParams: { productId: product.value.id },
-      },
-    );
+    const reviewsResponse = cacheableReads
+      ? await apiClient.invoke(
+          "readProductReviewsGet get /product/{productId}/reviews",
+          {
+            pathParams: { productId: product.value.id },
+            query: { _criteria: encodeForQuery({}) },
+          },
+        )
+      : await apiClient.invoke(
+          "readProductReviews post /product/{productId}/reviews",
+          {
+            pathParams: { productId: product.value.id },
+          },
+        );
     reviews.value = reviewsResponse.data.elements || [];
   } catch (error) {
     console.error("Failed to fetch reviews:", error);
@@ -124,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>
@@ -233,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.