feat(default-theme): added cookie bar (#1102)

packages/default-theme/components/SwHeader.vue

@@ -2,6 +2,8 @@
  <div class="sw-top-navigation" data-cy="main-header">
  <SfOverlay :visible="isOpen" class="sw-overlay" />
 
+ <SwCookieBar />
+
  <SwTopBar />
 
  <SfHeader
@@ -36,6 +38,8 @@ import SwHeaderIcons from "@shopware-pwa/default-theme/components/SwHeaderIcons"
 import SwTopNavigation from "@shopware-pwa/default-theme/components/SwTopNavigation"
 import SwSearchBar from "@shopware-pwa/default-theme/components/SwSearchBar"
 
+import SwCookieBar from "@shopware-pwa/default-theme/components/gdpr/SwCookieBar"
+
 export default {
  components: {
  SfHeader,
@@ -45,6 +49,7 @@ export default {
  SwHeaderIcons,
  SwTopNavigation,
  SwSearchBar,
+ SwCookieBar,
  },
  setup(props, { root }) {
  const { isOpen } = useUIState(root, "MEGA_MENU_OVERLAY_STATE")

packages/default-theme/components/gdpr/SwCookieBar.vue

@@ -0,0 +1,69 @@
+<template>
+ <SfTopBar v-if="displayCookieBar" class="sw-cookie-bar" data-cy="cookie-bar">
+ <template #left>
+ <div class="cookie-info">
+ <SwCookieBarContent />
+ </div>
+ </template>
+ <template #right>
+ <SwButton class="btton" data-cy="accept-cookies" @click="acceptCookies">
+ Got it!
+ </SwButton>
+ </template>
+ </SfTopBar>
+</template>
+
+<script>
+import { SfTopBar } from "@storefront-ui/vue"
+import SwButton from "@/components/atoms/SwButton"
+const SwCookieBarContent = () => import("@/components/gdpr/SwCookieBarContent")
+
+export default {
+ name: "SwCookieBar",
+ components: {
+ SfTopBar,
+ SwButton,
+ SwCookieBarContent,
+ },
+ data() {
+ return {
+ displayCookieBar: false,
+ }
+ },
+ mounted() {
+ const res = localStorage.getItem("gdpr-cookie-notification-accepted")
+ if (res !== "true") {
+ this.displayCookieBar = true
+ }
+ },
+
+ methods: {
+ acceptCookies() {
+ localStorage.setItem("gdpr-cookie-notification-accepted", true)
+ this.displayCookieBar = false
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/variables";
+
+.sw-cookie-bar ::v-deep.sf-top-bar__container {
+ height: auto;
+}
+
+.sw-cookie-bar {
+ --top-bar-background: var(--c-black-lighten);
+
+ box-sizing: border-box;
+ color: var(--c-white);
+ width: 100%;
+
+ .btton {
+ height: 40px;
+ transition: color 0.33s;
+ margin-left: var(--spacer-base);
+ }
+}
+</style>

packages/default-theme/components/gdpr/SwCookieBarContent.vue

@@ -0,0 +1,31 @@
+<template>
+ <div class="cookie-description">
+ <p>
+ This site uses cookies. Read our cookies policy.
+
+ <!-- <SfLink class="link" :link="$i18n.path()">
+ cookies policy.
+ </SfLink> -->
+ </p>
+ </div>
+</template>
+
+<script>
+import { SfLink } from "@storefront-ui/vue"
+export default {
+ name: "SwCookieBarDescription",
+ components: { SfLink },
+}
+</script>
+
+<style lang="scss" scoped>
+.cookie-description {
+ padding: var(--spacer-xs) 0;
+
+ .link {
+ margin-left: var(--spacer-xs);
+ font-size: var(--font-xs);
+ color: var(--c-white);
+ }
+}
+</style>