From f6b194e97f7bafb291a6c8b2397ed1412fd003e9 Mon Sep 17 00:00:00 2001
From: Maciej D <7597086+mdanilowicz@users.noreply.github.com>
Date: Mon, 13 May 2024 14:20:49 +0200
Subject: [PATCH] fix(cms): 3d placeholder vue component (#924)

---
 .changeset/young-files-laugh.md               |  5 ++
 .../cms/element/CmsElementImageGallery.vue    |  4 +-
 .../CmsElementImageGallery3dPlaceholder.vue   | 53 +++++++++++++++++++
 3 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/young-files-laugh.md
 create mode 100644 packages/cms-base/components/public/cms/element/CmsElementImageGallery3dPlaceholder.vue

diff --git a/.changeset/young-files-laugh.md b/.changeset/young-files-laugh.md
new file mode 100644
index 000000000..12f9cce0b
--- /dev/null
+++ b/.changeset/young-files-laugh.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/cms-base": patch
+---
+
+Moved the svg 3d media placeholder to the vue component
diff --git a/packages/cms-base/components/public/cms/element/CmsElementImageGallery.vue b/packages/cms-base/components/public/cms/element/CmsElementImageGallery.vue
index d56ed18bf..d319ac45a 100644
--- a/packages/cms-base/components/public/cms/element/CmsElementImageGallery.vue
+++ b/packages/cms-base/components/public/cms/element/CmsElementImageGallery.vue
@@ -195,10 +195,8 @@ function next() {
               @click="() => changeCover(i)"
             >
               <div v-if="isSpatial(image.media)" class="h-full relative">
-                <img
+                <CmsElementImageGallery3dPlaceholder
                   class="w-full h-full object-center"
-                  src="~/assets/3d.svg"
-                  alt="3d object"
                 />
                 <span
                   class="absolute bottom-0 text-sm bg-gray rounded px-1 text-white"
diff --git a/packages/cms-base/components/public/cms/element/CmsElementImageGallery3dPlaceholder.vue b/packages/cms-base/components/public/cms/element/CmsElementImageGallery3dPlaceholder.vue
new file mode 100644
index 000000000..dc1203b85
--- /dev/null
+++ b/packages/cms-base/components/public/cms/element/CmsElementImageGallery3dPlaceholder.vue
@@ -0,0 +1,53 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="552"
+    height="383"
+    viewBox="0 0 552 383"
+  >
+    <defs>
+      <g
+        fill="none"
+        fill-rule="evenodd"
+        opacity=".65"
+        id="icons-default-placeholder"
+      >
+        <rect
+          width="333.061"
+          height="499.591"
+          x="84.659"
+          y="-82.663"
+          fill="#E9EBF2"
+          fill-rule="nonzero"
+          transform="rotate(-89.862 251.19 167.132)"
+        ></rect>
+        <g transform="translate(51 49)">
+          <rect
+            width="333.06"
+            height="499.59"
+            x="83.983"
+            y="-83.234"
+            fill="#DADDE5"
+            fill-rule="nonzero"
+            transform="rotate(-90 250.513 166.561)"
+          ></rect>
+          <polygon
+            fill="#E9EBF2"
+            points="137.18 333.1 500.31 333.1 500.31 302.36 322.15 110.42"
+          ></polygon>
+          <circle cx="113.04" cy="65.68" r="35.9" fill="#F5F7FC"></circle>
+          <polygon
+            fill="#F5F7FC"
+            points="219.88 157.3 73.85 333.1 383.05 333.1"
+          ></polygon>
+        </g>
+      </g>
+    </defs>
+    <use
+      xlink:href="#icons-default-placeholder"
+      fill="#758CA3"
+      fill-rule="evenodd"
+    ></use>
+  </svg>
+</template>