feat(theme): Add footer for bottom part of our page (#200)

* feat(theme): Use SfFotter component for bottom part of our page
vuestorefront · Dec 11, 2019 · 64df9ec · 64df9ec · github-actions · Dec 11, 2019
1 parent 16d8166
commit 64df9ec
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/packages/default-theme/components/cms/elements/SwFooter.vue b/packages/default-theme/components/cms/elements/SwFooter.vue
@@ -0,0 +1,37 @@
+<template>
+ <div class="sw-footer">
+ <slot class="sw-footer__content" name="content" v-bind="column">
+ <SfFooter :column="column" :multiple="true">
+ <div class="content sw-footer__signature">from Vue Storefront with ❤️ </div>
+ </SfFooter>
+ </slot>
+ </div>
+</template>
+
+<script>
+import { SfFooter } from '@storefront-ui/vue'
+
+export default {
+ components: {
+ SfFooter
+ },
+ name: 'SwFooter',
+ props: {
+ column: {
+ type: Number,
+ default: 4
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+ @import "~@storefront-ui/vue/styles.scss";
+
+.sw-footer{
+ &__signature {
+ width: 100%;
+ text-align: center;
+ }
+}
+</style>
diff --git a/packages/default-theme/layouts/default.vue b/packages/default-theme/layouts/default.vue
@@ -10,11 +10,14 @@
  class="sw-breadcrumbs"/>
  <nuxt />
  <SwCart :is-open="isCartOpen" @close="isCartOpen=false" />
+ <SwFooter />
  </div>
 </template>
+
 <script>
 import TopNavigation from "../components/TopNavigation";
 import SwCart from "../components/SwCart";
+import SwFooter from "../components/cms/elements/SwFooter";
 import { SfBreadcrumbs } from "@storefront-ui/vue";
 import { useCart } from "@shopware-pwa/composables";
 import { ref } from "@vue/composition-api";
@@ -23,7 +26,8 @@ export default {
  components: {
  TopNavigation,
  SfBreadcrumbs,
- SwCart
+ SwCart,
+ SwFooter
  },
  setup() {
  const {count} = useCart()