diff --git a/client/src/components/others/CategoryAndProducts.vue b/client/src/components/others/CategoryAndProducts.vue
index 7eab38c..ab5fad8 100644
--- a/client/src/components/others/CategoryAndProducts.vue
+++ b/client/src/components/others/CategoryAndProducts.vue
@@ -2,7 +2,12 @@
- {{ category.name }}
+
+ {{ category.name }}
+
diff --git a/client/src/components/routes/Search.vue b/client/src/components/routes/Search.vue
index 2f43315..2d43f99 100644
--- a/client/src/components/routes/Search.vue
+++ b/client/src/components/routes/Search.vue
@@ -20,6 +20,19 @@
@click="goBack()"
/>
{{ selectedSubCategory ? selectedSubCategory.name : selectedTopCategory.name }}
+
+
+
+
@@ -28,7 +41,7 @@
class="other-items"
>
@@ -115,6 +128,7 @@
v-for="category in finalCategories"
:key="category.id"
:category="category"
+ :show-header="finalCategories.length !== 1"
/>
@@ -138,12 +152,16 @@ export default {
selectedSubCategory: null,
finalCategories: [],
suggestions: [],
- searchResults: []
+ searchResults: [],
+ subCategoryTabIndex: 0
}
},
computed: {
loggedIn () {
return this.$store.state.authKey;
+ },
+ subListCategories () {
+ return this.selectedSubCategory && this.selectedSubCategory.items && this.selectedSubCategory.items.length ? this.selectedSubCategory.items.filter(x => x.type === "CATEGORY") : [];
}
},
watch: {
@@ -167,6 +185,9 @@ export default {
});
}
},
+ created () {
+ window.addEventListener('scroll', this.handleScroll);
+ },
mounted () {
if (this.$route.params.query) {
this.selectSuggestion(this.$route.params.query);
@@ -174,6 +195,9 @@ export default {
this.getCategories();
},
+ destroyed () {
+ window.removeEventListener('scroll', this.handleScroll);
+ },
methods: {
getCategories () {
ApiService.getCategories().then(res => {
@@ -227,12 +251,48 @@ export default {
this.selectedTopCategory = null;
this.$router.push({ name: 'Search' });
}
+ },
+ jumpToCategory (id) {
+ window.scrollTo({top: document.getElementById(id).getBoundingClientRect().top + window.pageYOffset + -120, behavior: 'smooth'});
+ },
+ handleScroll () {
+ let currentCategory = null;
+
+ for (let category of this.subListCategories) {
+ var elementRelativeToViewport = document.getElementById(category.id).getBoundingClientRect().y;
+
+ if (elementRelativeToViewport > 0 && elementRelativeToViewport < window.innerHeight / 2) {
+ currentCategory = category;
+ break;
+ }
+ }
+
+ if (currentCategory) {
+ this.subCategoryTabIndex = this.subListCategories.indexOf(currentCategory);
+ }
}
}
}