@shopware/cms-base-layer 3.0.0 → 3.0.1

package/README.md

@@ -110,22 +110,24 @@ export default defineNuxtConfig({
   unocss: {
     nuxtLayers: true, // enable Nuxt layers for UnoCSS
   },
-})
+});
 ```
 
 ```ts [uno.config.ts]
-import { mergeConfigs } from '@unocss/core'
-import baseConfig from './.nuxt/uno.config.mjs'
-
-export default mergeConfigs([baseConfig, {
-  theme: {
-    colors: {
-      'brand-primary': '#ff3e00',
-      'brand-secondary': '#1c1c1c',
+import { mergeConfigs } from "@unocss/core";
+import baseConfig from "./.nuxt/uno.config.mjs";
+
+export default mergeConfigs([
+  baseConfig,
+  {
+    theme: {
+      colors: {
+        "brand-primary": "#ff3e00",
+        "brand-secondary": "#1c1c1c",
+      },
     },
   },
-}])
-
+]);
 ```
 
 See the [UnoCSS reference](https://unocss.dev/integrations/nuxt#configuration) for more information on how to configure UnoCSS in Nuxt when work with layers.
@@ -150,12 +152,14 @@ This layer includes [Nuxt Image](https://image.nuxt.com/) configuration optimize
 The layer comes pre-configured with optimized settings. No additional setup is required! The configuration includes:
 
 **Available Presets:**
+
 - `productCard` - Product listing images (WebP, quality 90, cover fit)
 - `productDetail` - Product detail page images (WebP, quality 90, contain fit)
 - `thumbnail` - Small thumbnails (150x150, WebP, quality 90)
 - `hero` - Hero banners (WebP, quality 95, cover fit)
 
 **Responsive Breakpoints:**
+
 - `xs: 320px`, `sm: 640px`, `md: 768px`, `lg: 1024px`, `xl: 1280px`, `xxl: 1536px`
 
 ### Usage in Components
@@ -196,21 +200,23 @@ Replace standard `<img>` tags with `<NuxtImg>` to enable automatic optimization:
 
 Shopware supports the following URL parameters for image transformation:
 
-| Modifier | Description | Example | Support |
-|----------|-------------|---------|---------|
-| `width` | Image width in pixels | `400` | ✅ Always supported |
-| `height` | Image height in pixels | `600` | ✅ Always supported |
-| `quality` | Image quality (0-100) | `85` | ⚠️ Cloud/Plugin required* |
-| `format` | Output format | `webp`, `avif`, `jpg`, `png` | ⚠️ Cloud/Plugin required* |
-| `fit` | Resize behavior | `cover`, `contain`, `fill` | ⚠️ Cloud/Plugin required* |
+| Modifier  | Description            | Example                      | Support                    |
+| --------- | ---------------------- | ---------------------------- | -------------------------- |
+| `width`   | Image width in pixels  | `400`                        | ✅ Always supported        |
+| `height`  | Image height in pixels | `600`                        | ✅ Always supported        |
+| `quality` | Image quality (0-100)  | `85`                         | ⚠️ Cloud/Plugin required\* |
+| `format`  | Output format          | `webp`, `avif`, `jpg`, `png` | ⚠️ Cloud/Plugin required\* |
+| `fit`     | Resize behavior        | `cover`, `contain`, `fill`   | ⚠️ Cloud/Plugin required\* |
+
+\*Advanced transformations (quality, format, fit) are available in:
 
-*Advanced transformations (quality, format, fit) are available in:
 - **Shopware Cloud (SaaS)**: Built-in support via managed infrastructure. For a complete list of supported image transformation parameters, see [Fastly Image Optimizer Query Parameters](https://www.fastly.com/documentation/reference/io/#query-parameters).
 - **Self-hosted instances**: Require thumbnail processor plugins like [FroshPlatformThumbnailProcessor](https://github.com/FriendsOfShopware/FroshPlatformThumbnailProcessor) or third-party CDN integration
 
 ### How It Works
 
 This layer includes a custom Shopware provider for Nuxt Image that maps modifiers to Shopware's query parameters:
+
 - `width` modifier → `?width=400`
 - `height` modifier → `?height=300`
 - `quality` modifier → `?quality=85`
@@ -249,31 +255,31 @@ export default defineNuxtConfig({
     quality: 85,
 
     // Add/change formats
-    formats: ['avif', 'webp', 'jpg'],
+    formats: ["avif", "webp", "jpg"],
 
     // Override or add presets
     presets: {
       // Override existing preset
       productCard: {
         modifiers: {
-          format: 'avif',
+          format: "avif",
           quality: 80,
-          fit: 'cover',
-        }
+          fit: "cover",
+        },
       },
       // Add custom preset
       categoryBanner: {
         modifiers: {
-          format: 'webp',
+          format: "webp",
           quality: 90,
           width: 1200,
           height: 400,
-          fit: 'cover',
-        }
-      }
-    }
-  }
-})
+          fit: "cover",
+        },
+      },
+    },
+  },
+});
 ```
 
 ## 🖼️ Image Placeholder
@@ -335,6 +341,7 @@ When a CMS section or block has a `backgroundMedia` set, the components call `ge
 4. Appends `format` and `quality` from `app.config.ts` if provided
 
 **Example generated URL:**
+
 ```
 url("https://cdn.shopware.store/.../image.jpg?width=1000&fit=crop,smart&format=webp&quality=85")
 ```
@@ -348,6 +355,7 @@ This layer includes a `useLcpImagePreload` composable that automatically preload
 ### How it works
 
 The composable scans CMS sections in document order, checking:
+
 1. Section background images (`section.backgroundMedia`)
 2. Block background images (`block.backgroundMedia`)
 3. Image element media (`slot.data.media`)
@@ -386,11 +394,14 @@ productCard: {
 ```
 
 ```vue
-<NuxtImg preset="productCard"
+<NuxtImg
+  preset="productCard"
   :src="coverSrcPath"
-  width="400" height="400"
+  width="400"
+  height="400"
   densities="1x"
-  loading="lazy" />
+  loading="lazy"
+/>
 ```
 
 - **Fixed `width`/`height`** (400px) — avoid hydration mismatches caused by dynamic DOM measurement
@@ -474,36 +485,9 @@ No additional packages needed to be installed.
 
 Full changelog for stable version is available [here](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/CHANGELOG.md)
 
-### Latest changes: 3.0.0
-
-### Major Changes
-
-- [#2406](https://github.com/shopware/frontends/pull/2406) [`df93461`](https://github.com/shopware/frontends/commit/df93461434cb79ec9d722cdbd42a37a9af07fb03) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Remove bundled UnoCSS configuration and design tokens from the CMS layer. Consumers who relied on the previous default UnoCSS setup should extend `@shopware/unocss-design-tokens-layer` alongside this package. See the package README and framework docs for migration steps.
-
-### Minor Changes
-
-- [#2420](https://github.com/shopware/frontends/pull/2420) [`9e37ab6`](https://github.com/shopware/frontends/commit/9e37ab6897f501ed3d261fa619aee349e46342c2) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Add FrontendAccountCustomerGroupRegistrationPage component for customer group view
+### Latest changes: 3.0.1
 
 ### Patch Changes
 
-- [#2439](https://github.com/shopware/frontends/pull/2439) [`a992e39`](https://github.com/shopware/frontends/commit/a992e396ea6aa3b44783d183561fa8b0605b77f0) Thanks [@patzick](https://github.com/patzick)! - Use Nuxt route composables in CMS components to keep route query access available during SSR.
-
-- [#2389](https://github.com/shopware/frontends/pull/2389) [`05438c6`](https://github.com/shopware/frontends/commit/05438c636a6c99b48e87d8f2ff5b03bf313c4e67) Thanks [@mkucmus](https://github.com/mkucmus)! - Fix product card and CMS image sizing to prevent duplicate/oversized image requests. Move fixed dimensions and `densities="1x"` into the `productCard` preset, and use `useElementSize`-based `width`/`height` props for `CmsElementImage`.
-
-- [#2378](https://github.com/shopware/frontends/pull/2378) [`c36bc1f`](https://github.com/shopware/frontends/commit/c36bc1ff17e8e34c52fa91e6388ce210fffb7e8e) Thanks [@patzick](https://github.com/patzick)! - Add UnoCSS directive transformation for CMS block styles so layered Nuxt apps do not emit CSS minification warnings from raw `@apply` directives during production builds.
-
-- [#2369](https://github.com/shopware/frontends/pull/2369) [`3c16985`](https://github.com/shopware/frontends/commit/3c16985ddf3878bc207c514a5ab8e4a6409f809c) Thanks [@mkucmus](https://github.com/mkucmus)! - Fixed `xss` library loading issue in Vite dev server by adding it to `optimizeDeps.include`
-
-- [#2371](https://github.com/shopware/frontends/pull/2371) [`33e0c69`](https://github.com/shopware/frontends/commit/33e0c69afc3de854733ab61f866ba65cce1489f6) Thanks [@patzick](https://github.com/patzick)! - Disable automatic CMS LCP image preload by default.
-
-  The preload helper now only injects image preload tags when
-  `appConfig.lcpImagePreload` is explicitly enabled, which avoids noisy preload
-  warnings on storefront pages that do not immediately use the detected image.
-
-- [#2326](https://github.com/shopware/frontends/pull/2326) [`e7efff8`](https://github.com/shopware/frontends/commit/e7efff8c615ae8d0858572933285216cc533dd0b) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Gate wishlist button behind login when useLoginModal is provided via provide/inject. For guests, show login modal on wishlist click and add product to wishlist after successful login.
-
-- [#2346](https://github.com/shopware/frontends/pull/2346) [`a47143a`](https://github.com/shopware/frontends/commit/a47143a670f49deecc35dce4bb8b6bd12d9a3b47) Thanks [@joberthel](https://github.com/joberthel)! - Improve `SwMedia3D` model framing by fitting loaded 3D models into the viewport automatically. This fixes cases where very small 3D files appeared tiny and hard to inspect.
-
-- Updated dependencies [[`22fc8a7`](https://github.com/shopware/frontends/commit/22fc8a7301f6a7d2612d907ab73555978b651c00), [`bea7f58`](https://github.com/shopware/frontends/commit/bea7f5882cb58c6d47c84a82db5c8ecaf9bcf8ef), [`b8c0091`](https://github.com/shopware/frontends/commit/b8c00913c3afb5e1e63de9565105f8f8e3bf299f)]:
-  - @shopware/helpers@1.7.1
-  - @shopware/composables@1.11.1
+- Updated dependencies [[`8be060d`](https://github.com/shopware/frontends/commit/8be060de825ca799f98a8f045a5e7fea61f5d1a2), [`5678fb0`](https://github.com/shopware/frontends/commit/5678fb008cbd86eaddd061e004de89e6f45bb7ec), [`22611e5`](https://github.com/shopware/frontends/commit/22611e542b8f42a4f34dce5186f628f9a17f457b)]:
+  - @shopware/composables@1.12.0

package/app/components/SwCategoryNavigation.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const {

package/app/components/SwCategoryNavigationLink.vue

@@ -7,6 +7,7 @@ import {
 } from "@shopware/helpers";
 import { computed } from "vue";
 import { RouterLink } from "vue-router";
+
 import { useUrlResolver } from "#imports";
 import type { Schemas } from "#shopware";
 
@@ -43,7 +44,9 @@ const hasChildren = computed(() => {
     v-if="props.level === 0"
     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-start items-center gap-1">
+    <div
+      class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-start items-center gap-1"
+    >
       <div class="flex-1 flex justify-start items-center gap-2.5">
         <RouterLink
           v-if="!urlIsAbsolute(url.path)"
@@ -76,17 +79,19 @@ const hasChildren = computed(() => {
         type="button"
         :aria-label="props.isExpanded ? 'Collapse' : 'Expand'"
       >
-        <SwChevronIcon :direction="props.isExpanded ? 'up' : 'down'" :size="20" />
+        <SwChevronIcon
+          :direction="props.isExpanded ? 'up' : 'down'"
+          :size="20"
+        />
       </button>
     </div>
   </div>
 
   <!-- Level 2+ Categories (Nested with left padding) -->
-  <div
-    v-else
-    class="self-stretch flex flex-col justify-center items-center"
-  >
-    <div class="self-stretch pl-4 py-1.5 inline-flex justify-start items-center gap-2">
+  <div v-else class="self-stretch flex flex-col justify-center items-center">
+    <div
+      class="self-stretch pl-4 py-1.5 inline-flex justify-start items-center gap-2"
+    >
       <div class="py-0.5 flex-1 flex justify-start items-center gap-2.5">
         <RouterLink
           v-if="!urlIsAbsolute(url.path)"
@@ -121,7 +126,10 @@ const hasChildren = computed(() => {
         type="button"
         :aria-label="props.isExpanded ? 'Collapse' : 'Expand'"
       >
-        <SwChevronIcon :direction="props.isExpanded ? 'up' : 'down'" :size="20" />
+        <SwChevronIcon
+          :direction="props.isExpanded ? 'up' : 'down'"
+          :size="20"
+        />
       </button>
     </div>
   </div>

package/app/components/SwContactForm.vue

@@ -7,6 +7,7 @@ import { useVuelidate } from "@vuelidate/core";
 import { email, minLength, required } from "@vuelidate/validators";
 import { defu } from "defu";
 import { computed, reactive, ref } from "vue";
+
 import {
   useCmsElementConfig,
   useNavigationContext,

package/app/components/SwFilterChips.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+
 import type { Schemas } from "#shopware";
 
 type FilterState = {

package/app/components/SwListingProductPrice.vue

@@ -2,6 +2,7 @@
 import { useCmsTranslations, useProductPrice } from "@shopware/composables";
 import { defu } from "defu";
 import { toRefs } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{
@@ -53,13 +54,18 @@ const {
           </template>
         </SwSharedPrice>
       </div>
-      <div class="text-surface-on-surface-variant text-sm font-normal leading-tight line-through">
+      <div
+        class="text-surface-on-surface-variant text-sm font-normal leading-tight line-through"
+      >
         <SwSharedPrice :value="price?.listPrice?.price" />
       </div>
     </div>
 
     <!-- Regular price display -->
-    <div v-else class="text-surface-on-surface text-base font-bold leading-normal">
+    <div
+      v-else
+      class="text-surface-on-surface text-base font-bold leading-normal"
+    >
       <SwSharedPrice :value="unitPrice">
         <template #beforePrice>
           <span v-if="displayFrom || displayFromVariants" class="text-sm">{{
@@ -70,7 +76,10 @@ const {
     </div>
 
     <!-- Variants from price -->
-    <div v-if="displayFromVariants" class="text-surface-on-surface text-base font-bold leading-normal">
+    <div
+      v-if="displayFromVariants"
+      class="text-surface-on-surface text-base font-bold leading-normal"
+    >
       <SwSharedPrice :value="displayFromVariants">
         <template #beforePrice>
           <span v-if="displayFromVariants" class="text-sm">{{
@@ -81,7 +90,10 @@ const {
     </div>
 
     <!-- Regulation price -->
-    <div v-if="regulationPrice" class="flex gap-2 text-surface-on-surface-variant text-sm">
+    <div
+      v-if="regulationPrice"
+      class="flex gap-2 text-surface-on-surface-variant text-sm"
+    >
       {{ translations.listing.previously }}
       <SwSharedPrice :value="regulationPrice" />
     </div>

package/app/components/SwMedia3D.vue

@@ -29,10 +29,7 @@ function focusObject() {
 </script>
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera
-      :args="[75, 1, 0.1, 2000]"
-      :position="[0, 0, 500]"
-    />
+    <TresPerspectiveCamera :args="[75, 1, 0.1, 2000]" :position="[0, 0, 500]" />
     <OrbitControls make-default />
     <Bounds ref="boundsRef" clip use-mounted>
       <primitive v-if="model" :object="model" @click="focusObject" />

package/app/components/SwNewsletterForm.vue

@@ -8,6 +8,7 @@ import type { ValidationRuleWithoutParams } from "@vuelidate/core";
 import { email, required } from "@vuelidate/validators";
 import { defu } from "defu";
 import { computed, reactive, ref } from "vue";
+
 import { useCmsElementConfig, useNewsletter, useSalutations } from "#imports";
 
 const props = defineProps<{
@@ -236,7 +237,7 @@ const invokeSubmit = async () => {
             id="salutation"
             v-model="state.salutationId"
             name="salutation"
-            class=" border-outline-outline-variant focus:border-brand-primaryappearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
+            class="border-outline-outline-variant focus:border-brand-primaryappearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
           >
             <option disabled selected value="">
               {{ translations.form.salutationPlaceholder }}
@@ -261,8 +262,8 @@ const invokeSubmit = async () => {
             class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.firstName?.$error
-          ? 'border-red-600 focus:border-red-600'
-          : 'border-outline-outline-variant focus:border-brand-primary',
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.firstNamePlaceholder"
             @blur="$v.firstName?.$touch()"

package/app/components/SwProductAddToCart.vue

@@ -3,6 +3,7 @@ import { useCmsTranslations } from "@shopware/composables";
 import { getCmsTranslate } from "@shopware/helpers";
 import { defu } from "defu";
 import { computed, toRefs } from "vue";
+
 import {
   useAddToCart,
   useCartErrorParamsResolver,
@@ -72,16 +73,32 @@ const addToCartProxy = async () => {
 
 <template>
   <div class="w-full inline-flex flex-col justify-start items-start gap-8">
-    <SwQuantitySelect v-model="quantity" :min="product.minPurchase" :max="product.maxPurchase"
-      :steps="product.purchaseSteps" />
-    <SwStockInfo :availableStock="availableStock" :minPurchase="minPurchase" :deliveryTime="deliveryTime"
-      :restockTime="restockTime" />
+    <SwQuantitySelect
+      v-model="quantity"
+      :min="product.minPurchase"
+      :max="product.maxPurchase"
+      :steps="product.purchaseSteps"
+    />
+    <SwStockInfo
+      :availableStock="availableStock"
+      :minPurchase="minPurchase"
+      :deliveryTime="deliveryTime"
+      :restockTime="restockTime"
+    />
     <div class="self-stretch flex flex-col justify-start items-start gap-1">
-      <SwBaseButton variant="primary" size="medium" :disabled="!product?.available" block data-testid="add-to-cart-button"
-        @click="addToCartProxy">
+      <SwBaseButton
+        variant="primary"
+        size="medium"
+        :disabled="!product?.available"
+        block
+        data-testid="add-to-cart-button"
+        @click="addToCartProxy"
+      >
         {{ translations.product.addToCart }}
       </SwBaseButton>
-      <div class="self-stretch text-surface-on-surface text-xs font-normal leading-none">
+      <div
+        class="self-stretch text-surface-on-surface text-xs font-normal leading-none"
+      >
         {{ translations.product.productNumber }}: {{ productNumber }}
       </div>
     </div>

package/app/components/SwProductCard.vue

@@ -12,6 +12,7 @@ import {
 import { getCmsTranslate } from "@shopware/helpers";
 import { defu } from "defu";
 import { computed, ref, toRef } from "vue";
+
 import {
   useAddToCart,
   useCartErrorParamsResolver,

package/app/components/SwProductCardDetails.vue

@@ -2,6 +2,7 @@
 import type { BoxLayout } from "@shopware/composables";
 import type { UrlRouteOutput } from "@shopware/helpers";
 import { computed } from "vue";
+
 import type { Schemas } from "#shopware";
 
 type Translations = {
@@ -28,18 +29,24 @@ const props = defineProps<{
 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">
+  <div
+    class="self-stretch p-2 flex flex-col justify-between items-start gap-4 flex-1"
+  >
     <div class="self-stretch flex flex-col justify-start items-start gap-4">
       <div class="self-stretch flex flex-col justify-start items-start gap-2">
         <div class="self-stretch flex flex-col justify-start items-start gap-1">
-          <div v-if="productManufacturer"
-            class="self-stretch text-surface-on-surface text-sm font-bold leading-tight">
+          <div
+            v-if="productManufacturer"
+            class="self-stretch text-surface-on-surface text-sm font-bold leading-tight"
+          >
             {{ productManufacturer }}
           </div>
 
-          <RouterLink :to="productLink"
+          <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 min-h-[4.5rem]"
-            data-testid="product-box-product-name-link">
+            data-testid="product-box-product-name-link"
+          >
             {{ productName }}
           </RouterLink>
         </div>
@@ -54,13 +61,24 @@ const isMinimalLayout = computed(() => props.layoutType === "minimal");
       />
 
       <!-- Price for standard layout -->
-      <SwListingProductPrice v-else :product="product" data-testid="product-box-product-price" />
+      <SwListingProductPrice
+        v-else
+        :product="product"
+        data-testid="product-box-product-price"
+      />
     </div>
 
     <!-- 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">
+      <SwBaseButton
+        variant="primary"
+        v-if="!fromPrice"
+        size="medium"
+        :disabled="!product?.available"
+        block
+        data-testid="add-to-cart-button"
+        @click="addToCartProxy"
+      >
         {{ translations.product.addToCart }}
       </SwBaseButton>
 
@@ -71,4 +89,4 @@ const isMinimalLayout = computed(() => props.layoutType === "minimal");
       </RouterLink>
     </template>
   </div>
-</template>
+</template>

package/app/components/SwProductCardImage.vue

@@ -6,6 +6,7 @@ import {
   isProductTopSeller,
 } from "@shopware/helpers";
 import { computed, inject } from "vue";
+
 import { useUser } from "#imports";
 import type { Schemas } from "#shopware";
 
@@ -57,32 +58,50 @@ function handleWishlistClick() {
 </script>
 
 <template>
-  <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"
+  <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"
-        :src="coverSrcPath" :alt="coverAlt"
-        width="400" height="400"
+        :src="coverSrcPath"
+        :alt="coverAlt"
+        width="400"
+        height="400"
         densities="1x"
         loading="lazy"
-        data-testid="product-box-img" />
+        data-testid="product-box-img"
+      />
     </RouterLink>
 
-    <div v-if="isTopseller || isOnSale"
-      class="px-1.5 py-1 left-2 bottom-2 absolute bg-other-sale rounded inline-flex justify-center items-center">
+    <div
+      v-if="isTopseller || isOnSale"
+      class="px-1.5 py-1 left-2 bottom-2 absolute bg-other-sale rounded inline-flex justify-center items-center"
+    >
       <div class="text-states-on-error text-xs font-bold leading-none">
         {{ translations.product.badges.topseller }}
       </div>
     </div>
 
     <client-only>
-      <SwIconButton type="secondary"
-        :aria-label="isInWishlist ? translations.product.removeFromWishlist : translations.product.addToWishlist"
+      <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="handleWishlistClick">
+        data-testid="product-box-toggle-wishlist-button"
+        @click="handleWishlistClick"
+      >
         <SwWishlistIcon :filled="isInWishlist" />
       </SwIconButton>
     </client-only>
   </div>
-</template>
+</template>

package/app/components/SwProductCardSkeleton.vue

@@ -1,33 +1,56 @@
 <template>
-  <div class="inline-flex flex-col items-start justify-start self-stretch overflow-hidden p-px w-full"
-    aria-hidden="true">
+  <div
+    class="inline-flex flex-col items-start justify-start self-stretch overflow-hidden p-px w-full"
+    aria-hidden="true"
+  >
     <!-- image skeleton -->
-    <div class="relative flex h-80 flex-col items-start justify-start self-stretch overflow-hidden">
-      <div class="relative h-80 w-full bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+    <div
+      class="relative flex h-80 flex-col items-start justify-start self-stretch overflow-hidden"
+    >
+      <div
+        class="relative h-80 w-full bg-gray-200 dark:bg-gray-700 animate-pulse"
+      ></div>
 
       <div
-        class="absolute top-[281px] left-2 inline-flex items-center justify-center rounded bg-gray-300 dark:bg-gray-600 px-3 py-1 animate-pulse">
-        <span class="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded block"></span>
+        class="absolute top-[281px] left-2 inline-flex items-center justify-center rounded bg-gray-300 dark:bg-gray-600 px-3 py-1 animate-pulse"
+      >
+        <span
+          class="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded block"
+        ></span>
       </div>
 
-      <div class="absolute top-4 right-4 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-600 animate-pulse"></div>
+      <div
+        class="absolute top-4 right-4 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-600 animate-pulse"
+      ></div>
     </div>
 
     <!-- details skeleton -->
     <div class="flex flex-col items-start justify-start gap-4 self-stretch p-2">
-      <div class="h-4 w-32 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+      <div
+        class="h-4 w-32 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+      ></div>
 
       <div class="w-full">
-        <div class="h-7 w-3/4 rounded bg-gray-200 dark:bg-gray-700 mb-2 animate-pulse"></div>
-        <div class="h-7 w-1/2 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+        <div
+          class="h-7 w-3/4 rounded bg-gray-200 dark:bg-gray-700 mb-2 animate-pulse"
+        ></div>
+        <div
+          class="h-7 w-1/2 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+        ></div>
       </div>
 
-      <div class="h-6 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+      <div
+        class="h-6 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+      ></div>
 
       <div class="flex w-full gap-3">
-        <div class="flex-1 h-10 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
-        <div class="w-24 h-10 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+        <div
+          class="flex-1 h-10 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+        ></div>
+        <div
+          class="w-24 h-10 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+        ></div>
       </div>
     </div>
   </div>
-</template>
+</template>