From a7b7cb3697f360ba1d5948e7dbd374917463ed4b Mon Sep 17 00:00:00 2001
From: carojansing <c.jansing@basecom.de>
Date: Wed, 11 Sep 2024 07:28:28 +0200
Subject: [PATCH 1/7] BUS-795-CMS-Block+Element-Three-Collumns-Product-Boxes

---
 .env.example                                  |   2 +-
 bun.lockb                                     | Bin 456836 -> 456836 bytes
 .../cms/block/CmsBlockProductThreeColumn.vue  |  21 +++
 .../cms/element/CmsElementProductBox.vue      |  14 ++
 nuxt.config.ts                                | 128 ++++++++++--------
 pages/[...all].vue                            |   1 +
 6 files changed, 107 insertions(+), 59 deletions(-)
 create mode 100644 components/cms/block/CmsBlockProductThreeColumn.vue
 create mode 100644 components/cms/element/CmsElementProductBox.vue

diff --git a/.env.example b/.env.example
index 9f6ac38..129ffaa 100644
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,2 @@
 NUXT_PUBLIC_POND_SHOPWARE_ENDPOINT=http://localhost
-NUXT_PUBLIC_POND_ACCESS_TOKEN=
+NUXT_PUBLIC_POND_ACCESS_TOKEN=SWSCZHNVCVDZCK5SCDNRBJJ3UW
diff --git a/bun.lockb b/bun.lockb
index 38159fae45e8e2baf3ca800361476a0b9a673c39..9f7fd0182473c31402c6b9b76bb32ccdd83002cf 100755
GIT binary patch
delta 211
zcmZqqDBbc=x}k-!g{g&k3(LzTjAqkcEn(TpXf%DnQWhx_Lxy<_3=G^13=M0zRy}CB
z*?fbEG0s5GRL_KgVI@#T4k)u?VXKP7o1Pe;jG>;9p275YOIalSjTjhi0Tu876|9|O
zzqH9fRu`neK+n)n&+r*k=H>U8Ws>i!{vu>ji*qvbN*EY+hBQ>K7g+HFC}XK-sb@Gn
sY#ECYvoX;0?qw{-j26@PFJqBlG@c%i$SU9deHjZ7vu^*sjIB2i00tXG!vFvP

delta 187
zcmZqqDBbc=x}k-!g{g&k3(LzTjHc6HEn(TpXgGbrQWhx_1BQ7F3=G^13=M0zRy}CB
z*?fbEG0s5GRL_usVI@#T4k)u?VXKP7o1Pe;jG>-^p5gR&OIakRUtG;1YxE4Lga@eP
z<@cCnlJBejf|LMN0F|W{=Va!UFfi;4X{cT=u;K?$#u8|(!St|YEJn;mdPdW`m$4W#
e8cg56j70)S1thY{w|`&80>rG_zb|9!4FmvDV?a>=

diff --git a/components/cms/block/CmsBlockProductThreeColumn.vue b/components/cms/block/CmsBlockProductThreeColumn.vue
new file mode 100644
index 0000000..95daeea
--- /dev/null
+++ b/components/cms/block/CmsBlockProductThreeColumn.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { Schemas } from '@shopware/api-client/api-types';
+
+const props = defineProps<{
+    block: Schemas['CmsBlock'];
+}>();
+
+const { getSlotContent } = useCmsBlock(props.block);
+
+const leftContent: Schemas['CmsSlot'] = getSlotContent('left');
+const centerContent: Schemas['CmsSlot'] = getSlotContent('center');
+const rightContent: Schemas['CmsSlot'] = getSlotContent('right');
+</script>
+
+<template>
+    <div class="grid gap-4 md:grid-cols-3">
+        <CmsLoader :content="leftContent" />
+        <CmsLoader :content="centerContent" />
+        <CmsLoader :content="rightContent" />
+    </div>
+</template>
diff --git a/components/cms/element/CmsElementProductBox.vue b/components/cms/element/CmsElementProductBox.vue
new file mode 100644
index 0000000..043e690
--- /dev/null
+++ b/components/cms/element/CmsElementProductBox.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { CmsElementProductBox } from '@shopware-pwa/composables-next';
+import ProductCard from '~/components/product/ProductCard.vue';
+
+const props = defineProps<{
+    element: CmsElementProductBox;
+}>();
+
+const { product } = useProduct(props.element.data.product);
+</script>
+
+<template>
+        <ProductCard :product="product"></ProductCard>
+</template>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 50c4242..bc8546d 100755
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -5,61 +5,73 @@ const currentDir = dirname(fileURLToPath(import.meta.url));
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-    devtools: { enabled: true },
-    modules: [
-        '@pinia/nuxt',
-        '@nuxtjs/tailwindcss',
-        '@formkit/auto-animate/nuxt',
-        '@vueuse/nuxt',
-        'radix-vue/nuxt',
-        '@nuxt/eslint',
-        '@nuxt/fonts',
-        '@formkit/nuxt',
-    ],
-    experimental: {
-        asyncContext: true,
-        sharedPrerenderData: true,
-        typedPages: true,
-        viewTransition: true,
-    },
-    features: {
-        devLogs: true,
-    },
-    future: {
-        compatibilityVersion: 4,
-    },
-    runtimeConfig: {
-        public: {
-            pond: {
-                shopwareEndpoint: '',
-                accessToken: '',
-            },
-        },
-    },
-    imports: {
-        dirs: [
-            join(currentDir, 'composables/**'),
-            join(currentDir, 'utils'),
-            './node_modules/@shopware-pwa/composables-next/composables',
-        ],
-    },
-    formkit: {
-        autoImport: true,
-    },
-    fonts: {
-        defaults: {
-            weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
-            styles: ['normal', 'italic'],
-        },
-    },
-    components: {
-        dirs: [join(currentDir, 'components')],
-        global: true,
-    },
-    tailwindcss: {
-        config: {
-            content: [join(currentDir, 'formkit.theme.ts')],
-        },
-    },
-    css: ['~/node_modules/@glidejs/glide/dist/css/glide.core.min.css'],
-});
+  devtools: { enabled: true },
+
+  modules: [
+      '@pinia/nuxt',
+      '@nuxtjs/tailwindcss',
+      '@formkit/auto-animate/nuxt',
+      '@vueuse/nuxt',
+      'radix-vue/nuxt',
+      '@nuxt/eslint',
+      '@nuxt/fonts',
+      '@formkit/nuxt',
+  ],
+
+  experimental: {
+      asyncContext: true,
+      sharedPrerenderData: true,
+      typedPages: true,
+      viewTransition: true,
+  },
+
+  features: {
+      devLogs: true,
+  },
+
+  future: {
+      compatibilityVersion: 4,
+  },
+
+  runtimeConfig: {
+      public: {
+          pond: {
+              shopwareEndpoint: '',
+              accessToken: '',
+          },
+      },
+  },
+
+  imports: {
+      dirs: [
+          join(currentDir, 'composables/**'),
+          join(currentDir, 'utils'),
+          './node_modules/@shopware-pwa/composables-next/composables',
+      ],
+  },
+
+  formkit: {
+      autoImport: true,
+  },
+
+  fonts: {
+      defaults: {
+          weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+          styles: ['normal', 'italic'],
+      },
+  },
+
+  components: {
+      dirs: [join(currentDir, 'components')],
+      global: true,
+  },
+
+  tailwindcss: {
+      config: {
+          content: [join(currentDir, 'formkit.theme.ts')],
+      },
+  },
+
+  css: ['~/node_modules/@glidejs/glide/dist/css/glide.core.min.css'],
+  compatibilityDate: '2024-09-05',
+});
\ No newline at end of file
diff --git a/pages/[...all].vue b/pages/[...all].vue
index 4a047dd..0a90cdd 100644
--- a/pages/[...all].vue
+++ b/pages/[...all].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { pascalCase } from 'scule';
+import CmsBlockProductThreeColumn from '~/components/cms/block/CmsBlockProductThreeColumn.vue';
 
 const { resolvePath } = useNavigationSearch();
 const route = useRoute();

From f90354ea887f4f623199d12562b5af366689471b Mon Sep 17 00:00:00 2001
From: carojansing <c.jansing@basecom.de>
Date: Wed, 11 Sep 2024 09:05:12 +0200
Subject: [PATCH 2/7] BUS-795-env

---
 .env.example | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index 129ffaa..9f6ac38 100644
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,2 @@
 NUXT_PUBLIC_POND_SHOPWARE_ENDPOINT=http://localhost
-NUXT_PUBLIC_POND_ACCESS_TOKEN=SWSCZHNVCVDZCK5SCDNRBJJ3UW
+NUXT_PUBLIC_POND_ACCESS_TOKEN=

From 302ddf6a9be961de309c7562aed0c20d54161cd8 Mon Sep 17 00:00:00 2001
From: carojansing <88533476+carojansing@users.noreply.github.com>
Date: Wed, 11 Sep 2024 09:08:02 +0200
Subject: [PATCH 3/7] Update nuxt.config.ts

---
 nuxt.config.ts | 128 ++++++++++++++++++++++---------------------------
 1 file changed, 58 insertions(+), 70 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index bc8546d..50c4242 100755
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -5,73 +5,61 @@ const currentDir = dirname(fileURLToPath(import.meta.url));
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: true },
-
-  modules: [
-      '@pinia/nuxt',
-      '@nuxtjs/tailwindcss',
-      '@formkit/auto-animate/nuxt',
-      '@vueuse/nuxt',
-      'radix-vue/nuxt',
-      '@nuxt/eslint',
-      '@nuxt/fonts',
-      '@formkit/nuxt',
-  ],
-
-  experimental: {
-      asyncContext: true,
-      sharedPrerenderData: true,
-      typedPages: true,
-      viewTransition: true,
-  },
-
-  features: {
-      devLogs: true,
-  },
-
-  future: {
-      compatibilityVersion: 4,
-  },
-
-  runtimeConfig: {
-      public: {
-          pond: {
-              shopwareEndpoint: '',
-              accessToken: '',
-          },
-      },
-  },
-
-  imports: {
-      dirs: [
-          join(currentDir, 'composables/**'),
-          join(currentDir, 'utils'),
-          './node_modules/@shopware-pwa/composables-next/composables',
-      ],
-  },
-
-  formkit: {
-      autoImport: true,
-  },
-
-  fonts: {
-      defaults: {
-          weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
-          styles: ['normal', 'italic'],
-      },
-  },
-
-  components: {
-      dirs: [join(currentDir, 'components')],
-      global: true,
-  },
-
-  tailwindcss: {
-      config: {
-          content: [join(currentDir, 'formkit.theme.ts')],
-      },
-  },
-
-  css: ['~/node_modules/@glidejs/glide/dist/css/glide.core.min.css'],
-  compatibilityDate: '2024-09-05',
-});
\ No newline at end of file
+    devtools: { enabled: true },
+    modules: [
+        '@pinia/nuxt',
+        '@nuxtjs/tailwindcss',
+        '@formkit/auto-animate/nuxt',
+        '@vueuse/nuxt',
+        'radix-vue/nuxt',
+        '@nuxt/eslint',
+        '@nuxt/fonts',
+        '@formkit/nuxt',
+    ],
+    experimental: {
+        asyncContext: true,
+        sharedPrerenderData: true,
+        typedPages: true,
+        viewTransition: true,
+    },
+    features: {
+        devLogs: true,
+    },
+    future: {
+        compatibilityVersion: 4,
+    },
+    runtimeConfig: {
+        public: {
+            pond: {
+                shopwareEndpoint: '',
+                accessToken: '',
+            },
+        },
+    },
+    imports: {
+        dirs: [
+            join(currentDir, 'composables/**'),
+            join(currentDir, 'utils'),
+            './node_modules/@shopware-pwa/composables-next/composables',
+        ],
+    },
+    formkit: {
+        autoImport: true,
+    },
+    fonts: {
+        defaults: {
+            weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+            styles: ['normal', 'italic'],
+        },
+    },
+    components: {
+        dirs: [join(currentDir, 'components')],
+        global: true,
+    },
+    tailwindcss: {
+        config: {
+            content: [join(currentDir, 'formkit.theme.ts')],
+        },
+    },
+    css: ['~/node_modules/@glidejs/glide/dist/css/glide.core.min.css'],
+});

From 03e1cd66e94ba8a665516056bf3d8e788334f6e7 Mon Sep 17 00:00:00 2001
From: carojansing <88533476+carojansing@users.noreply.github.com>
Date: Wed, 11 Sep 2024 09:08:24 +0200
Subject: [PATCH 4/7] Update [...all].vue

---
 pages/[...all].vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/[...all].vue b/pages/[...all].vue
index 0a90cdd..4a047dd 100644
--- a/pages/[...all].vue
+++ b/pages/[...all].vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { pascalCase } from 'scule';
-import CmsBlockProductThreeColumn from '~/components/cms/block/CmsBlockProductThreeColumn.vue';
 
 const { resolvePath } = useNavigationSearch();
 const route = useRoute();

From 6bf07d2cfa3af75901f1501f54f12863675e650d Mon Sep 17 00:00:00 2001
From: carojansing <88533476+carojansing@users.noreply.github.com>
Date: Wed, 11 Sep 2024 15:28:45 +0200
Subject: [PATCH 5/7] Update components/cms/element/CmsElementProductBox.vue

Co-authored-by: nele sophie <53444487+aheartforspinach@users.noreply.github.com>
---
 components/cms/element/CmsElementProductBox.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/cms/element/CmsElementProductBox.vue b/components/cms/element/CmsElementProductBox.vue
index 043e690..7ddd618 100644
--- a/components/cms/element/CmsElementProductBox.vue
+++ b/components/cms/element/CmsElementProductBox.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { CmsElementProductBox } from '@shopware-pwa/composables-next';
-import ProductCard from '~/components/product/ProductCard.vue';
 
 const props = defineProps<{
     element: CmsElementProductBox;

From 74261e3219c6d72ad49628bf979b7fcd10644ff8 Mon Sep 17 00:00:00 2001
From: carojansing <c.jansing@basecom.de>
Date: Wed, 11 Sep 2024 15:29:31 +0200
Subject: [PATCH 6/7] BUS-795-CS

---
 components/cms/element/CmsElementProductBox.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/cms/element/CmsElementProductBox.vue b/components/cms/element/CmsElementProductBox.vue
index 7ddd618..aa4d4dd 100644
--- a/components/cms/element/CmsElementProductBox.vue
+++ b/components/cms/element/CmsElementProductBox.vue
@@ -9,5 +9,5 @@ const { product } = useProduct(props.element.data.product);
 </script>
 
 <template>
-        <ProductCard :product="product"></ProductCard>
-</template>
\ No newline at end of file
+    <ProductCard :product="product"></ProductCard>
+</template>

From 9a5abd0f23808a390c9c313747d9318ee5392a65 Mon Sep 17 00:00:00 2001
From: carojansing <c.jansing@basecom.de>
Date: Tue, 17 Sep 2024 11:41:03 +0200
Subject: [PATCH 7/7] BUS-825-Youtube-Video

---
 components/cms/block/CmsBlockYoutubeVideo.vue | 12 +++++++
 .../cms/element/CmsElementYoutubeVideo.vue    | 31 +++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 components/cms/block/CmsBlockYoutubeVideo.vue
 create mode 100644 components/cms/element/CmsElementYoutubeVideo.vue

diff --git a/components/cms/block/CmsBlockYoutubeVideo.vue b/components/cms/block/CmsBlockYoutubeVideo.vue
new file mode 100644
index 0000000..170335c
--- /dev/null
+++ b/components/cms/block/CmsBlockYoutubeVideo.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { Schemas } from '@shopware/api-client/api-types';
+const props = defineProps<{
+    block: Schemas['CmsBlock'];
+}>();
+const { getSlotContent } = useCmsBlock(props.block);
+const video: Schemas['CmsSlot'] = getSlotContent('video');
+</script>
+
+<template>
+    <CmsLoader :content="video" />
+</template>
\ No newline at end of file
diff --git a/components/cms/element/CmsElementYoutubeVideo.vue b/components/cms/element/CmsElementYoutubeVideo.vue
new file mode 100644
index 0000000..f854242
--- /dev/null
+++ b/components/cms/element/CmsElementYoutubeVideo.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { CmsElementVimeoVideo } from '@shopware-pwa/composables-next';
+
+const props = defineProps<{
+    element: CmsElementVimeoVideo;
+}>();
+
+const youtubeVideo = ref(null);
+
+const videoId = props.element.config.videoID.value
+const videoUrl = computed(() => `https://www.youtube.com/embed/${videoId}`)
+</script>
+
+<template>
+    <div ref="youtubeVideo" class="my-0 mx-auto">
+        <div class="youtube-player h-full w-full relative ">
+            <iframe
+                :src="videoUrl"
+                frameborder="0"
+                class="w-full h-full absolute top-0 left-0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
+                allowfullscreen
+            ></iframe>
+        </div>
+    </div>
+</template>
+<style scoped>
+.youtube-player{
+    padding-bottom: 56.25%;
+}
+</style>