@shopware/cms-base-layer 2.0.0 → 3.0.0

package/app/components/SwProductCard.vue

@@ -11,7 +11,7 @@ import {
 } from "@shopware/helpers";
 import { getCmsTranslate } from "@shopware/helpers";
 import { defu } from "defu";
-import { computed, ref, toRefs } from "vue";
+import { computed, ref, toRef } from "vue";
 import {
   useAddToCart,
   useCartErrorParamsResolver,
@@ -26,19 +26,17 @@ const { pushSuccess, pushError } = useNotifications();
 const { getErrorsCodes } = useCartNotification();
 const { resolveCartError } = useCartErrorParamsResolver();
 
-const props = withDefaults(
-  defineProps<{
-    product: Schemas["Product"];
-    layoutType?: BoxLayout;
-    isProductListing?: boolean;
-    displayMode?: DisplayMode;
-  }>(),
-  {
-    layoutType: "standard",
-    displayMode: "standard",
-    isProductListing: false,
-  },
-);
+const {
+  product: productProp,
+  layoutType = "standard",
+  displayMode = "standard",
+  isProductListing = false,
+} = defineProps<{
+  product: Schemas["Product"];
+  layoutType?: BoxLayout;
+  displayMode?: DisplayMode;
+  isProductListing?: boolean;
+}>();
 
 type Translations = {
   product: {
@@ -52,6 +50,8 @@ type Translations = {
     badges: {
       topseller: string;
     };
+    addToWishlist: string;
+    removeFromWishlist: string;
   };
   errors: {
     [key: string]: string;
@@ -70,6 +70,8 @@ let translations: Translations = {
     badges: {
       topseller: "Tip",
     },
+    addToWishlist: "Add to wishlist",
+    removeFromWishlist: "Remove from wishlist",
   },
   errors: {
     "product-stock-reached":
@@ -79,7 +81,7 @@ let translations: Translations = {
 
 translations = defu(useCmsTranslations(), translations) as Translations;
 
-const { product } = toRefs(props);
+const product = toRef(() => productProp);
 
 const { addToCart } = useAddToCart(product);
 
@@ -95,12 +97,12 @@ const toggleWishlistProduct = async () => {
     if (!isInWishlist.value) {
       await addToWishlist();
       pushSuccess(
-        `${props.product?.translated.name} ${translations.product.addedToWishlist}`,
+        `${product?.value.translated.name} ${translations.product.addedToWishlist}`,
       );
     } else {
       await removeFromWishlist();
       pushSuccess(
-        `${props.product?.translated.name} ${translations.product.removedFromTheWishlist}`,
+        `${product?.value.translated.name} ${translations.product.removedFromTheWishlist}`,
       );
     }
   } catch (error) {
@@ -109,7 +111,7 @@ const toggleWishlistProduct = async () => {
         ? `${translations.product.reason}: ${error.details.errors?.[0]?.detail}`
         : "";
       return pushError(
-        `${props.product?.translated.name} ${translations.product.cannotAddToWishlist}\n${reason}`,
+        `${product?.value.translated.name} ${translations.product.cannotAddToWishlist}\n${reason}`,
         {
           timeout: 5000,
         },
@@ -131,11 +133,11 @@ const addToCartProxy = async () => {
 
   if (!errors.length)
     pushSuccess(
-      `${props.product?.translated.name} ${translations.product.addedToCart}`,
+      `${product?.value.translated.name} ${translations.product.addedToCart}`,
     );
 };
 
-const fromPrice = getProductFromPrice(props.product);
+const fromPrice = getProductFromPrice(product.value);
 const productName = computed(() => getProductName({ product: product.value }));
 const productManufacturer = computed(() =>
   getProductManufacturerName(product.value),
@@ -165,6 +167,7 @@ const productLink = computed(() =>
       :fromPrice="fromPrice"
       :addToCartProxy="addToCartProxy"
       :productLink="productLink"
+      :layoutType="layoutType"
     />
   </div>
-</template>
+</template>

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

@@ -5,9 +5,8 @@ import {
   isProductOnSale,
   isProductTopSeller,
 } from "@shopware/helpers";
-import { useElementSize } from "@vueuse/core";
-import { computed, useTemplateRef } from "vue";
-import { useImagePlaceholder } from "#imports";
+import { computed, inject } from "vue";
+import { useUser } from "#imports";
 import type { Schemas } from "#shopware";
 
 type Translations = {
@@ -15,6 +14,8 @@ type Translations = {
     badges: {
       topseller: string;
     };
+    addToWishlist: string;
+    removeFromWishlist: string;
   };
 };
 
@@ -27,27 +28,11 @@ const props = defineProps<{
   productLink: UrlRouteOutput;
 }>();
 
-const containerElement = useTemplateRef<HTMLDivElement>("containerElement");
-const { width, height } = useElementSize(containerElement);
-
-const DEFAULT_THUMBNAIL_SIZE = 10;
-function roundUp(num: number) {
-  return num ? Math.ceil(num / 100) * 100 : DEFAULT_THUMBNAIL_SIZE;
-}
-
 const coverSrcPath = computed(() => {
-  return getSmallestThumbnailUrl(props.product?.cover?.media);
-});
-
-const imageModifiers = computed(() => {
-  // Use the larger dimension and apply 2x for high-DPI displays
-  // For square containers, width and height should be the same
-  const containerSize = Math.max(width.value || 0, height.value || 0);
-  const size = roundUp(containerSize * 2);
-  return {
-    width: size,
-    height: size,
-  };
+  return (
+    props.product?.cover?.media?.url ||
+    getSmallestThumbnailUrl(props.product?.cover?.media)
+  );
 });
 
 const coverAlt = computed(() => {
@@ -57,16 +42,30 @@ const coverAlt = computed(() => {
 const isOnSale = computed(() => isProductOnSale(props.product));
 const isTopseller = computed(() => isProductTopSeller(props.product));
 
-const placeholderSvg = useImagePlaceholder();
+const { isLoggedIn } = useUser();
+const loginModal = inject<{
+  open: (options?: { onSuccess?: () => void | Promise<void> }) => void;
+} | null>("loginModal", null);
+
+function handleWishlistClick() {
+  if (isLoggedIn.value || !loginModal) {
+    props.toggleWishlist();
+    return;
+  }
+  loginModal.open({ onSuccess: props.toggleWishlist });
+}
 </script>
 
 <template>
-  <div ref="containerElement" class="self-stretch min-h-[350px] relative flex flex-col justify-start items-start overflow-hidden aspect-square">
+  <div class="self-stretch min-h-[350px] relative flex flex-col justify-start items-start overflow-hidden aspect-square">
     <RouterLink :to="productLink" class="self-stretch h-full relative overflow-hidden">
       <NuxtImg preset="productCard"
         class="w-full h-full absolute top-0 left-0 object-cover"
-        :placeholder="placeholderSvg"
-        :src="coverSrcPath" :alt="coverAlt" :modifiers="imageModifiers" data-testid="product-box-img" />
+        :src="coverSrcPath" :alt="coverAlt"
+        width="400" height="400"
+        densities="1x"
+        loading="lazy"
+        data-testid="product-box-img" />
     </RouterLink>
 
     <div v-if="isTopseller || isOnSale"
@@ -77,9 +76,11 @@ const placeholderSvg = useImagePlaceholder();
     </div>
 
     <client-only>
-      <SwIconButton type="secondary" aria-label="Toggle wishlist" :disabled="isLoading"
+      <SwIconButton type="secondary"
+        :aria-label="isInWishlist ? translations.product.removeFromWishlist : translations.product.addToWishlist"
+        :disabled="isLoading"
         class="w-10 h-10 right-4 top-4 absolute bg-brand-secondary rounded-full flex items-center justify-center"
-        data-testid="product-box-toggle-wishlist-button" @click="toggleWishlist">
+        data-testid="product-box-toggle-wishlist-button" @click="handleWishlistClick">
         <SwWishlistIcon :filled="isInWishlist" />
       </SwIconButton>
     </client-only>

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

@@ -7,12 +7,12 @@ 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 { LocationQueryRaw } from "vue-router";
+import { useCategoryListing, useRoute, useRouter } 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;
 };