@shopware/cms-base-layer 0.0.0-canary-20250116171244

package/components/SwVariantConfigurator.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { useCmsTranslations } from "@shopware/composables";
+import { getProductRoute } from "@shopware/helpers";
+import { defu } from "defu";
+import { computed, ref, unref } from "vue";
+import type { ComputedRef } from "vue";
+import { useRouter } from "vue-router";
+import { useProductConfigurator } from "#imports";
+import type { Schemas } from "#shopware";
+
+const props = withDefaults(
+  defineProps<{
+    allowRedirect?: boolean;
+  }>(),
+  {
+    allowRedirect: true,
+  },
+);
+
+type Translations = {
+  product: {
+    chooseA: string;
+  };
+};
+
+let translations: Translations = {
+  product: {
+    chooseA: "Choose a",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const emit =
+  defineEmits<
+    (e: "change", selected: Partial<Schemas["Product"]> | undefined) => void
+  >();
+const isLoading = ref<boolean>();
+const router = useRouter();
+const {
+  handleChange,
+  getOptionGroups,
+  getSelectedOptions,
+  findVariantForSelectedOptions,
+} = useProductConfigurator();
+
+const selectedOptions: ComputedRef = computed(() =>
+  Object.values(unref(getSelectedOptions)),
+);
+const isOptionSelected = (optionId: string) =>
+  Object.values(getSelectedOptions.value).includes(optionId);
+
+const onHandleChange = async () => {
+  isLoading.value = true;
+  const variantFound = await findVariantForSelectedOptions(
+    unref(selectedOptions),
+  );
+
+  const selectedOptionsVariantPath = getProductRoute(variantFound);
+  if (props.allowRedirect && selectedOptionsVariantPath) {
+    try {
+      router.push(selectedOptionsVariantPath);
+    } catch {
+      console.error("incorrect URL", selectedOptionsVariantPath);
+    }
+  } else {
+    emit("change", variantFound);
+  }
+  isLoading.value = false;
+};
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div
+      v-if="isLoading"
+      class="absolute inset-0 flex items-center justify-center z-10 bg-white/75"
+    >
+      <div
+        data-testid="loading"
+        class="h-15 w-15 i-carbon-progress-bar-round animate-spin c-gray-500"
+      />
+    </div>
+    <div
+      v-for="optionGroup in getOptionGroups"
+      :key="optionGroup.id"
+      class="mt-6"
+    >
+      <h3 class="text-sm text-gray-900 font-medium">{{ optionGroup.name }}</h3>
+      <fieldset class="mt-4 flex-1">
+        <legend class="sr-only">
+          {{ translations.product.chooseA }} {{ optionGroup.name }}
+        </legend>
+        <div class="flex gap-3">
+          <label
+            v-for="option in optionGroup.options"
+            :key="option.id"
+            data-testid="product-variant"
+            class="group relative border rounded-md py-3 px-4 flex items-center justify-center text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 bg-white shadow-sm text-gray-900 cursor-pointer"
+            :class="{
+              'border-3 border-indigo-600': isOptionSelected(option.id),
+            }"
+            @click="handleChange(optionGroup.name, option.id, onHandleChange)"
+          >
+            <p
+              :id="`${option.id}-choice-label`"
+              data-testid="product-variant-text"
+            >
+              {{ option.name }}
+            </p>
+          </label>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</template>

package/components/listing-filters/SwFilterPrice.vue

@@ -0,0 +1,160 @@
+<script
+  setup
+  lang="ts"
+  generic="
+    ListingFilter extends {
+      code: string;
+      min?: number;
+      max?: number;
+      label: string;
+    }
+  "
+>
+import { useCmsTranslations } from "@shopware/composables";
+import { onClickOutside, useDebounceFn } 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 props = defineProps<{
+  filter: ListingFilter;
+  selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
+}>();
+
+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(
+    props.selectedFilters.price.min ?? props.filter?.min ?? 0,
+  );
+  prices.max = Math.floor(
+    props.selectedFilters.price.max ?? props.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);
+</script>
+
+<template>
+  <div class="border-b border-gray-200 py-6 px-5">
+    <h3 class="-my-3 flow-root">
+      <button
+        type="button"
+        class="flex w-full items-center justify-between bg-white py-2 text-base text-gray-400 hover:text-gray-500"
+        @click="toggle"
+      >
+        <span class="font-medium text-gray-900 text-left">{{
+          props.filter.label
+        }}</span>
+        <span class="ml-6 flex items-center">
+          <i
+            :class="[
+              !isFilterVisible
+                ? 'i-carbon-chevron-down'
+                : 'i-carbon-chevron-up',
+            ]"
+          />
+        </span>
+      </button>
+    </h3>
+
+    <transition name="fade" mode="out-in">
+      <div v-show="isFilterVisible" class="space-y-6 mt-5">
+        <div class="mt-2 flex">
+          <div class="w-1/2 flex rounded-md mr-4">
+            <span
+              class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"
+            >
+              {{ translations.listing.min }}
+            </span>
+            <input
+              id="min-price"
+              v-model="prices.min"
+              step="1"
+              type="number"
+              name="min-price"
+              class="pl-2 focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border border-gray-300"
+              :placeholder="prices.min?.toString()"
+            />
+          </div>
+          <div class="w-1/2 flex rounded-md">
+            <span
+              class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"
+            >
+              {{ translations.listing.max }}
+            </span>
+            <input
+              id="max-price"
+              v-model="prices.max"
+              type="number"
+              name="max-price"
+              class="pl-2 focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border border-gray-300"
+              :placeholder="prices.max?.toString()"
+            />
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/components/listing-filters/SwFilterProperties.vue

@@ -0,0 +1,123 @@
+<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 { inject, ref } from "vue";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  filter: ListingFilter;
+}>();
+
+const emits =
+  defineEmits<
+    (e: "select-value", value: { code: string; value: unknown }) => void
+  >();
+const selectedOptionIds = inject<string[]>("selectedOptionIds");
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
+</script>
+
+<template>
+  <div class="border-b border-gray-200 py-6 px-5">
+    <h2 class="-my-3 flow-root">
+      <button
+        type="button"
+        class="flex w-full items-center justify-between bg-white py-2 text-base text-gray-400 hover:text-gray-500"
+        @click="toggle"
+      >
+        <span class="font-medium text-gray-900 text-left">{{
+          props.filter.label
+        }}</span>
+        <span class="ml-6 flex items-center">
+          <i
+            :class="[
+              !isFilterVisible
+                ? 'i-carbon-chevron-down'
+                : 'i-carbon-chevron-up',
+            ]"
+          />
+        </span>
+      </button>
+    </h2>
+    <transition name="fade" mode="out-in">
+      <div v-show="isFilterVisible" :id="props.filter.code" class="pt-6">
+        <fieldset class="space-y-4">
+          <legend class="sr-only">{{ props.filter.name }}</legend>
+          <div
+            v-for="option in props.filter.options || props.filter.entities"
+            :key="`${option.id}-${selectedOptionIds?.includes(option.id)}`"
+            class="flex items-center"
+          >
+            <input
+              :id="`filter-mobile-${props.filter.code}-${option.id}`"
+              :checked="selectedOptionIds?.includes(option.id)"
+              :name="props.filter.name"
+              :value="option.name"
+              :aria-label="`${option.name} filter`"
+              type="checkbox"
+              class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
+              @change="
+                emits('select-value', {
+                  code: props.filter.code,
+                  value: option.id,
+                })
+              "
+            />
+
+            <div v-if="option.media?.url">
+              <img
+                loading="lazy"
+                class="ml-2 h-4 w-4"
+                :src="option.media.url"
+                :alt="option.media.translated.alt || ''"
+                :class="{
+                  'border-blue border-2': selectedOptionIds?.includes(
+                    option.id,
+                  ),
+                }"
+              />
+            </div>
+            <div
+              v-else-if="option.colorHexCode"
+              class="ml-2 h-4 w-4"
+              :style="`background-color: ${option.colorHexCode}`"
+              :class="{
+                'border-blue border-2': selectedOptionIds?.includes(option.id),
+              }"
+            />
+            <label
+              :for="`filter-mobile-${props.filter.code}-${option.id}`"
+              class="ml-3 text-gray-600"
+            >
+              {{ getTranslatedProperty(option, "name") }}
+            </label>
+          </div>
+        </fieldset>
+      </div>
+    </transition>
+  </div>
+</template>
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/components/listing-filters/SwFilterRating.vue

@@ -0,0 +1,101 @@
+<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 props = defineProps<{
+  filter: ListingFilter;
+  selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
+}>();
+const isHoverActive = ref(false);
+const hoveredIndex = ref(0);
+const displayedScore = computed(() =>
+  isHoverActive.value ? hoveredIndex.value : props.selectedFilters?.rating || 0,
+);
+
+const hoverRating = (key: number) => {
+  hoveredIndex.value = key;
+  isHoverActive.value = true;
+};
+const onChangeRating = () => {
+  const newValue =
+    props.selectedFilters?.rating !== hoveredIndex.value
+      ? hoveredIndex.value
+      : undefined;
+  emits("select-value", { code: props.filter?.code, value: newValue });
+};
+
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
+</script>
+
+<template>
+  <div class="border-b border-gray-200 py-6 px-5">
+    <h3 class="-my-3 flow-root">
+      <button
+        type="button"
+        class="flex w-full items-center justify-between bg-white py-2 text-base text-gray-400 hover:text-gray-500"
+        @click="toggle"
+      >
+        <span class="font-medium text-gray-900 text-left">{{
+          props.filter.label
+        }}</span>
+        <span class="ml-6 flex items-center">
+          <i
+            :class="[
+              !isFilterVisible
+                ? 'i-carbon-chevron-down'
+                : 'i-carbon-chevron-up',
+            ]"
+          />
+        </span>
+      </button>
+    </h3>
+    <transition name="fade" mode="out-in">
+      <div v-show="isFilterVisible">
+        <div class="space-y-6 mt-4">
+          <div class="flex">
+            <div
+              v-for="i in 5"
+              :key="i"
+              class="h-6 w-6 c-yellow-500"
+              :class="{
+                'i-carbon-star-filled': displayedScore >= i,
+                'i-carbon-star': displayedScore < i,
+              }"
+              @mouseleave="isHoverActive = false"
+              @click="onChangeRating()"
+              @mouseover="hoverRating(i)"
+            />
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/components/listing-filters/SwFilterShippingFree.vue

@@ -0,0 +1,104 @@
+<script
+  setup
+  lang="ts"
+  generic="
+    ListingFilter extends {
+      id: string;
+      code: keyof Schemas['ProductListingResult']['currentFilters'];
+      label: string;
+      name: string;
+    }
+  "
+>
+import { onClickOutside } from "@vueuse/core";
+import { computed, ref } from "vue";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  filter: ListingFilter;
+  selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
+}>();
+
+const emits =
+  defineEmits<
+    (e: "select-value", value: { code: string; value: unknown }) => void
+  >();
+const currentFilterData = computed(
+  () => !!props.selectedFilters[props.filter?.code],
+);
+const onChangeOption = (): void => {
+  emits("select-value", {
+    code: props.filter?.code,
+    value: !currentFilterData.value,
+  });
+};
+
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
+
+const dropdownElement = ref(null);
+onClickOutside(dropdownElement, () => {
+  isFilterVisible.value = false;
+});
+</script>
+
+<template>
+  <div class="border-b border-gray-200 py-6 px-5">
+    <h3 class="-my-3 flow-root">
+      <button
+        type="button"
+        class="flex w-full items-center justify-between bg-white py-2 text-base text-gray-400 hover:text-gray-500"
+        @click="toggle"
+      >
+        <span class="font-medium text-gray-900 text-left">{{
+          props.filter.label
+        }}</span>
+        <span class="ml-6 flex items-center">
+          <i
+            :class="[
+              !isFilterVisible
+                ? 'i-carbon-chevron-down'
+                : 'i-carbon-chevron-up',
+            ]"
+          />
+        </span>
+      </button>
+    </h3>
+    <transition name="fade" mode="out-in">
+      <div v-show="isFilterVisible" id="filter-section-0" class="pt-6">
+        <div class="space-y-4">
+          <div class="flex items-center" @click="onChangeOption()">
+            <input
+              :id="`filter-mobile-${props.filter.id || props.filter.code}`"
+              :checked="currentFilterData"
+              :name="props.filter.name"
+              :value="props.filter.name"
+              type="checkbox"
+              class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
+            />
+
+            <label
+              :for="`filter-mobile-${props.filter.id || props.filter.code}`"
+              class="ml-3 text-gray-600"
+            >
+              {{ props.filter.label }}
+            </label>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/components/public/cms/CmsGenericBlock.md

@@ -0,0 +1,27 @@
+Renders a Block type structure
+
+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>
+```

package/components/public/cms/CmsGenericBlock.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { resolveCmsComponent } from "@shopware/composables";
+import {
+  getBackgroundImageUrl,
+  getCmsLayoutConfiguration,
+} from "@shopware/helpers";
+import { h } from "vue";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  content: Schemas["CmsBlock"];
+}>();
+
+const DynamicRender = () => {
+  const {
+    resolvedComponent,
+    componentName,
+    isResolved,
+    componentNameToResolve,
+  } = resolveCmsComponent(props.content);
+
+  if (resolvedComponent) {
+    if (!isResolved)
+      return h("div", {}, `Problem resolving component: ${componentName}`);
+
+    const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(
+      props.content,
+    );
+
+    if (layoutStyles.backgroundImage) {
+      layoutStyles.backgroundImage = getBackgroundImageUrl(
+        layoutStyles.backgroundImage,
+        props.content,
+      );
+    }
+
+    const containerStyles = {
+      backgroundColor: layoutStyles.backgroundColor,
+      backgroundImage: layoutStyles.backgroundImage,
+    };
+
+    layoutStyles.backgroundColor = null;
+    layoutStyles.backgroundImage = null;
+    return h(
+      "div",
+      {
+        style: containerStyles,
+      },
+      h(resolvedComponent, {
+        content: props.content,
+        style: layoutStyles,
+        class: cssClasses,
+      }),
+    );
+  }
+  console.error(`Component not resolve: ${componentNameToResolve}`);
+  return h("div", {}, "");
+};
+</script>
+
+<template>
+  <DynamicRender />
+</template>