feat(default-theme): added searchbar on mobile devices

packages/default-theme/components/SwHeader.vue

@@ -8,7 +8,7 @@
 
  <SfHeader
  :title="$t('page.title')"
- class="sw-header"
+ class="sw-header sf-header--has-mobile-search"
  :has-mobile-search="false"
  :is-sticky="false"
  >

packages/default-theme/components/SwSearchBar.vue

@@ -1,15 +1,17 @@
 <template>
  <div class="sw-search-bar">
  <SfSearchBar
+ v-model="typingQuery"
  :placeholder="$t('Search for products')"
  :aria-label="$t('Search for products')"
- class="sf-header__search desktop-only"
- v-model="typingQuery"
+ class="sf-header__search"
+ data-cy="search-bar"
  @enter="performSearch"
  @focus="isSuggestBoxOpen = true"
- data-cy="search-bar"
  />
+
  <SwSuggestSearch
+ v-if="!isMobile"
  :products="getProducts"
  :total-found="getTotal"
  :search-phrase="typingQuery"
@@ -21,12 +23,16 @@
 </template>
 
 <script>
-import { ref, reactive, onMounted, watch, computed } from "@vue/composition-api"
+import { ref, reactive, onMounted, computed } from "@vue/composition-api"
 import { getSearchPageUrl } from "@/helpers"
 import { SfSearchBar } from "@storefront-ui/vue"
 import { useProductQuickSearch } from "@shopware-pwa/composables"
+import {
+ mapMobileObserver,
+ unMapMobileObserver,
+} from "@storefront-ui/vue/src/utilities/mobile-observer"
 import { debounce } from "@shopware-pwa/helpers"
-import SwSuggestSearch from "@/components/SwSuggestSearch"
+const SwSuggestSearch = () => import("@/components/SwSuggestSearch")
 
 export default {
  components: {
@@ -51,29 +57,37 @@ export default {
  }
  }, 300)
 
- watch(typingQuery, () => {
- performSuggestSearch(typingQuery.value)
- })
-
  return {
  getProducts,
  getTotal,
  isSuggestBoxOpen,
  typingQuery,
+ performSuggestSearch,
  }
  },
+ computed: {
+ ...mapMobileObserver(),
+ },
+ watch: {
+ $route(to, from) {
+ this.isSuggestBoxOpen = false
+ },
+ typingQuery(value) {
+ if (!this.isMobile) {
+ this.performSuggestSearch(value)
+ }
+ },
+ },
+ beforeDestroy() {
+ unMapMobileObserver()
+ },
  methods: {
  performSearch() {
  if (this.typingQuery.length > 0) {
  this.$router.push(this.$i18n.path(getSearchPageUrl(this.typingQuery)))
  }
  },
  },
- watch: {
- $route(to, from) {
- this.isSuggestBoxOpen = false
- },
- },
 }
 </script>