@shopware/cms-base-layer 2.1.0 → 3.0.1

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

@@ -1,15 +1,20 @@
-<script setup lang="ts" generic="
+<script
+  setup
+  lang="ts"
+  generic="
     ListingFilter extends {
       code: string;
       min?: number;
       max?: number;
       label: string;
     }
-  ">
+  "
+>
 import { useCmsTranslations } from "@shopware/composables";
 import { onClickOutside, useDebounceFn, useEventListener } from "@vueuse/core";
 import { defu } from "defu";
 import { onMounted, reactive, ref, watch } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const emits =
@@ -149,15 +154,17 @@ const startDrag = (type: "min" | "max", event: MouseEvent | TouchEvent) => {
           @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">
+            <div
+              class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left"
+            >
               {{ filter.label }}
             </div>
           </div>
-          <span
-            class="flex items-center justify-center"
-            aria-hidden="true"
-          >
-            <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+          <span class="flex items-center justify-center" aria-hidden="true">
+            <SwChevronIcon
+              :direction="isFilterVisible ? 'up' : 'down'"
+              :size="24"
+            />
           </span>
         </div>
       </div>
@@ -165,52 +172,94 @@ const startDrag = (type: "min" | "max", event: MouseEvent | TouchEvent) => {
 
     <!-- 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-2.5">
+      <div
+        v-if="isFilterVisible || displayMode === 'dropdown'"
+        :id="filter.code"
+        class="self-stretch flex flex-col justify-start items-start gap-2.5"
+      >
         <div class="self-stretch flex flex-col justify-start items-start gap-1">
-          <div class="self-stretch inline-flex justify-between items-center gap-2">
+          <div
+            class="self-stretch inline-flex justify-between items-center gap-2"
+          >
             <div
-              class="w-16 h-10 px-2 py-1 rounded-lg outline outline-1 outline-offset-[-1px] outline-outline-outline-variant inline-flex flex-col justify-center items-start gap-2.5">
-              <input type="number" :placeholder="translations.listing.min" v-model.number="prices.min"
+              class="w-16 h-10 px-2 py-1 rounded-lg outline outline-1 outline-offset-[-1px] outline-outline-outline-variant inline-flex flex-col justify-center items-start gap-2.5"
+            >
+              <input
+                type="number"
+                :placeholder="translations.listing.min"
+                v-model.number="prices.min"
                 class="w-full bg-transparent border-none outline-none text-surface-on-surface text-sm font-normal leading-tight"
-                @change="emits('select-value', { code: filter.code, value: { min: prices.min, max: prices.max } })"
-                :min="filter.min" :max="prices.max" />
+                @change="
+                  emits('select-value', {
+                    code: filter.code,
+                    value: { min: prices.min, max: prices.max },
+                  })
+                "
+                :min="filter.min"
+                :max="prices.max"
+              />
             </div>
             <div
-              class="w-16 h-10 px-2 py-1 rounded-lg outline outline-1 outline-offset-[-1px] outline-outline-outline-variant inline-flex flex-col justify-center items-start gap-2.5">
-              <input type="number" :placeholder="translations.listing.max" v-model.number="prices.max"
+              class="w-16 h-10 px-2 py-1 rounded-lg outline outline-1 outline-offset-[-1px] outline-outline-outline-variant inline-flex flex-col justify-center items-start gap-2.5"
+            >
+              <input
+                type="number"
+                :placeholder="translations.listing.max"
+                v-model.number="prices.max"
                 class="w-full bg-transparent border-none outline-none text-surface-on-surface text-sm font-normal leading-tight"
-                @change="emits('select-value', { code: filter.code, value: { min: prices.min, max: prices.max } })"
-                :min="prices.min" :max="filter.max" />
+                @change="
+                  emits('select-value', {
+                    code: filter.code,
+                    value: { min: prices.min, max: prices.max },
+                  })
+                "
+                :min="prices.min"
+                :max="filter.max"
+              />
             </div>
           </div>
           <!-- Custom slider UI -->
-          <div class="relative w-64 h-10 mt-2 mx-auto flex items-center select-none">
+          <div
+            class="relative w-64 h-10 mt-2 mx-auto flex items-center select-none"
+          >
             <!-- Track -->
             <div
-              class="absolute left-0 top-1/2 -translate-y-1/2 w-full h-2 bg-surface-surface-container-highest rounded-full">
-            </div>
+              class="absolute left-0 top-1/2 -translate-y-1/2 w-full h-2 bg-surface-surface-container-highest rounded-full"
+            ></div>
             <!-- Active range -->
-            <div class="absolute top-1/2 -translate-y-1/2 h-2 bg-surface-surface-primary rounded-full" :style="{
-              left: ((prices.min - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100 + '%',
-              width: ((prices.max - prices.min) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100 + '%',
-            }"></div>
+            <div
+              class="absolute top-1/2 -translate-y-1/2 h-2 bg-surface-surface-primary rounded-full"
+              :style="{
+                left:
+                  ((prices.min - (filter.min ?? 0)) /
+                    ((filter.max ?? 100) - (filter.min ?? 0))) *
+                    100 +
+                  '%',
+                width:
+                  ((prices.max - prices.min) /
+                    ((filter.max ?? 100) - (filter.min ?? 0))) *
+                    100 +
+                  '%',
+              }"
+            ></div>
             <!-- Min thumb -->
             <div
               class="absolute top-1/2 -translate-y-1/2 w-5 h-5 bg-brand-primary rounded-full shadow-[2px_2px_10px_0px_rgba(0,0,0,0.15)] cursor-pointer touch-none"
               :style="{
-                left: `calc(${((prices.min - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100}% - 10px)`
+                left: `calc(${((prices.min - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100}% - 10px)`,
               }"
               @mousedown.prevent="startDrag('min', $event)"
-              @touchstart.prevent="startDrag('min', $event)"></div>
+              @touchstart.prevent="startDrag('min', $event)"
+            ></div>
             <!-- Max thumb -->
             <div
               class="absolute top-1/2 -translate-y-1/2 w-5 h-5 bg-brand-primary rounded-full shadow-[2px_2px_10px_0px_rgba(0,0,0,0.15)] cursor-pointer touch-none"
               :style="{
-                left: `calc(${((prices.max - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100}% - 10px)`
+                left: `calc(${((prices.max - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100}% - 10px)`,
               }"
               @mousedown.prevent="startDrag('max', $event)"
-              @touchstart.prevent="startDrag('max', $event)"></div>
+              @touchstart.prevent="startDrag('max', $event)"
+            ></div>
           </div>
         </div>
       </div>

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

@@ -13,6 +13,7 @@
 >
 import { getTranslatedProperty } from "@shopware/helpers";
 import { computed, ref } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const {
@@ -75,15 +76,17 @@ const selectValue = (id: string) => {
           @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">
+            <div
+              class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left"
+            >
               {{ filter.label }}
             </div>
           </div>
-          <span
-            class="flex items-center justify-center"
-            aria-hidden="true"
-          >
-            <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+          <span class="flex items-center justify-center" aria-hidden="true">
+            <SwChevronIcon
+              :direction="isFilterVisible ? 'up' : 'down'"
+              :size="24"
+            />
           </span>
         </div>
       </div>
@@ -91,28 +94,40 @@ const selectValue = (id: string) => {
 
     <!-- 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">{{ filter.name }}</legend>
-        <label
-          v-for="option in filter.options || filter.entities"
-          :key="`${option.id}-${isChecked(option.id)}`"
-          class="self-stretch inline-flex justify-start items-start gap-2 cursor-pointer"
+      <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"
         >
-          <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') }}
+          <legend class="sr-only">{{ filter.name }}</legend>
+          <label
+            v-for="option in filter.options || filter.entities"
+            :key="`${option.id}-${isChecked(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>
-          </div>
-        </label>
+          </label>
         </fieldset>
       </div>
     </transition>

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

@@ -9,6 +9,7 @@
   "
 >
 import { computed, ref } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const emits =
@@ -65,15 +66,17 @@ const 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">
+            <div
+              class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left"
+            >
               {{ filter.label }}
             </div>
           </div>
-          <span
-            class="flex items-center justify-center"
-            aria-hidden="true"
-          >
-            <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+          <span class="flex items-center justify-center" aria-hidden="true">
+            <SwChevronIcon
+              :direction="isFilterVisible ? 'up' : 'down'"
+              :size="24"
+            />
           </span>
         </div>
       </div>
@@ -81,14 +84,23 @@ const toggle = () => {
 
     <!-- Filter content -->
     <transition name="filter-collapse">
-      <div v-if="isFilterVisible || displayMode === 'dropdown'" class="self-stretch flex flex-col justify-start items-start gap-4">
+      <div
+        v-if="isFilterVisible || displayMode === 'dropdown'"
+        class="self-stretch flex flex-col justify-start items-start gap-4"
+      >
         <div class="flex flex-row items-center gap-2 mt-2">
           <div
             v-for="i in 5"
             :key="i"
-            :class="['h-6 w-6 cursor-pointer', displayedScore >= i ? 'i-carbon-star-filled' : 'i-carbon-star']"
+            :class="[
+              'h-6 w-6 cursor-pointer',
+              displayedScore >= i ? 'i-carbon-star-filled' : 'i-carbon-star',
+            ]"
             @mouseleave="isHoverActive = false"
-            @click="hoverRating(i); onChangeRating()"
+            @click="
+              hoverRating(i);
+              onChangeRating();
+            "
             @mouseover="hoverRating(i)"
             :aria-label="`${i} star${i !== 1 ? 's' : ''}`"
           />

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

@@ -14,6 +14,7 @@ import { useCmsTranslations } from "@shopware/composables";
 import { onClickOutside } from "@vueuse/core";
 import { defu } from "defu";
 import { computed, ref } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const {
@@ -77,15 +78,17 @@ const handleRadioUpdate = (val: string | null | boolean | undefined) => {
           @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">
+            <div
+              class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left"
+            >
               {{ filter.label }}
             </div>
           </div>
-          <span
-            class="flex items-center justify-center"
-            aria-hidden="true"
-          >
-            <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+          <span class="flex items-center justify-center" aria-hidden="true">
+            <SwChevronIcon
+              :direction="isFilterVisible ? 'up' : 'down'"
+              :size="24"
+            />
           </span>
         </div>
       </div>
@@ -93,9 +96,14 @@ const handleRadioUpdate = (val: string | null | boolean | undefined) => {
 
     <!-- Filter content -->
     <transition name="filter-collapse">
-      <div v-if="isFilterVisible || displayMode === 'dropdown'" class="self-stretch">
+      <div
+        v-if="isFilterVisible || displayMode === 'dropdown'"
+        class="self-stretch"
+      >
         <div class="pt-6 space-y-4">
-          <div class="self-stretch inline-flex justify-start items-start gap-2 w-full">
+          <div
+            class="self-stretch inline-flex justify-start items-start gap-2 w-full"
+          >
             <div class="flex-1 pt-[3px]">
               <SwSwitchButton
                 :model-value="currentFilterData"

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed, defineAsyncComponent } from "vue";
+
 import { useCmsBlock } from "#imports";
 import type { Schemas } from "#shopware";
 

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

@@ -4,16 +4,18 @@ import {
   getBackgroundImageUrl,
   getCmsLayoutConfiguration,
 } from "@shopware/helpers";
-import { h, provide } from "vue";
-import { useAppConfig } from "#imports";
+import { h, provide, resolveComponent } from "vue";
+
 import type { Schemas } from "#shopware";
+
+import { useTypedAppConfig } from "../../../composables/useTypedAppConfig";
 import { getImageSizes } from "../../../helpers/cms/getImageSizes";
 
 const props = defineProps<{
   content: Schemas["CmsBlock"];
 }>();
 
-const appConfig = useAppConfig();
+const appConfig = useTypedAppConfig();
 
 const slotCount = props.content.slots?.length || 1;
 provide("cms-block-slot-count", slotCount);
@@ -67,7 +69,12 @@ const DynamicRender = () => {
       }),
     );
   }
-  console.error(`Component not resolve: ${componentNameToResolve}`);
+  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`,
+    );
+    return h(resolveComponent("CmsNoComponent"), { content: props.content });
+  }
   return h("div", {}, "");
 };
 </script>

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { resolveCmsComponent } from "@shopware/composables";
 import { getCmsLayoutConfiguration } from "@shopware/helpers";
-import { h } from "vue";
+import { h, resolveComponent } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{
@@ -28,7 +29,12 @@ const DynamicRender = () => {
       class: cssClasses,
     });
   }
-  console.error(`Component not resolved: ${componentNameToResolve}`);
+  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`,
+    );
+    return h(resolveComponent("CmsNoComponent"), { content: props.content });
+  }
   return h("div", {}, "");
 };
 </script>

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

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { refAutoReset } from "@vueuse/core";
+import { pascalCase } from "scule";
 import { computed } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{
-  content: Schemas["CmsBlock"];
+  content: Schemas["CmsSection"] | Schemas["CmsBlock"] | Schemas["CmsSlot"];
 }>();
 
 const elementType = computed(() =>
@@ -15,13 +18,90 @@ const elementType = computed(() =>
 );
 
 const componentName = computed(() => props.content.type);
+
+const expectedComponentName = computed(() =>
+  pascalCase(`Cms-${elementType.value}-${componentName.value ?? ""}`),
+);
+
+const docsUrl = computed(() => {
+  const params = new URLSearchParams({
+    component: expectedComponentName.value,
+    type: elementType.value.toLowerCase(),
+  });
+  return `https://frontends.shopware.com/getting-started/cms/missing-component?${params}`;
+});
+
+const aiPrompt = computed(() => {
+  const schemaType =
+    props.content.apiAlias === "cms_block"
+      ? 'Schemas["CmsBlock"]'
+      : props.content.apiAlias === "cms_section"
+        ? 'Schemas["CmsSection"]'
+        : 'Schemas["CmsSlot"]';
+
+  const contentJson = JSON.stringify(props.content, null, 2);
+  const type = elementType.value.toLowerCase();
+  const name = componentName.value;
+  const compName = expectedComponentName.value;
+
+  return [
+    `Create a Vue 3 component \`${compName}.vue\` for a Shopware Frontends headless storefront.`,
+    "",
+    `This component renders the CMS ${type} type: "${name}" (apiAlias: "${props.content.apiAlias}").`,
+    "",
+    "Requirements:",
+    `- Accept a \`content: ${schemaType}\` prop`,
+    `- Render the data for CMS ${type} type "${name}"`,
+    `- Follow patterns from existing Cms${elementType.value} components in packages/cms-base-layer/app/components/public/cms/${type}/`,
+    "- Use composables from @shopware/composables where applicable",
+    "",
+    `The full content prop for this ${type} is:`,
+    contentJson,
+    "",
+    `Reference: ${docsUrl.value}`,
+  ].join("\n");
+});
+
+const copied = refAutoReset(false, 2000);
+
+async function copyPrompt() {
+  try {
+    await navigator.clipboard.writeText(aiPrompt.value);
+    copied.value = true;
+  } catch {
+    // Fallback: clipboard API unavailable (non-secure origin, unfocused document)
+    console.warn("[CMS] Could not copy to clipboard. Prompt logged below:");
+    console.info(aiPrompt.value);
+  }
+}
 </script>
-Ū
+
 <template>
-  <span class="sw-text-error">
-    <b>
-      {{ elementType }}<i> {{ componentName }} </i>
-    </b>
-    is not implemented yet!
-  </span>
+  <div
+    class="sw-cms-no-component box-border min-h-[40px] rounded border-2 border-dashed border-brand-primary bg-brand-secondary font-mono text-[11px] text-brand-on-secondary"
+  >
+    <div class="flex flex-wrap items-center gap-1.5 px-2 py-1.5">
+      <span class="text-brand-primary">⚠ missing implementation:</span>
+      <span class="font-semibold">{{ expectedComponentName }}</span>
+
+      <a
+        :href="docsUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="View CMS documentation"
+        class="whitespace-nowrap rounded border border-outline-outline-primary bg-surface-surface px-[5px] py-px text-[10px] leading-none text-brand-primary no-underline hover:bg-brand-secondary-hover"
+      >
+        docs ↗
+      </a>
+
+      <button
+        type="button"
+        title="Copy AI prompt to clipboard"
+        class="cursor-pointer whitespace-nowrap rounded border border-outline-outline-primary bg-surface-surface px-[5px] py-px font-mono text-[10px] leading-none text-brand-primary hover:bg-brand-secondary-hover"
+        @click.stop="copyPrompt"
+      >
+        {{ copied ? "copied ✓" : "copy AI prompt" }}
+      </button>
+    </div>
+  </div>
 </template>

package/app/components/public/cms/CmsPage.md

@@ -15,7 +15,7 @@ export default defineAppConfig({
 });
 ```
 
-See the [cms-base-layer README](../../../../../../README.md#%EF%B8%8F-background-image-optimization) for full details.
+See the [cms-base-layer README](https://github.com/shopware/frontends/tree/main/packages/cms-base-layer#%EF%B8%8F-background-image-optimization) for full details.
 
 ### Example usage
 

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

@@ -6,20 +6,19 @@ import {
 } from "@shopware/helpers";
 import { pascalCase } from "scule";
 import { computed, h, resolveComponent, watchEffect } from "vue";
-import {
-  createCategoryListingContext,
-  useAppConfig,
-  useNavigationContext,
-} from "#imports";
+
+import { createCategoryListingContext, useNavigationContext } from "#imports";
 import type { Schemas } from "#shopware";
+
 import { useLcpImagePreload } from "../../../composables/useLcpImagePreload";
+import { useTypedAppConfig } from "../../../composables/useTypedAppConfig";
 
 const props = defineProps<{
   content: Schemas["CmsPage"];
 }>();
 
 const { routeName } = useNavigationContext();
-const appConfig = useAppConfig();
+const appConfig = useTypedAppConfig();
 
 // Function to initialize or update listing context
 function updateListingContext(content: Schemas["CmsPage"]) {

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const props = defineProps<{
+  navigationId: string;
+}>();
+
+const { apiClient } = useShopwareContext();
+
+const { data: registrationResponse } = await useAsyncData(
+  `cmsNavigation${props.navigationId}`,
+  async () => {
+    const response = await apiClient.invoke(
+      "getCustomerGroupRegistrationInfo get /customer-group-registration/config/{customerGroupId}",
+      {
+        pathParams: { customerGroupId: props.navigationId },
+      },
+    );
+    return response.data || {};
+  },
+);
+
+useSeoMeta({
+  description: () =>
+    registrationResponse.value?.translated?.registrationSeoMetaDescription ||
+    undefined,
+});
+</script>
+
+<template>
+  <div class="container mx-auto bg-surface-surface flex flex-col mt-10">
+    <h1
+      class="mb-4 text-2xl font-extrabold leading-none tracking-tight text-surface-on-surface md:text-3xl lg:text-5xl text-center"
+    >
+      {{ registrationResponse?.translated.registrationTitle }}
+    </h1>
+    <div
+      v-if="registrationResponse?.registrationActive"
+      class="text-lg font-normal text-surface-on-surface-variant lg:text-xl"
+    >
+      <div
+        v-if="registrationResponse?.translated.registrationIntroduction"
+        class="px-6 sm:px-4 mb-6"
+        v-html="registrationResponse.translated.registrationIntroduction"
+      />
+      <AccountRegistrationForm
+        :customer-group-id="registrationResponse?.id"
+        :company-only="
+          registrationResponse?.translated?.registrationOnlyCompanyRegistration
+        "
+      />
+    </div>
+  </div>
+</template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockCategoryNavigation } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockCenterText } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockCrossSelling } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{