@shopware/cms-base-layer 1.5.1 → 2.1.0

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

@@ -0,0 +1,219 @@
+<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 =
+  defineEmits<
+    (e: "select-value", value: { code: string; value: unknown }) => void
+  >();
+
+const {
+  filter,
+  selectedFilters,
+  displayMode = "accordion",
+} = defineProps<{
+  filter: ListingFilter;
+  selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
+  displayMode?: "accordion" | "dropdown";
+}>();
+
+type Translations = {
+  listing: {
+    min: string;
+    max: string;
+  };
+};
+let translations: Translations = {
+  listing: {
+    min: "Min",
+    max: "Max",
+  },
+};
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const prices = reactive<{ min: number; max: number }>({
+  min: 0,
+  max: 0,
+});
+
+onMounted(() => {
+  prices.min = Math.floor(selectedFilters.price?.min ?? filter.min ?? 0);
+  prices.max = Math.floor(selectedFilters.price?.max ?? filter.max ?? 0);
+});
+
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
+
+const dropdownElement = ref(null);
+onClickOutside(dropdownElement, () => {
+  isFilterVisible.value = false;
+});
+
+function onMinPriceChange(newPrice: number, oldPrice: number) {
+  if (newPrice === oldPrice || oldPrice === 0) return;
+  emits("select-value", {
+    code: "min-price",
+    value: newPrice,
+  });
+}
+const debounceMinPriceUpdate = useDebounceFn(onMinPriceChange, 500);
+watch(() => prices.min, debounceMinPriceUpdate);
+
+function onMaxPriceChange(newPrice: number, oldPrice: number) {
+  if (newPrice === oldPrice || oldPrice === 0) return;
+  emits("select-value", {
+    code: "max-price",
+    value: newPrice,
+  });
+}
+const debounceMaxPriceUpdate = useDebounceFn(onMaxPriceChange, 500);
+watch(() => prices.max, debounceMaxPriceUpdate);
+
+// Slider drag logic
+type DragType = "min" | "max" | null;
+const dragging = ref<DragType>(null);
+const sliderRect = ref<DOMRect | null>(null);
+
+const getClientX = (event: MouseEvent | TouchEvent): number =>
+  event instanceof MouseEvent ? event.clientX : event.touches[0]?.clientX || 0;
+
+const updateSliderValue = (clientX: number) => {
+  if (!dragging.value || !sliderRect.value) return;
+
+  const min = filter.min ?? 0;
+  const max = filter.max ?? 100;
+  const percent = Math.min(
+    Math.max((clientX - sliderRect.value.left) / sliderRect.value.width, 0),
+    1,
+  );
+  const value = Math.round(min + percent * (max - min));
+
+  if (dragging.value === "min") {
+    if (value >= min && value <= prices.max) prices.min = value;
+  } else {
+    if (value <= max && value >= prices.min) prices.max = value;
+  }
+};
+
+const onDrag = (event: MouseEvent | TouchEvent) => {
+  if (!dragging.value) return;
+  event.preventDefault();
+  updateSliderValue(getClientX(event));
+};
+
+const stopDrag = () => {
+  dragging.value = null;
+  sliderRect.value = null;
+};
+
+useEventListener(window, "mousemove", onDrag);
+useEventListener(window, "mouseup", stopDrag);
+useEventListener(window, "touchmove", onDrag, { passive: false });
+useEventListener(window, "touchend", stopDrag);
+
+const startDrag = (type: "min" | "max", event: MouseEvent | TouchEvent) => {
+  event.preventDefault();
+  dragging.value = type;
+  const slider = (event.target as HTMLElement).closest(".relative.w-64.h-10");
+  if (slider) {
+    sliderRect.value = slider.getBoundingClientRect();
+  }
+};
+</script>
+
+<template>
+  <div 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-${filter.code}`"
+          @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">
+              {{ filter.label }}
+            </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-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="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" />
+            </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-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" />
+            </div>
+          </div>
+          <!-- Custom slider UI -->
+          <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>
+            <!-- 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>
+            <!-- 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)`
+              }"
+              @mousedown.prevent="startDrag('min', $event)"
+              @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)`
+              }"
+              @mousedown.prevent="startDrag('max', $event)"
+              @touchstart.prevent="startDrag('max', $event)"></div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>

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

@@ -0,0 +1,120 @@
+<script
+  setup
+  lang="ts"
+  generic="
+    ListingFilter extends {
+      code: string;
+      label: string;
+      name: string;
+      options: Array<Schemas['PropertyGroupOption']>;
+      entities: Array<Schemas['ProductManufacturer']>;
+    }
+  "
+>
+import { getTranslatedProperty } from "@shopware/helpers";
+import { computed, ref } from "vue";
+import type { Schemas } from "#shopware";
+
+const {
+  filter,
+  selectedFilters,
+  displayMode = "accordion",
+} = defineProps<{
+  filter: ListingFilter;
+  selectedFilters: {
+    manufacturer?: string[];
+    properties?: string[];
+    [key: string]: unknown;
+  };
+  displayMode?: "accordion" | "dropdown";
+}>();
+
+const emits =
+  defineEmits<
+    (e: "select-value", value: { code: string; value: unknown }) => void
+  >();
+
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
+
+const selectedIds = computed(() => {
+  if (filter.code === "manufacturer") {
+    return selectedFilters?.manufacturer || [];
+  }
+  return selectedFilters?.properties || [];
+});
+
+const isChecked = (id: string) => selectedIds.value.includes(id);
+
+const selectValue = (id: string) => {
+  const emitCode =
+    filter.code === "manufacturer" ? "manufacturer" : "properties";
+  emits("select-value", {
+    code: emitCode,
+    value: id,
+  });
+};
+</script>
+
+<template>
+  <div 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="filter.label"
+          @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">
+              {{ filter.label }}
+            </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">{{ 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>
+        </label>
+        </fieldset>
+      </div>
+    </transition>
+  </div>
+</template>

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

@@ -0,0 +1,99 @@
+<script
+  setup
+  lang="ts"
+  generic="
+    ListingFilter extends {
+      code: string;
+      label: string;
+    }
+  "
+>
+import { computed, ref } from "vue";
+import type { Schemas } from "#shopware";
+
+const emits =
+  defineEmits<
+    (e: "select-value", value: { code: string; value: unknown }) => void
+  >();
+
+const {
+  filter,
+  selectedFilters,
+  displayMode = "accordion",
+} = defineProps<{
+  filter: ListingFilter;
+  selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
+  displayMode?: "accordion" | "dropdown";
+}>();
+const isHoverActive = ref(false);
+const hoveredIndex = ref(0);
+const displayedScore = computed(() =>
+  isHoverActive.value ? hoveredIndex.value : selectedFilters?.rating || 0,
+);
+
+const hoverRating = (key: number) => {
+  hoveredIndex.value = key;
+  isHoverActive.value = true;
+};
+const onChangeRating = () => {
+  const newValue =
+    selectedFilters?.rating !== hoveredIndex.value
+      ? hoveredIndex.value
+      : undefined;
+  emits("select-value", { code: filter?.code, value: newValue });
+};
+
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
+</script>
+
+<template>
+  <div 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-rating`"
+          @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">
+              {{ filter.label }}
+            </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'" 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']"
+            @mouseleave="isHoverActive = false"
+            @click="hoverRating(i); onChangeRating()"
+            @mouseover="hoverRating(i)"
+            :aria-label="`${i} star${i !== 1 ? 's' : ''}`"
+          />
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>

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

@@ -0,0 +1,114 @@
+<script
+  setup
+  lang="ts"
+  generic="
+    ListingFilter extends {
+      id: string;
+      code: keyof Schemas['ProductListingResult']['currentFilters'];
+      label: string;
+      name: string;
+    }
+  "
+>
+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 {
+  filter,
+  selectedFilters,
+  description,
+  displayMode = "accordion",
+} = defineProps<{
+  filter: ListingFilter;
+  selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
+  description?: string; // Optional description for i18n
+  displayMode?: "accordion" | "dropdown";
+}>();
+
+type Translations = {
+  listing: {
+    freeShipping: string;
+  };
+};
+let translations: Translations = {
+  listing: {
+    freeShipping: "Free shipping",
+  },
+};
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const emits =
+  defineEmits<
+    (e: "select-value", value: { code: string; value: unknown }) => void
+  >();
+const currentFilterData = computed(() => !!selectedFilters[filter?.code]);
+
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
+
+const dropdownElement = ref(null);
+onClickOutside(dropdownElement, () => {
+  isFilterVisible.value = false;
+});
+
+const handleRadioUpdate = (val: string | null | boolean | undefined) => {
+  emits("select-value", { code: filter.code, value: !!val });
+};
+</script>
+
+<template>
+  <div 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-${filter.code}`"
+          @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">
+              {{ filter.label }}
+            </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'" 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="flex-1 pt-[3px]">
+              <SwSwitchButton
+                :model-value="currentFilterData"
+                @update:model-value="handleRadioUpdate"
+                :name="filter.code"
+                :aria-label="filter.label"
+                :label="filter.label"
+                :description="description || translations.listing.freeShipping"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>

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

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { computed, defineAsyncComponent } from "vue";
+import { useCmsBlock } from "#imports";
+import type { Schemas } from "#shopware";
+
+const SwMedia3DAsync = defineAsyncComponent(
+  () => import("../../SwMedia3D.vue"),
+);
+
+const props = defineProps<{
+  content: Schemas["CmsBlock"];
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+const slotContent = getSlotContent("default");
+
+function getConfigValue(key: string): unknown {
+  if (!slotContent?.config) return null;
+  const configEntry =
+    slotContent.config[key as keyof typeof slotContent.config];
+  if (
+    configEntry &&
+    typeof configEntry === "object" &&
+    "value" in configEntry &&
+    configEntry !== null
+  ) {
+    return (configEntry as { value: unknown }).value;
+  }
+  return null;
+}
+
+const modelUrl = computed(() => {
+  if (slotContent?.data) {
+    const data = slotContent.data as unknown as Schemas["Media"];
+    if (data?.url && typeof data.url === "string") {
+      return data.url;
+    }
+  }
+
+  const configUrl = getConfigValue("url");
+  if (typeof configUrl === "string" && configUrl) {
+    return configUrl;
+  }
+  return null;
+});
+
+const maxHeight = computed(() => {
+  const height = getConfigValue("maxHeight");
+  return typeof height === "string" ? height : "600px";
+});
+
+const formFactor = computed(() => {
+  const factor = getConfigValue("formFactor");
+  return typeof factor === "string" ? factor : "square";
+});
+
+const aspectRatio = computed(() => {
+  switch (formFactor.value) {
+    case "square":
+      return 1;
+    case "landscape":
+      return 16 / 9;
+    case "portrait":
+      return 9 / 16;
+    default:
+      return 1;
+  }
+});
+
+const containerStyle = computed(() => ({
+  width: "100%",
+  height: "100%",
+  minHeight: "400px",
+  maxHeight: maxHeight.value,
+  aspectRatio: `${aspectRatio.value}`,
+  position: "relative" as const,
+}));
+</script>
+
+<template>
+  <div class="cms-block-spatial-viewer" :style="containerStyle">
+    <client-only>
+      <div v-if="modelUrl" class="w-full h-full">
+        <SwMedia3DAsync :src="modelUrl" />
+      </div>
+
+      <template #fallback>
+        <div class="w-full h-full flex items-center justify-center bg-gray-100">
+          <span class="text-gray-500">3D Viewer</span>
+        </div>
+      </template>
+    </client-only>
+  </div>
+</template>

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

@@ -0,0 +1,42 @@
+Renders a Block type structure.
+
+Resolves the correct CMS block component dynamically and applies layout configuration (CSS classes, background color, background image). When a block has a `backgroundMedia` set, the component automatically optimizes the background image URL using the `getBackgroundImageUrl` helper from `@shopware/helpers`, appending `format` and `quality` parameters from the `backgroundImage` app config.
+
+### Background Image Optimization
+
+Background image settings are read from `app.config.ts`:
+
+```ts
+export default defineAppConfig({
+  backgroundImage: {
+    format: "webp",
+    quality: 85,
+  },
+});
+```
+
+### Example usage
+
+```vue{14-19}
+<script setup lang="ts">
+import type { CmsSectionDefault } from "@shopware/composables";
+import { getCmsLayoutConfiguration } from "@shopware/helpers";
+
+const props = defineProps<{
+  content: CmsSectionDefault;
+}>();
+
+const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
+</script>
+
+<template>
+  <div class="cms-section-default" :class="cssClasses" :styles="layoutStyles">
+    <CmsGenericBlock
+      v-for="cmsBlock in content.blocks"
+      class="overflow-auto"
+      :key="cmsBlock.id"
+      :content="cmsBlock"
+    />
+  </div>
+</template>
+```