feat: add home path in breadcrumb

packages/default-theme/components/SwCurrencySwitcher.vue

@@ -9,8 +9,8 @@
       v-model="activeCurrency"
       :size="availableCurrencies.length"
       class="sw-currency__select sf-select--no-chevron"
-      @click="loadAvailableCurrencies"
       data-cy="currency-switcher-select"
+      @click="loadAvailableCurrencies"
     >
       <SfSelectOption
         v-for="currencyItem in availableCurrencies"
@@ -24,15 +24,17 @@
   </div>
 </template>
 <script>
-import { SfSelect, SfProductOption } from "@storefront-ui/vue"
+import { SfSelect } from "@storefront-ui/vue"
 import { useCurrency } from "@shopware-pwa/composables"
 import { computed, onMounted } from "@vue/composition-api"
 
 export default {
   name: "SwCurrencySwitcher",
+
   components: {
     SfSelect,
   },
+
   setup(props, { root }) {
     const {
       currency,
@@ -63,6 +65,7 @@ export default {
   },
 }
 </script>
+
 <style lang="scss" scoped>
 @import "@/assets/scss/variables";
 
@@ -72,6 +75,9 @@ export default {
   --select-selected-padding: 0 var(--spacer-xs);
   --select-selected-justify-content: center;
   text-align: center;
-  cursor: pointer;
+
+  .sf-select {
+    cursor: pointer;
+  }
 }
 </style>

packages/default-theme/components/SwHeader.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="sw-top-navigation" data-cy="main-header">
     <SfOverlay :visible="isOpen" class="sw-overlay" />
+
     <SwTopBar />
+
     <SfHeader
       :title="$t('page.title')"
       class="sw-header"
@@ -54,6 +56,15 @@ export default {
 }
 </script>
 
+<style lang="scss">
+.sf-header__wrapper {
+  header {
+    box-sizing: border-box;
+    max-width: 1320px;
+  }
+}
+</style>
+
 <style lang="scss" scoped>
 @import "@/assets/scss/variables";
 
@@ -79,12 +90,15 @@ export default {
     }
   }
 }
+
 .sw-header {
   z-index: 2;
   background-color: #fff;
+
   &__icons {
     display: flex;
   }
+
   &__icon {
     cursor: pointer;
   }

packages/default-theme/components/SwLanguageSwitcher.vue

@@ -4,8 +4,8 @@
       :selected="currentLocale"
       :size="availableLanguages.length"
       class="sw-language-switcher__select sf-select--no-chevron"
-      @change="changeLocale"
       data-cy="language-switcher-select"
+      @change="changeLocale"
     >
       <SfSelectOption
         v-for="language in availableLanguages"
@@ -19,16 +19,16 @@
   </div>
 </template>
 <script>
-import { SfSelect, SfProductOption } from "@storefront-ui/vue"
-import { computed, onMounted, ref } from "@vue/composition-api"
-import languagesMap from "sw-plugins/languages"
+import { SfSelect } from "@storefront-ui/vue"
 import { useLocales } from "@shopware-pwa/default-theme/logic/useLocales"
 
 export default {
   name: "SwLanguageSwitcher",
+
   components: {
     SfSelect,
   },
+
   setup(props, { root }) {
     const { availableLanguages, currentLocale, changeLocale } = useLocales(root)
     return {
@@ -48,6 +48,9 @@ export default {
   --select-selected-padding: 0 var(--spacer-xs);
   --select-selected-justify-content: center;
   text-align: center;
-  cursor: pointer;
+
+  .sf-select {
+    cursor: pointer;
+  }
 }
 </style>

packages/default-theme/components/SwTopBar.vue

@@ -21,13 +21,22 @@ export default {
 }
 </script>
 
+<style lang="scss">
+.sf-top-bar__container {
+  box-sizing: border-box;
+  margin: 0 auto;
+  max-width: 1320px;
+  padding: 0 1rem;
+}
+</style>
+
 <style lang="scss" scoped>
 @import "@/assets/scss/variables";
 
 .sw-top-bar {
-  padding: 0 var(--spacer-sm);
   position: relative;
   z-index: 3;
+
   &__location-label {
     margin: 0 var(--spacer-sm) 0 0;
   }

packages/default-theme/layouts/default.vue

@@ -1,16 +1,20 @@
 <template>
   <div class="layout">
     <SwPluginSlot name="page-top" />
+
     <SwHeader />
+
     <SwPluginSlot name="top-header-after" />
-    <SwPluginSlot name="breadcrumbs" :slotContext="getBreadcrumbs">
+
+    <SwPluginSlot name="breadcrumbs" :slot-context="getBreadcrumbs">
       <SfBreadcrumbs
         v-show="getBreadcrumbs.length > 0"
         :breadcrumbs="getBreadcrumbs"
         class="sw-breadcrumbs layout__sized"
         @click="redirectTo"
       />
     </SwPluginSlot>
+
     <nuxt />
     <SwCart v-if="isSidebarOpen" />
     <SwPluginSlot name="footer-before" />
@@ -46,6 +50,7 @@ export default {
     SwPluginSlot,
     SwLoginModal,
   },
+
   setup(props, { root }) {
     const { getBreadcrumbsObject } = useCms(root)
     const { isOpen: isSidebarOpen } = useUIState(root, "CART_SIDEBAR_STATE")
@@ -63,22 +68,38 @@ export default {
       }
     })
 
-    const getBreadcrumbs = computed(() =>
-      Object.values(getBreadcrumbsObject.value).map((breadcrumb) => ({
-        text: breadcrumb.name,
-        link: root.$i18n.path(breadcrumb.path),
-        route: {
+    const getBreadcrumbs = computed(() => {
+      const breadcrumbs = Object.values(getBreadcrumbsObject.value).map(
+        (breadcrumb) => ({
+          text: breadcrumb.name,
           link: root.$i18n.path(breadcrumb.path),
-        },
-      }))
-    )
+          route: {
+            link: root.$i18n.path(breadcrumb.path),
+          },
+        })
+      )
+
+      if (breadcrumbs.length > 0) {
+        breadcrumbs.unshift({
+          text: "Home",
+          link: root.$i18n.path("/"),
+          route: {
+            link: root.$i18n.path("/"),
+          },
+        })
+      }
+
+      return breadcrumbs
+    })
+
     return {
       getBreadcrumbs,
       isSidebarOpen: loadSidebarComponent,
       isLoginModalOpen,
       switchLoginModalState,
     }
   },
+
   methods: {
     redirectTo(route) {
       return this.$router.push(this.$i18n.path(route.link))
@@ -116,6 +137,7 @@ export default {
 }
 
 .sw-breadcrumbs {
-  padding: 0 var(--spacer-xl) var(--spacer-base) var(--spacer-xl);
+  box-sizing: border-box;
+  padding: 1rem;
 }
 </style>

packages/default-theme/pages/_lang/account.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="my-account" :key="$route.fullPath">
+  <div :key="$route.fullPath" class="my-account">
     <SfContentPages
       :title="$t('My account')"
       :active="activePage"
@@ -25,8 +25,9 @@
     </SfContentPages>
   </div>
 </template>
+
 <script>
-import { computed, onBeforeMount } from "@vue/composition-api"
+import { computed } from "@vue/composition-api"
 import { SfContentPages, SfTabs } from "@storefront-ui/vue"
 import { useUser } from "@shopware-pwa/composables"
 import { PAGE_LOGIN } from "@shopware-pwa/default-theme/helpers/pages"
@@ -35,22 +36,27 @@ import authMiddleware from "@shopware-pwa/default-theme/middleware/auth"
 
 export default {
   name: "AccountPage",
+
   components: {
     SfContentPages,
     SfTabs,
   },
+
   middleware: authMiddleware,
+
   setup(props, { root }) {
     const { logout, user, loadOrders, orders } = useUser(root)
     const ordersCount = computed(() => user.value && user.value.orderCount)
     return { logout, user, loadOrders, orders, ordersCount }
   },
+
   data() {
     return {
       activePage: "My profile",
       allAddresses: [],
     }
   },
+
   computed: {
     activeBillingAddress() {
       return (this.user && this.user && this.user.activeBillingAddress) || {}
@@ -59,16 +65,19 @@ export default {
       return (this.user && this.user && this.user.activeShippingAddress) || {}
     },
   },
-  mounted() {
-    this.updateActivePage(this.activePage)
-  },
+
   watch: {
     $route(to, from) {
       if (to.name === "account-profile") {
         this.activePage = "My profile"
       }
     },
   },
+
+  mounted() {
+    this.updateActivePage(this.activePage)
+  },
+
   methods: {
     async updateActivePage(title) {
       switch (title) {
@@ -91,12 +100,13 @@ export default {
   },
 }
 </script>
+
 <style lang="scss" scoped>
 @import "@/assets/scss/variables";
 
 .my-account {
   @include for-desktop {
-    max-width: 1272px;
+    max-width: 1320px;
     margin: 0 auto;
     padding: 0 var(--spacer-sm);
   }