@shopware/cms-base-layer 0.0.0-canary-20260119102409 → 0.0.0-canary-20260119103402

package/README.md

@@ -349,7 +349,7 @@ 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: 0.0.0-canary-20260119102409
+### Latest changes: 0.0.0-canary-20260119103402
 
 ### Minor Changes
 
@@ -361,6 +361,8 @@ Full changelog for stable version is available [here](https://github.com/shopwar
 
 ### Patch Changes
 
+- [#2226](https://github.com/shopware/frontends/pull/2226) [`d77eacc`](https://github.com/shopware/frontends/commit/d77eaccdec6c56a6f2d999048c751fb9f01177d4) Thanks [@mkucmus](https://github.com/mkucmus)! - Add config prop support to `SwProductGallery` and make `CmsElementImageGallery` respect `minHeight`, `navigationArrows`, and `navigationDots` config values.
+
 - [#2210](https://github.com/shopware/frontends/pull/2210) [`c6b88b7`](https://github.com/shopware/frontends/commit/c6b88b7d2c50054188356aeb0f83053554d442f5) Thanks [@mkucmus](https://github.com/mkucmus)! - Anchor tags with "btn btn-primary" classes from the API were not being
   transformed to Tailwind utility classes due to condition matching issues
   in the html-to-vue renderer.

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/public/cms/element/CmsElementImageGallery.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { CmsElementImageGallery } from "@shopware/composables";
 import { computed, defineAsyncComponent, ref } from "vue";
-import { useImagePlaceholder } from "#imports";
+import { useCmsElementConfig, useImagePlaceholder } from "#imports";
 import { isSpatial } from "../../../../helpers/media/isSpatial";
 
 // Load SwMedia3D only on client-side to avoid SSR issues with three.js packages
@@ -13,6 +13,21 @@ const props = defineProps<{
   content: CmsElementImageGallery;
 }>();
 
+const { getConfigValue } = useCmsElementConfig(props.content);
+
+const DEFAULT_MIN_HEIGHT = "500px";
+const DEFAULT_NAVIGATION = "inside";
+
+const minHeight = computed(
+  () => getConfigValue("minHeight") || DEFAULT_MIN_HEIGHT,
+);
+const navigationArrows = computed(
+  () => getConfigValue("navigationArrows") || DEFAULT_NAVIGATION,
+);
+const navigationDots = computed(
+  () => getConfigValue("navigationDots") || DEFAULT_NAVIGATION,
+);
+
 const currentIndex = ref(0);
 const mediaGallery = computed(() => props.content.data?.sliderItems ?? []);
 const placeholderSvg = useImagePlaceholder();
@@ -75,7 +90,8 @@ function onTouchEnd() {
     <div class="w-full">
       <!-- Main Image Display -->
       <div
-        class="w-full h-[400px] sm:h-[500px] lg:h-[600px] xl:h-[700px] relative overflow-hidden"
+        class="w-full relative overflow-hidden"
+        :style="{ minHeight }"
         @touchstart="onTouchStart"
         @touchmove="onTouchMove"
         @touchend="onTouchEnd"
@@ -124,12 +140,17 @@ function onTouchEnd() {
 
       <!-- Navigation Arrows -->
       <div
-        v-if="mediaGallery.length > 1"
+        v-if="mediaGallery.length > 1 && navigationArrows !== 'none'"
         class="absolute inset-0 flex items-center justify-between px-2 sm:px-4 pointer-events-none"
       >
         <!-- Previous Button -->
         <button
-          class="w-10 h-10 rounded-full transition bg-white/20 hover:bg-white/50 disabled:opacity-50 pointer-events-auto shadow-lg flex items-center justify-center"
+          :class="[
+            'w-10 h-10 rounded-full transition disabled:opacity-50 pointer-events-auto shadow-lg flex items-center justify-center',
+            navigationArrows === 'outside'
+              ? 'bg-brand-tertiary text-surface-on-surface'
+              : 'bg-surface-surface/20 hover:bg-surface-surface/50',
+          ]"
           :disabled="currentIndex === 0"
           aria-label="Previous image"
           @click="previous"
@@ -139,7 +160,12 @@ function onTouchEnd() {
 
         <!-- Next Button -->
         <button
-          class="w-10 h-10 rounded-full transition bg-white/20 hover:bg-white/50 disabled:opacity-50 pointer-events-auto shadow-lg flex items-center justify-center"
+          :class="[
+            'w-10 h-10 rounded-full transition disabled:opacity-50 pointer-events-auto shadow-lg flex items-center justify-center',
+            navigationArrows === 'outside'
+              ? 'bg-brand-tertiary text-surface-on-surface'
+              : 'bg-surface-surface/20 hover:bg-surface-surface/50',
+          ]"
           :disabled="currentIndex === mediaGallery.length - 1"
           aria-label="Next image"
           @click="next"
@@ -150,8 +176,11 @@ function onTouchEnd() {
 
       <!-- Dot Indicators -->
       <div
-        v-if="mediaGallery.length > 1"
-        class="flex justify-center items-center gap-2 mt-2"
+        v-if="mediaGallery.length > 1 && navigationDots !== 'none'"
+        :class="[
+          'flex justify-center items-center gap-2',
+          navigationDots === 'outside' ? 'mt-4' : 'absolute bottom-4 left-1/2 transform -translate-x-1/2',
+        ]"
       >
         <button
           v-for="(image, index) in mediaGallery"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware/cms-base-layer",
-  "version": "0.0.0-canary-20260119102409",
+  "version": "0.0.0-canary-20260119103402",
   "description": "Vue CMS Nuxt Layer for Shopware",
   "author": "Shopware",
   "repository": {
@@ -48,8 +48,8 @@
     "vue": "3.5.26",
     "xss": "1.0.15",
     "@shopware/api-client": "1.4.0",
-    "@shopware/composables": "1.10.0",
-    "@shopware/helpers": "1.6.0"
+    "@shopware/helpers": "1.6.0",
+    "@shopware/composables": "1.10.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",