@shopware/cms-base-layer 3.0.0 → 3.1.0

package/app/components/SwQuantitySelect.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { defu } from "defu";
 import { computed, useId } from "vue";
+
 import { useCmsTranslations } from "#imports";
 
 type Translations = {
@@ -63,7 +64,9 @@ const sizeClasses = {
 };
 </script>
 <template>
-  <div class="rounded outline outline-1 outline-offset-[-1px] outline-outline-outline inline-flex">
+  <div
+    class="rounded outline outline-1 outline-offset-[-1px] outline-outline-outline inline-flex"
+  >
     <button
       type="button"
       :class="sizeClasses[size]"
@@ -73,9 +76,13 @@ const sizeClasses = {
     >
       -
     </button>
-    <div class="bg-white border-l border-r border-outline-outline inline-flex flex-col justify-center items-center">
+    <div
+      class="bg-white border-l border-r border-outline-outline inline-flex flex-col justify-center items-center"
+    >
       <!-- visually hidden label for screen readers -->
-      <label :for="inputId" class="sr-only">{{ translations.form.quantitySelect.label }}</label>
+      <label :for="inputId" class="sr-only">{{
+        translations.form.quantitySelect.label
+      }}</label>
 
       <input
         :id="inputId"

package/app/components/SwSharedPrice.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+
 import { usePrice } from "#imports";
 
 const { getFormattedPrice } = usePrice();

package/app/components/SwSlider.vue

@@ -11,6 +11,7 @@ import {
   watch,
 } from "vue";
 import type { CSSProperties, VNode, VNodeArrayChildren } from "vue";
+
 import { useCmsElementConfig, useHead, useId } from "#imports";
 import type { Schemas } from "#shopware";
 

package/app/components/SwStockInfo.vue

@@ -31,14 +31,20 @@ translations = defu(useCmsTranslations(), translations) as Translations;
 </script>
 <template>
   <div class="inline-flex justify-start items-center gap-2">
-    <div class="w-2 h-2 bg-states-success rounded-full" v-if="availableStock > 0"></div>
+    <div
+      class="w-2 h-2 bg-states-success rounded-full"
+      v-if="availableStock > 0"
+    ></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 }}
+    <span v-if="availableStock >= minPurchase && deliveryTime"
+      >{{ translations.product.deliveryTime }} {{ deliveryTime?.name }}
     </span>
-    <span v-else-if="availableStock < minPurchase && deliveryTime && restockTime">
+    <span
+      v-else-if="availableStock < minPurchase && deliveryTime && restockTime"
+    >
       {{ translations.product.deliveryTime }} {{ restockTime }}
-      {{ translations.product.days }} {{ deliveryTime?.name }}</span>
+      {{ translations.product.days }} {{ deliveryTime?.name }}</span
+    >
     <span v-else>{{ translations.product.noAvailable }}</span>
   </div>
-</template>
+</template>

package/app/components/SwVariantConfigurator.vue

@@ -4,6 +4,7 @@ import { buildUrlPrefix, getProductRoute } from "@shopware/helpers";
 import { defu } from "defu";
 import { computed, ref, unref } from "vue";
 import type { ComputedRef } from "vue";
+
 import { useProductConfigurator, useRouter, useUrlResolver } from "#imports";
 import type { Schemas } from "#shopware";
 
@@ -84,7 +85,9 @@ const onHandleChange = async () => {
       :key="optionGroup.id"
       class="mt-6"
     >
-      <div class="text-sm text-gray-900 font-medium">{{ optionGroup.name }}</div>
+      <div class="text-sm text-gray-900 font-medium">
+        {{ optionGroup.name }}
+      </div>
       <fieldset class="mt-4 flex-1">
         <legend class="sr-only">
           {{ translations.product.chooseA }} {{ optionGroup.name }}

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

@@ -5,7 +5,9 @@ import {
   getCmsLayoutConfiguration,
 } from "@shopware/helpers";
 import { h, provide, resolveComponent } from "vue";
+
 import type { Schemas } from "#shopware";
+
 import { useTypedAppConfig } from "../../../composables/useTypedAppConfig";
 import { getImageSizes } from "../../../helpers/cms/getImageSizes";
 
@@ -69,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

@@ -2,6 +2,7 @@
 import { resolveCmsComponent } from "@shopware/composables";
 import { getCmsLayoutConfiguration } from "@shopware/helpers";
 import { h, resolveComponent } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{
@@ -30,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

@@ -2,6 +2,7 @@
 import { refAutoReset } from "@vueuse/core";
 import { pascalCase } from "scule";
 import { computed } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{
@@ -27,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/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,8 +6,10 @@ import {
 } from "@shopware/helpers";
 import { pascalCase } from "scule";
 import { computed, h, resolveComponent, watchEffect } from "vue";
+
 import { createCategoryListingContext, useNavigationContext } from "#imports";
 import type { Schemas } from "#shopware";
+
 import { useLcpImagePreload } from "../../../composables/useLcpImagePreload";
 import { useTypedAppConfig } from "../../../composables/useTypedAppConfig";
 

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<{
@@ -21,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/CmsBlockCrossSelling.vue

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsBlockGalleryBuybox } from "@shopware/composables";
+
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -12,7 +13,9 @@ const leftContent = getSlotContent("left");
 </script>
 
 <template>
-  <div class="w-full flex flex-col lg:flex-row justify-center items-stretch gap-4 lg:gap-10 lg:px-0 overflow-hidden">
+  <div
+    class="w-full flex flex-col lg:flex-row justify-center items-stretch gap-4 lg:gap-10 lg:px-0 overflow-hidden"
+  >
     <!-- Gallery Section -->
     <div class="w-full lg:w-3/5">
       <CmsGenericElement :content="leftContent" />

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

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