changes

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "vue": "^3.2.47",
+        "vue-gtag": "^2.0.1",
         "vue-i18n": "^9.2.2",
         "vue-mobile-detection": "^2.0.1",
         "vue-router": "^4.2.2",
@@ -973,6 +974,14 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "node_modules/vue-gtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue-gtag/-/vue-gtag-2.0.1.tgz",
+      "integrity": "sha512-aM4A58FVL0wV2ptYi+xzAjeg+pQVRyUcfBc5UkXAwQrR4t3WBhor50Izp2I+3Oo7+l+vWJ7u78DGcNzReb8S/A==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-i18n": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
@@ -1593,6 +1602,12 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "vue-gtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue-gtag/-/vue-gtag-2.0.1.tgz",
+      "integrity": "sha512-aM4A58FVL0wV2ptYi+xzAjeg+pQVRyUcfBc5UkXAwQrR4t3WBhor50Izp2I+3Oo7+l+vWJ7u78DGcNzReb8S/A==",
+      "requires": {}
+    },
     "vue-i18n": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "vue": "^3.2.47",
+    "vue-gtag": "^2.0.1",
     "vue-i18n": "^9.2.2",
     "vue-mobile-detection": "^2.0.1",
     "vue-router": "^4.2.2",

src/App.vue

@@ -1,5 +1,6 @@
 <script>
   import Footer from './components/Footer.vue';
+  import GdprConsent from './components/GdprConsent.vue';
   import Menu from './components/Menu.vue';
 
   const pagesWithCarousel = [
@@ -14,7 +15,7 @@
         width: window.innerWidth
       }
     },
-    components: { Footer, Menu },
+    components: { Footer, Menu, GdprConsent },
     created() {
       window.addEventListener('scroll', this.handleScroll);
     },
@@ -52,6 +53,7 @@
       <RouterView />
     </div>
     <Footer></Footer>
+    <gdpr-consent></gdpr-consent>
   </div>
 </template>
 
@@ -64,7 +66,7 @@
     color: #121212;
     width: 150px;
     height: 30px;
-    z-index: 200550;
+    z-index: 12;
     border-bottom-right-radius: 10px;
     padding: 4px;
     opacity: 0.5;

src/components/GdprConsent.vue

@@ -0,0 +1,121 @@
+<template>
+  <div v-if="!hideGdpr" class="gdpr-overlay">
+    <section class="gdpr-container">
+      <div class="gdpr-content">
+        <div class="gdpr-text">{{ $t('gdpr.text') }} <a href="https://tayronafoods.myshopify.com/pages/gdpr-privacy-policy">{{ $t('gdpr.policy') }}</a></div>
+        <div class="gdpr-buttons">
+          <button class="secondary" @click="closeGdpr">{{ $t('gdpr.reject')}}</button>
+          <button @click="enableGdpr">{{ $t('gdpr.accept')}}</button>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import { bootstrap, setOptions } from 'vue-gtag';
+
+export default {
+  data() {
+    return {
+      hideGdpr: false,
+    };
+  },
+  methods: {
+    async enableGdpr() {
+      setOptions({
+        config: { id: 'G-WSGLW74RC1',  },
+      });
+      const gtag = await bootstrap();
+      this.closeGdpr();
+    },
+    closeGdpr() {
+      this.hideGdpr = true;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .gdpr {
+    &-overlay {
+      position: fixed;
+      top:0;
+      right:0;
+      bottom: 0;
+      left: 0;
+      z-index: 20;
+      background-color: rgba(255, 255, 255, 0.3);
+      width: 100%;
+    }
+
+    &-container {
+      position: relative;
+      left: 0;
+      width: 700px;
+      z-index: 21;
+      margin: 0 auto;
+      background-color: #fff;
+      box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
+      border-radius: 6px;
+    }
+
+    &-content {
+      background-color: #fefefe;
+      color: #121212;
+      width: 100%;
+      margin: 0 auto;
+      padding: 16px 32px;
+      height: auto;
+      display: grid;
+      
+      align-items: center;
+      justify-items: center;
+      font-size: 14px;
+      gap: 20px;
+      border-radius: 6px;
+    }
+
+    &-buttons {
+      display: flex;
+      gap: 16px;
+    }
+  }
+
+  @media only screen and (min-width: 961px) {
+    .gdpr {
+      &-container {
+        top:30%;  
+      }
+
+      &-content {
+        grid-template-columns: 4fr auto;
+      }
+    }
+  }
+
+  // @media only screen and (max-width: 960px) {
+
+  // }
+
+  @media only screen and (max-width: 767px) {
+    .gdpr {
+      &-container {
+        position: absolute;
+        bottom: 0;
+        border-radius: 0;
+        width: 100%;
+      }
+
+      &-content {
+        grid-template-rows: 1fr;
+      }
+
+      &-buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+    }
+  }
+</style>

src/components/Menu.vue

@@ -73,7 +73,7 @@ export default {
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 1000;
+    z-index: 10;
     width: 100%;
 
     nav {

src/i18n/de.js

@@ -186,7 +186,12 @@ export default {
     paragraph7: '+49(0)176 321 368 59',
     paragraph8: '+49(0)152 549 389 62',
     paragraph9: 'Redes Sociales',
-    paragraph10: 'Instagram'
-    
+    paragraph10: 'Instagram',    
   },
+  gdpr: {
+    text: 'Diese Website verwendet Cookies, um Ihnen das beste Erlebnis auf unserer Website zu gewährleisten.',
+    accept: 'Akzeptieren',
+    reject: 'Ablehnen',
+    policy: 'Datenschutzrichtlinie',
+  }
 }

src/i18n/en.js

@@ -192,5 +192,11 @@ export default {
     paragraph10: 'Instagram'
     
   },
+  gdpr: {
+    text: 'This website uses cookies to ensure you the best experience on our website.',
+    accept: 'Accept',
+    reject: 'Reject',
+    policy: 'Privacy Policy',
+  }
 }   
 

src/i18n/es.js

@@ -191,4 +191,10 @@ export default {
     paragraph10: 'Instagram'
     
   },
+  gdpr: {
+    text: 'Este sitio web utiliza cookies para garantizarle la mejor experiencia en nuestro sitio web.',
+    accept: 'Aceptar',
+    reject: 'Rechazar',
+    policy: 'Política de Privacidad',
+  }
 }

src/i18n/i18n.js

@@ -4,7 +4,7 @@ import en from "./en";
 import de from "./de";
 
 const i18n = createI18n({
-  locale: 'es',
+  locale: navigator.language.split('-')[0] || 'de',
   fallbackLocale: 'es',
   messages: {
     es,

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import router from './router/router';
 import i18n from './i18n/i18n';
 import VueMobileDetection from 'vue-mobile-detection';
+import VueGtag from "vue-gtag";
 
 import './style.css'
 import App from './App.vue'
@@ -13,5 +14,8 @@ app.use(router);
 app.use(VueMobileDetection);
 app.use(i18n);
 app.use(helper);
+app.use(VueGtag, {
+  bootstrap: false,
+})
 
 app.mount('#app');

src/style.css

@@ -41,6 +41,21 @@ body {
   background-color: #121212
 }
 
+button {
+  background-color: #ffcd00;
+  border: 0;
+  color: #fff;
+  padding: 8px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+button.secondary {
+  background-color: #fff;
+  color: #ffcd00;
+}
+
 .main-container {
   width: 960px;
   margin: 0 auto;;

src/views/social/Social.vue

@@ -7,7 +7,7 @@
   </section>
   <section class="social-bottom content">
     <img src="@images/proyect-soc-new.jpg">
-    <p>Creemos en el poder {{ $t('social.paragraph3') }}<br><br>{{ $t('social.paragraph4') }}</p>
+    <p>{{ $t('social.paragraph3') }}<br><br>{{ $t('social.paragraph4') }}</p>
   </section>
 </template>