added search feature

components/productList.vue

@@ -1,7 +1,7 @@
 <template>
  <div class="products-list bg-white mb-3">
  <div v-if="Array.isArray(items)===false" class="d-flex flex-wrap">
- <ul class="d-flex flex-wrap mt-1 m-0 list-unstyled">
+ <ul class="d-flex w-100 flex-wrap mt-1 m-0 list-unstyled">
  <template v-for="(item,key) in items">
  <li v-for="i in item" :key="i.name" class="products-list_item">
  <div
@@ -36,7 +36,7 @@
  </ul>
  </div>
  <div v-else>
- <ul class="d-flex flex-wrap align-items-between mt-1 list-unstyled m-0">
+ <ul class="d-flex w-100 flex-wrap align-items-between mt-1 list-unstyled m-0">
  <li v-for="i in items" :key="i.name" class="products-list_item">
  <div
  class="position-relative d-flex flex-column justify-content-between"

components/shared/appHeader.vue

@@ -1,22 +1,24 @@
 <template>
  <header class="header mb-2">
  <b-navbar toggleable="md" type="light" variant="white" class="py-0">
- <b-navbar-brand href="#" class="ms-4">
- <div class="d-flex justify-content-center">
+ <b-navbar-brand class="ms-4">
+ <nuxt-link to="/" class="d-flex justify-content-center link-dark text-decoration-none">
  <NuxtLogo />
  &nbsp;
  <span> E-Shop</span>
- </div>
+ </nuxt-link>
  </b-navbar-brand>
  <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 
  <b-collapse id="nav-collapse" is-nav>
  <b-input-group class="w-50 mx-lg-auto mt-1 mt-lg-0">
- <b-form-input placeholder="Search"></b-form-input>
+ <input type="text" class="form-control bg-light" placeholder="Search" :value="searchValue" @change="changeSearchValue" @keyup.enter="$router.push({name:'Products-category-All',query:{search:searchValue}})" />
  <b-input-group-append>
- <b-button variant="outline-success"
- ><b-icon icon="search"></b-icon
- ></b-button>
+ <nuxt-link :to="{name:'Products-category-All',query:{search:searchValue}}">
+ <b-button variant="outline-success"
+ ><b-icon icon="search"></b-icon
+ ></b-button>
+ </nuxt-link>
  </b-input-group-append>
  </b-input-group>
  <!-- Right aligned nav items -->
@@ -236,12 +238,20 @@ import { mapGetters } from 'vuex'
 export default {
  data() {
  return {
+ test:"test"
  }
  },
  mounted() {
  var cartJSON = localStorage.getItem("shoppingCart");
  this.$store.commit('Cart/updateAfterRefresh',cartJSON);
  },
+ watch:{
+ '$route.query'(){
+ if(this.$route.query.search===undefined){
+ this.$store.commit('removeSearchValue');
+ }
+ }
+ },
  methods: {
  hideModal(id) {
  this.$bvModal.hide(id);
@@ -285,11 +295,15 @@ export default {
  position:"top"
  })
  }
+ },
+ changeSearchValue(e){
+ this.$store.commit('changeSearchValue',e.target.value);
  }
  },
  computed:{
  ...mapGetters("Cart",["getItems"]),
  ...mapGetters("Cart",["getTotal"]),
+ ...mapGetters(["searchValue"]),
  count(){
  return this.$store.state.Cart.count;
  }

nuxt.config.js

@@ -39,10 +39,6 @@ export default {
 
  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
- // axios is required by @nuxtjs/auth
- '@nuxtjs/axios',
- // https://auth.nuxtjs.org
- '@nuxtjs/auth'
  ],
 
  // Modules: https://go.nuxtjs.dev/config-modules

pages/Products/category.vue

@@ -4,6 +4,7 @@
  <div class="col-2">
  <asideLayout>
  <div slot="beforeDivider">
+ <item name="All products" route="All" />
  <collapseItem name="Products" :visible=true id="collapse-1" :items="allCategories" />
  </div>
  <div slot="afterDivider">

pages/Products/category/All.vue

@@ -0,0 +1,56 @@
+<template>
+ <div>
+ <productList :items="searched ? filteredBySearch:products" />
+ <div v-if="Object.keys(filteredBySearch).length === 0" class="alert alert-warning">
+ Nothing found
+ </div>
+ </div>
+</template>
+<script>
+import productList from "@/components/productList.vue";
+export default {
+ data() {
+ return {
+ };
+ },
+ components: {
+ productList,
+ },
+ watchQuery: true,
+ asyncData({ store,query }) {
+ const products = {};
+ const allCategories={
+ Digital:store.state.Digital.Products,
+ Fashion:store.state.Fashion.Products,
+ Beauty:store.state.Beauty.Products,
+ House:store.state.House.Products
+ };
+ for (let key in allCategories) {
+ pushToProducts(allCategories[key]);
+ }
+ function pushToProducts(Product) {
+ for (let key in Product) {
+ products[key] = Product[key];
+ } 
+ }
+
+ const filteredBySearch={}
+ let searched=false
+ if(query.search){
+ searched=true
+ for (let key in products) {
+ const filtered=products[key].filter(item=>item.name.toLowerCase().includes(query.search.toLowerCase()));
+ if(filtered.length>0){
+ filteredBySearch[key]=filtered
+ }
+ }
+ store.commit('changeSearchValue',query.search);
+ }
+ return {
+ products,
+ filteredBySearch,
+ searched
+ };
+ },
+};
+</script>

pages/index.vue

@@ -146,11 +146,17 @@ export default {
 
  const discountSlider=[]
  for (let step = 0; step < 3; step++) {
- discountSlider.push(products[Math.floor(Math.random()*products.length)]);
+ const random=products[Math.floor(Math.random()*products.length)];
+ if(!discountSlider.some(item=>item.id===random.id)){
+ discountSlider.push(random);
+ }
  }
  const bestSellerSlider=[]
  for (let step = 0; step < 8; step++) {
- bestSellerSlider.push(bestProducts[Math.floor(Math.random()*bestProducts.length)]);
+ const random=bestProducts[Math.floor(Math.random()*bestProducts.length)];
+ if(!bestSellerSlider.some(item=>item.id===random.id)){
+ bestSellerSlider.push(random);
+ }
  }
  return {
  discountSlider,

store/index.js

@@ -1,5 +1,6 @@
 
 export const state = () => ({
+ searchValue:'',
  allCategories:["Digital","Fashion","Beauty","House"],
  mainSliderImg: [
  { 
@@ -47,8 +48,16 @@ export const getters = {
  },
  SpecialBrandsSlider(state) {
  return state.SpecialBrandsSlider;
+ },
+ searchValue(state) {
+ return state.searchValue;
  }
 }
 export const mutations = {
-
+ changeSearchValue(state,newVal){
+ state.searchValue=newVal
+ },
+ removeSearchValue(state){
+ state.searchValue=""
+ },
 }