Merge branch 'all'

layers/templates/GrGallery01/index.vue

@@ -12,6 +12,9 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const { locale } = useI18n()
+const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
+
 const slideThumbnailRef = ref<any>(null)
 const playingSlideIndex = ref<number | null>(null)
 
@@ -61,6 +64,14 @@ const stopVideo = () => {
   playingSlideIndex.value = null
 }
 
+const onArrowClick = (direction, targetIndex) => {
+  const logTraking =
+    direction == 'prev'
+      ? getComponentGroupAry(props.components, 'arrow')?.groups[0]
+      : getComponentGroupAry(props.components, 'arrow')?.groups[1]
+  sendLog(locale.value, useAnalyticsLogDataDirect(logTraking, 1))
+}
+
 onMounted(() => {
   nextTick(() => {
     const mainInst = slideThumbnailRef.value?.mainInst
@@ -86,6 +97,7 @@ onMounted(() => {
         variant="media"
         :drag="false"
         class="mt-[24px] md:mt-[32px]"
+        @arrow-click="onArrowClick"
       >
         <SplideSlide
           v-for="(item, index) in slideData"

layers/templates/GrGallery02/index.vue

@@ -54,6 +54,15 @@ const handleChange = (
     'buttonList'
   )
 }
+const { locale } = useI18n()
+const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
+const onArrowClick = (direction, targetIndex) => {
+  const logTraking =
+    direction == 'prev'
+      ? getComponentGroupAry(props.components, 'arrow')?.groups[0]
+      : getComponentGroupAry(props.components, 'arrow')?.groups[1]
+  sendLog(locale.value, useAnalyticsLogDataDirect(logTraking, 1))
+}
 </script>
 
 <template>
@@ -72,11 +81,13 @@ const handleChange = (
         :pagination="false"
         class="mt-[24px] md:mt-[48px]"
         @move="handleChange"
+        @arrow-click="onArrowClick"
       >
         <SplideSlide v-for="(item, index) in slideData" :key="index">
           <div class="slide-inner border-line mt-auto">
             <BlocksVisualContent
               :resources-data="getComponentGroup(item, 'imgList')"
+              :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
               object-fit="cover"
               :alt="getComponentGroup(item, 'subTitle')?.display?.text"
             />
@@ -86,6 +97,7 @@ const handleChange = (
       <WidgetsButtonList
         v-if="buttonListData"
         :resources-data="buttonListData"
+        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
         class="mt-[40px] md:mt-[56px]"
       />
     </div>

layers/templates/GrGallery03/index.vue

@@ -102,6 +102,7 @@ const handleChange = (
       <WidgetsButtonList
         v-if="buttonListData"
         :resources-data="buttonListData"
+        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
         class="mt-[32px]"
       />
     </div>

layers/templates/GrVisual01/index.vue

@@ -44,17 +44,22 @@ const buttonListData = computed(() =>
         :resources-data="descriptionData"
         class="w-full max-w-[355px] md:max-w-[944px]"
       />
-      <WidgetsVideoPlay
-        v-if="videoPlayData"
-        :resources-data="videoPlayData"
-        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
-      />
-      <WidgetsButtonList
-        v-if="buttonListData.length > 0"
-        :resources-data="buttonListData"
-        button-type="market"
-        class="mt-[22px] md:mt-[52px]"
-      />
+      <client-only>
+        <WidgetsVideoPlay
+          v-if="videoPlayData"
+          :resources-data="videoPlayData"
+          :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
+        />
+      </client-only>
+      <client-only>
+        <WidgetsButtonList
+          v-if="buttonListData.length > 0"
+          :resources-data="buttonListData"
+          :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
+          button-type="market"
+          class="mt-[22px] md:mt-[52px]"
+        />
+      </client-only>
     </div>
   </section>
 </template>

layers/templates/GrVisual02/index.vue

@@ -99,6 +99,7 @@ const slideItemSize = {
       <WidgetsButtonList
         v-if="buttonListData.length > 0"
         :resources-data="buttonListData"
+        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
         class="mt-[48px] md:mt-[72px]"
       />
       <BlocksSlideCenterHighlight

layers/templates/GrVisual03/index.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { SplideSlide } from '@splidejs/vue-splide'
 import {
-  hasComponentGroup,
-  getComponentGroup,
+  getComponentContainer,
   getComponentGroupAry,
+  getComponentGroup,
+  hasComponentGroup,
 } from '#layers/utils/dataUtil'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
@@ -12,11 +13,23 @@ interface Props {
   pageVerTmplSeq: string
 }
 
+const { locale } = useI18n()
+
 const props = defineProps<Props>()
 
+const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
+
 const slideData = computed(() => {
   return getComponentContainer(props.components, 'group_sets')
 })
+
+const onArrowClick = direction => {
+  const logTraking =
+    direction == 'prev'
+      ? getComponentGroupAry(props.components, 'arrow')?.groups[0]
+      : getComponentGroupAry(props.components, 'arrow')?.groups[1]
+  sendLog(locale.value, useAnalyticsLogDataDirect(logTraking, 1))
+}
 </script>
 
 <template>
@@ -26,6 +39,7 @@ const slideData = computed(() => {
       :arrows="true"
       :pagination="true"
       class="h-full"
+      @arrow-click="onArrowClick"
     >
       <SplideSlide v-for="(item, index) in slideData" :key="index">
         <WidgetsBackground
@@ -51,6 +65,7 @@ const slideData = computed(() => {
           <WidgetsButtonList
             v-if="hasComponentGroup(item, 'buttonList')"
             :resources-data="getComponentGroupAry(item, 'buttonList')"
+            :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
             class="mt-[28px] md:mt-[52px]"
           />
         </div>