@shopware/cms-base-layer 2.0.0 → 2.1.0

package/app/components/SwProductCardDetails.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import type { BoxLayout } from "@shopware/composables";
 import type { UrlRouteOutput } from "@shopware/helpers";
+import { computed } from "vue";
 import type { Schemas } from "#shopware";
 
 type Translations = {
@@ -12,7 +14,7 @@ type Translations = {
   };
 };
 
-defineProps<{
+const props = defineProps<{
   product: Schemas["Product"];
   productName: string | null;
   productManufacturer?: string | null;
@@ -20,7 +22,10 @@ defineProps<{
   fromPrice?: number;
   addToCartProxy: () => Promise<void>;
   productLink: UrlRouteOutput;
+  layoutType?: BoxLayout;
 }>();
+
+const isMinimalLayout = computed(() => props.layoutType === "minimal");
 </script>
 <template>
   <div class="self-stretch p-2 flex flex-col justify-between items-start gap-4 flex-1">
@@ -33,25 +38,37 @@ defineProps<{
           </div>
 
           <RouterLink :to="productLink"
-            class="self-stretch text-surface-on-surface text-2xl font-normal font-serif leading-9 overflow-hidden line-clamp-2 break-words"
+            class="self-stretch text-surface-on-surface text-2xl font-normal font-serif leading-9 overflow-hidden line-clamp-2 break-words min-h-[4.5rem]"
             data-testid="product-box-product-name-link">
             {{ productName }}
           </RouterLink>
         </div>
       </div>
 
-      <SwListingProductPrice :product="product" data-testid="product-box-product-price" />
-    </div>
+      <!-- Star rating for minimal layout -->
+      <SwProductRating
+        v-if="isMinimalLayout"
+        :rating="product?.ratingAverage ?? 0"
+        :review-count="product?.productReviews?.length ?? 0"
+        class="mt-4"
+      />
 
-    <SwBaseButton variant="primary" v-if="!fromPrice" size="medium" :disabled="!product?.available" block
-      data-testid="add-to-cart-button" @click="addToCartProxy">
-      {{ translations.product.addToCart }}
-    </SwBaseButton>
+      <!-- Price for standard layout -->
+      <SwListingProductPrice v-else :product="product" data-testid="product-box-product-price" />
+    </div>
 
-    <RouterLink v-else :to="productLink" class="self-stretch">
-      <SwBaseButton block>
-        {{ translations.product.details }}
+    <!-- CTA buttons only for non-minimal layout -->
+    <template v-if="!isMinimalLayout">
+      <SwBaseButton variant="primary" v-if="!fromPrice" size="medium" :disabled="!product?.available" block
+        data-testid="add-to-cart-button" @click="addToCartProxy">
+        {{ translations.product.addToCart }}
       </SwBaseButton>
-    </RouterLink>
+
+      <RouterLink v-else :to="productLink" class="self-stretch">
+        <SwBaseButton block>
+          {{ translations.product.details }}
+        </SwBaseButton>
+      </RouterLink>
+    </template>
   </div>
 </template>

package/app/components/SwProductCardImage.vue

@@ -36,7 +36,10 @@ function roundUp(num: number) {
 }
 
 const coverSrcPath = computed(() => {
-  return getSmallestThumbnailUrl(props.product?.cover?.media);
+  return (
+    getSmallestThumbnailUrl(props.product?.cover?.media) ||
+    props.product?.cover?.media?.url
+  );
 });
 
 const imageModifiers = computed(() => {

package/app/components/SwProductGallery.vue

@@ -1,30 +1,34 @@
 <script setup lang="ts">
-import type { CmsElementImageGallery } from "@shopware/composables";
+import type {
+  CmsElementImageGallery,
+  SliderElementConfig,
+} from "@shopware/composables";
 import { ref, watch } from "vue";
 import type { Schemas } from "#shopware";
 
-const props = defineProps<{
+const { product, config = {} } = defineProps<{
   product: Schemas["Product"];
+  config?: Partial<SliderElementConfig>;
 }>();
+
+const defaultConfig: SliderElementConfig = {
+  minHeight: { value: "300px", source: "static" },
+  navigationArrows: { value: "inside", source: "static" },
+  navigationDots: { value: "inside", source: "static" },
+};
+
 const content = ref<CmsElementImageGallery>();
 
 watch(
-  () => props.product,
-  (value) => {
-    const media = value.media;
+  [() => product, () => config],
+  ([currentProduct, currentConfig]) => {
     content.value = {
       config: {
-        minHeight: {
-          value: "300px",
-          source: "static",
-        },
-        navigationArrows: {
-          value: "inside",
-          source: "static",
-        },
+        ...defaultConfig,
+        ...currentConfig,
       },
       data: {
-        sliderItems: media,
+        sliderItems: currentProduct.media,
       },
     } as CmsElementImageGallery;
   },

package/app/components/SwProductListingFilter.vue

@@ -6,7 +6,16 @@ import SwFilterPropertiesVue from "./listing-filters/SwFilterProperties.vue";
 import SwFilterRatingVue from "./listing-filters/SwFilterRating.vue";
 import SwFilterShippingFreeVue from "./listing-filters/SwFilterShippingFree.vue";
 
-const props = defineProps<{
+const {
+  filter,
+  selectedManufacturer,
+  selectedProperties,
+  selectedMinPrice,
+  selectedMaxPrice,
+  selectedRating,
+  selectedShippingFree,
+  displayMode = "accordion",
+} = defineProps<{
   filter: ListingFilter;
   selectedManufacturer: Set<string>;
   selectedProperties: Set<string>;
@@ -14,6 +23,7 @@ const props = defineProps<{
   selectedMaxPrice: number | undefined;
   selectedRating: number | undefined;
   selectedShippingFree: boolean | undefined;
+  displayMode?: "accordion" | "dropdown";
 }>();
 
 const emit = defineEmits<{
@@ -22,13 +32,13 @@ const emit = defineEmits<{
 
 const transformedFilters = computed(() => ({
   price: {
-    min: props.selectedMinPrice,
-    max: props.selectedMaxPrice,
+    min: selectedMinPrice,
+    max: selectedMaxPrice,
   },
-  rating: props.selectedRating,
-  "shipping-free": props.selectedShippingFree,
-  manufacturer: [...props.selectedManufacturer],
-  properties: [...props.selectedProperties],
+  rating: selectedRating,
+  "shipping-free": selectedShippingFree,
+  manufacturer: [...selectedManufacturer],
+  properties: [...selectedProperties],
 }));
 
 const filterComponent = computed<Component | undefined>(() => {
@@ -40,8 +50,8 @@ const filterComponent = computed<Component | undefined>(() => {
   };
 
   return (
-    componentMap[props.filter.code] ||
-    ("options" in props.filter ? SwFilterPropertiesVue : undefined)
+    componentMap[filter.code] ||
+    ("options" in filter ? SwFilterPropertiesVue : undefined)
   );
 });
 
@@ -58,6 +68,7 @@ const handleSelectValue = ({
       :is="filterComponent"
       :filter="filter"
       :selected-filters="transformedFilters"
+      :display-mode="displayMode"
       @select-value="handleSelectValue"
     />
   </div>

package/app/components/SwProductListingFilters.vue

@@ -12,7 +12,7 @@ import { useCategoryListing } from "#imports";
 import type { Schemas, operations } from "#shopware";
 
 const props = defineProps<{
-  content: CmsElementProductListing | CmsElementSidebarFilter;
+  content?: CmsElementProductListing | CmsElementSidebarFilter;
   listingType?: string;
 }>();
 
@@ -233,10 +233,6 @@ async function invokeCleanFilters() {
   }
 }
 
-const isDefaultSidebarFilter =
-  props.content.type === "sidebar-filter" &&
-  props.content.config?.boxLayout?.value === "standard";
-
 const handleSortChange = (sortKey: string) => {
   currentSortingOrder.value = sortKey;
 };

package/app/components/SwProductListingFiltersHorizontal.vue

@@ -0,0 +1,306 @@
+<script setup lang="ts">
+import type {
+  CmsElementProductListing,
+  CmsElementSidebarFilter,
+} from "@shopware/composables";
+import { useCmsTranslations } from "@shopware/composables";
+import { defu } from "defu";
+import { computed, reactive } from "vue";
+import type { ComputedRef, UnwrapNestedRefs } from "vue";
+import { type LocationQueryRaw, useRoute, useRouter } from "vue-router";
+import { useCategoryListing } from "#imports";
+import type { Schemas, operations } from "#shopware";
+
+const props = defineProps<{
+  content: CmsElementProductListing | CmsElementSidebarFilter;
+  listingType?: string;
+}>();
+
+type Translations = {
+  listing: {
+    filters: string;
+    sort: string;
+    resetFilters: string;
+  };
+};
+
+type FilterState = {
+  manufacturer: Set<string>;
+  properties: Set<string>;
+  "min-price": number | undefined;
+  "max-price": number | undefined;
+  rating: number | undefined;
+  "shipping-free": boolean | undefined;
+};
+
+let translations: Translations = {
+  listing: {
+    filters: "Filters",
+    sort: "Sort",
+    resetFilters: "Reset filters",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const route = useRoute();
+const router = useRouter();
+
+const {
+  changeCurrentSortingOrder,
+  getCurrentSortingOrder,
+  getInitialFilters,
+  getSortingOrders,
+  search,
+} = useCategoryListing();
+
+const sidebarSelectedFilters: UnwrapNestedRefs<FilterState> =
+  reactive<FilterState>({
+    manufacturer: new Set(),
+    properties: new Set(),
+    "min-price": undefined,
+    "max-price": undefined,
+    rating: undefined,
+    "shipping-free": undefined,
+  });
+
+const showResetFiltersButton = computed<boolean>(() => {
+  if (
+    sidebarSelectedFilters.manufacturer.size !== 0 ||
+    sidebarSelectedFilters.properties.size !== 0 ||
+    sidebarSelectedFilters["max-price"] ||
+    sidebarSelectedFilters["min-price"] ||
+    sidebarSelectedFilters.rating ||
+    sidebarSelectedFilters["shipping-free"]
+  ) {
+    return true;
+  }
+
+  return false;
+});
+
+const searchCriteriaForRequest: ComputedRef<Schemas["ProductListingCriteria"]> =
+  computed(() => ({
+    manufacturer: [
+      ...(sidebarSelectedFilters.manufacturer as Set<string>),
+    ]?.join("|"),
+    properties: [...(sidebarSelectedFilters.properties as Set<string>)]?.join(
+      "|",
+    ),
+    "min-price": sidebarSelectedFilters["min-price"] as number,
+    "max-price": sidebarSelectedFilters["max-price"] as number,
+    order: getCurrentSortingOrder.value as string,
+    "shipping-free": sidebarSelectedFilters["shipping-free"] as boolean,
+    rating: sidebarSelectedFilters.rating as number,
+    search: "",
+    limit: route.query.limit ? Number(route.query.limit) : 15,
+  }));
+
+for (const param in route.query) {
+  if (param in sidebarSelectedFilters) {
+    const queryValue = route.query[param];
+
+    // Skip arrays
+    if (Array.isArray(queryValue)) continue;
+
+    if (["manufacturer", "properties"].includes(param)) {
+      if (typeof queryValue === "string") {
+        const elements = queryValue.split("|");
+        const targetSet = sidebarSelectedFilters[
+          param as keyof FilterState
+        ] as Set<string>;
+        for (const element of elements) {
+          targetSet.add(element);
+        }
+      }
+    } else if (queryValue && typeof queryValue === "string") {
+      // Fix: Use specific property assignments instead of generic keyof
+      if (param === "min-price") {
+        const numValue = Number(queryValue);
+        if (!Number.isNaN(numValue)) {
+          sidebarSelectedFilters["min-price"] = numValue;
+        }
+      } else if (param === "max-price") {
+        const numValue = Number(queryValue);
+        if (!Number.isNaN(numValue)) {
+          sidebarSelectedFilters["max-price"] = numValue;
+        }
+      } else if (param === "rating") {
+        const numValue = Number(queryValue);
+        if (!Number.isNaN(numValue)) {
+          sidebarSelectedFilters.rating = numValue;
+        }
+      } else if (param === "shipping-free") {
+        sidebarSelectedFilters["shipping-free"] = queryValue === "true";
+      }
+    }
+  }
+}
+
+const handleFilterChange = async (event: {
+  code: string;
+  value: string | number | boolean;
+}) => {
+  try {
+    const { code, value } = event;
+
+    if (code === "manufacturer" || code === "properties") {
+      const filterSet = sidebarSelectedFilters[code];
+      const stringValue = String(value);
+
+      if (filterSet.has(stringValue)) {
+        filterSet.delete(stringValue);
+      } else {
+        filterSet.add(stringValue);
+      }
+    } else if (code === "min-price" || code === "max-price") {
+      sidebarSelectedFilters[code] =
+        typeof value === "number" ? value : Number(value);
+    } else if (code === "rating") {
+      sidebarSelectedFilters.rating = Number(value);
+    } else if (code === "shipping-free") {
+      sidebarSelectedFilters["shipping-free"] = Boolean(value);
+    }
+
+    await executeSearch();
+  } catch (error) {
+    console.error("Filter update failed:", error);
+  }
+};
+
+const executeSearch = async () => {
+  try {
+    await search(searchCriteriaForRequest.value);
+
+    // Build query directly from searchCriteriaForRequest which already has pipe-separated strings
+    const criteria = searchCriteriaForRequest.value;
+    const query: Record<string, unknown> = {};
+
+    if (criteria.manufacturer) query.manufacturer = criteria.manufacturer;
+    if (criteria.properties) query.properties = criteria.properties;
+    if (criteria["min-price"]) query["min-price"] = criteria["min-price"];
+    if (criteria["max-price"]) query["max-price"] = criteria["max-price"];
+    if (criteria.rating) query.rating = criteria.rating;
+    if (criteria["shipping-free"])
+      query["shipping-free"] = criteria["shipping-free"];
+    if (criteria.order) query.order = criteria.order;
+
+    await router.push({
+      query: query as LocationQueryRaw,
+    });
+  } catch (error) {
+    console.error("Search execution failed:", error);
+  }
+};
+
+const clearFilters = () => {
+  (sidebarSelectedFilters.manufacturer as Set<string>).clear();
+  (sidebarSelectedFilters.properties as Set<string>).clear();
+  sidebarSelectedFilters["min-price"] = undefined;
+  sidebarSelectedFilters["max-price"] = undefined;
+  sidebarSelectedFilters.rating = undefined;
+  sidebarSelectedFilters["shipping-free"] = undefined;
+};
+
+const currentSortingOrder = computed({
+  get: (): string => getCurrentSortingOrder.value || "",
+  set: async (order: string): Promise<void> => {
+    try {
+      await router.push({
+        query: {
+          ...route.query,
+          order,
+        },
+      });
+
+      await changeCurrentSortingOrder(order, {
+        ...(route.query as unknown as operations["searchPage post /search"]["body"]),
+        limit: route.query.limit ? Number(route.query.limit) : 15,
+      });
+    } catch (error) {
+      console.error("Sorting order change failed:", error);
+    }
+  },
+});
+
+async function invokeCleanFilters() {
+  try {
+    clearFilters();
+    await executeSearch();
+  } catch (error) {
+    console.error("Clear filters failed:", error);
+  }
+}
+
+const handleSortChange = (sortKey: string) => {
+  currentSortingOrder.value = sortKey;
+};
+
+// Helper to check if a filter has active selections
+const hasActiveFilter = (filter: { code: string }) => {
+  if (filter.code === "manufacturer") {
+    return sidebarSelectedFilters.manufacturer.size > 0;
+  }
+  if (filter.code === "price") {
+    return (
+      sidebarSelectedFilters["min-price"] !== undefined ||
+      sidebarSelectedFilters["max-price"] !== undefined
+    );
+  }
+  if (filter.code === "rating") {
+    return sidebarSelectedFilters.rating !== undefined;
+  }
+  if (filter.code === "shipping-free") {
+    return sidebarSelectedFilters["shipping-free"] === true;
+  }
+  // Properties filter - check if any property from this filter group is selected
+  return sidebarSelectedFilters.properties.size > 0;
+};
+</script>
+
+<template>
+  <div>
+    <!-- Horizontal Filters Row -->
+    <div class="flex flex-wrap items-center justify-start gap-4 z-10">
+      <!-- Filter dropdowns -->
+      <SwFilterDropdown
+        v-for="filter in getInitialFilters"
+        :key="filter.id"
+        :label="filter.label"
+        :is-active="hasActiveFilter(filter)"
+      >
+        <SwProductListingFilter
+          :filter="filter"
+          display-mode="dropdown"
+          :selected-manufacturer="sidebarSelectedFilters.manufacturer"
+          :selected-properties="sidebarSelectedFilters.properties"
+          :selected-min-price="sidebarSelectedFilters['min-price']"
+          :selected-max-price="sidebarSelectedFilters['max-price']"
+          :selected-rating="sidebarSelectedFilters.rating"
+          :selected-shipping-free="sidebarSelectedFilters['shipping-free']"
+          @filter-change="handleFilterChange"
+        />
+      </SwFilterDropdown>
+
+      <!-- Sort dropdown -->
+      <SwSortDropdown
+        :sort-options="getSortingOrders ?? []"
+        :current-sort="getCurrentSortingOrder ?? ''"
+        :label="translations.listing.sort"
+        @sort-change="handleSortChange"
+      />
+
+      <!-- Reset filters button -->
+      <SwBaseButton
+        v-if="showResetFiltersButton"
+        variant="ghost"
+        size="medium"
+        @click="invokeCleanFilters"
+        type="button"
+      >
+        {{ translations.listing.resetFilters }}
+        <span class="w-5 h-5 i-carbon-close inline-block align-middle ml-1"></span>
+      </SwBaseButton>
+    </div>
+  </div>
+</template>

package/app/components/SwProductPrice.vue

@@ -37,7 +37,7 @@ translations = defu(useCmsTranslations(), translations) as Translations;
 
 const { product } = toRefs(props);
 
-const { unitPrice, price, tierPrices, isListPrice } = useProductPrice(product);
+const { unitPrice, price, tierPrices, hasListPrice } = useProductPrice(product);
 const { getFormattedPrice } = usePrice();
 </script>
 
@@ -45,7 +45,7 @@ const { getFormattedPrice } = usePrice();
   <div>
     <div v-if="!tierPrices.length">
       <SwSharedPrice
-        v-if="isListPrice"
+        v-if="hasListPrice"
         class="text-1xl text-gray-900 basis-2/6 justify-end line-through"
         :value="price?.listPrice?.price"
       />
@@ -53,7 +53,7 @@ const { getFormattedPrice } = usePrice();
         v-if="unitPrice"
         class="text-3xl text-gray-900 basis-2/6 justify-end"
         :class="{
-          'text-red': isListPrice,
+          'text-red': hasListPrice,
         }"
         :value="unitPrice"
       />

package/app/components/SwProductRating.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const {
+  rating = 0,
+  reviewCount = 0,
+  starSize = 16,
+  showCount = true,
+} = defineProps<{
+  rating: number;
+  reviewCount?: number;
+  starSize?: number;
+  showCount?: boolean;
+}>();
+
+const filledStars = computed(() => Math.round(rating));
+</script>
+
+<template>
+  <div class="flex items-center">
+    <div
+      class="flex items-center gap-1.5"
+      role="img"
+      :aria-label="`${rating} out of 5 stars`"
+    >
+      <SwStarIcon
+        v-for="i in 5"
+        :key="`star-${i}`"
+        :filled="i <= filledStars"
+        :size="starSize"
+      />
+    </div>
+    <span
+      v-if="showCount && reviewCount > 0"
+      class="ml-1 text-surface-on-surface-variant text-base leading-normal"
+    >
+      ({{ reviewCount }})
+    </span>
+  </div>
+</template>

package/app/components/SwProductReviews.vue

@@ -93,26 +93,13 @@ const formatDate = (date: string) => {
         <div class="w-6 h-6 i-carbon-warning" />
         {{ translations.product.reviewNotAccepted }}
       </div>
-      <div
-        class="cms-block-product-description-reviews__reviews-rating inline-flex items-center mt-2"
-        role="img"
-        :aria-label="`${review.points} out of 5 stars`"
-      >
-        <SwStarIcon
-          v-for="_ in review.points"
-          :key="`filled-star-${_}`"
-          :filled="true"
-          :size="20"
+      <div class="cms-block-product-description-reviews__reviews-rating inline-flex items-center mt-2">
+        <SwProductRating
+          :rating="review.points ?? 0"
+          :star-size="20"
+          :show-count="false"
         />
-        <SwStarIcon
-          v-for="_ in 5 - (review.points || 0)"
-          :key="`empty-star-${_}`"
-          :filled="false"
-          :size="20"
-        />
-        <div
-          class="cms-block-product-description-reviews__reviews-title font-semibold ml-2"
-        >
+        <div class="cms-block-product-description-reviews__reviews-title font-semibold ml-2">
           <p>{{ review.title }}</p>
         </div>
       </div>

package/app/components/SwProductUnits.vue

@@ -4,15 +4,10 @@ import { defu } from "defu";
 import { computed } from "vue";
 import type { Schemas } from "#shopware";
 
-const props = withDefaults(
-  defineProps<{
-    product: Schemas["Product"];
-    showContent?: boolean;
-  }>(),
-  {
-    showContent: true,
-  },
-);
+const { product, showContent = true } = defineProps<{
+  product: Schemas["Product"];
+  showContent?: boolean;
+}>();
 
 type Translations = {
   product: {
@@ -28,22 +23,22 @@ let translations: Translations = {
 
 translations = defu(useCmsTranslations(), translations) as Translations;
 
-const purchaseUnit = computed(() => props.product?.purchaseUnit);
-const unitName = computed(() => props.product?.unit?.translated.name);
+const purchaseUnit = computed(() => product?.purchaseUnit);
+const unitName = computed(() => product?.unit?.translated.name);
 const referencePrice = computed(
-  () => props.product?.calculatedPrice?.referencePrice?.price,
+  () => product?.calculatedPrice?.referencePrice?.price,
 );
 const referenceUnit = computed(
-  () => props.product?.calculatedPrice?.referencePrice?.referenceUnit,
+  () => product?.calculatedPrice?.referencePrice?.referenceUnit,
 );
 const referenceUnitName = computed(
-  () => props.product?.calculatedPrice?.referencePrice?.unitName,
+  () => product?.calculatedPrice?.referencePrice?.unitName,
 );
 </script>
 
 <template>
   <div v-if="purchaseUnit" class="flex text-gray-500 justify-end gap-1">
-    <template v-if="props.showContent">
+    <template v-if="showContent">
       {{ translations.product.content }}: {{ purchaseUnit }} {{ unitName }}
     </template>
     <template v-if="referencePrice">