feature/ using searchQuery object as a search layer + GraphQl support

config/default.json

@@ -1,12 +1,20 @@
 {
     "server": {
       "host": "localhost",
-      "port": 3000
+      "port": 3000,
+      "protocol": "http",
+      "api": "api",
+      "apiEngine": "elasticsearch"
+    },
+    "graphql":{
+      "host": "localhost",
+      "port": 8080
     },
     "elasticsearch": {
       "httpAuth": "",
       "host": "localhost:8080/api/catalog",
       "index": "vue_storefront_catalog",
+      "min_score": 0.02,
       "csrTimeout": 5000,
       "ssrTimeout": 1000
     },
@@ -133,6 +141,9 @@
       "setupVariantByAttributeCode": true,
       "endpoint": "http://localhost:8080/api/product",
       "defaultFilters": ["color", "size", "price", "erin_recommends"],
+      "filterFieldMapping": {
+        "category.name": "category.name.keyword"
+      },
       "sortByAttributes": {
         "Latest": "updated_at",
         "Price":"final_price"
@@ -247,5 +258,48 @@
       "endpoint": "http://localhost:8080/api/ext/cms-data/cms{{type}}/{{cmsId}}",
       "endpointIdentifier": "http://localhost:8080/api/ext/cms-data/cms{{type}}Identifier/{{cmsIdentifier}}/storeId/{{storeId}}"
     },
-    "usePriceTiers": false
+    "usePriceTiers": false,
+    "boost": {
+      "name": 3,
+      "category.name": 1,
+      "short_description": 1,
+      "description": 1,
+      "sku": 1,
+      "configurable_children.sku": 1
+    },
+    "query": {
+      "inspirations": {
+        "filter": [
+          {
+            "key": "category.name",
+            "value" : { "eq": "Performance Fabrics" }
+          }
+        ]
+      },
+      "newProducts": {
+        "filter": [
+          {
+            "key": "category.name",
+            "value" : { "eq": "Tees" }
+          }
+        ]
+      },
+      "coolBags": {
+        "filter": [
+          {
+            "key": "category.name",
+            "value" : { "eq": "Women" }
+          }
+        ]
+      },
+      "bestSellers": {
+        "filter": [
+          {
+            "key": "category.name",
+            "value" : { "eq": "Tees" }
+          }
+        ]
+      }
+    }
+
 }

core/api/product/queries/common.js

@@ -0,0 +1,38 @@
+import SearchQuery from 'core/store/lib/search/searchQuery'
+import config from 'config'
+
+export function prepareQuery ({queryText = '', filters = [], queryConfig = ''}) {
+  let query = new SearchQuery()
+  // prepare filters and searchText
+  if (filters.length === 0 && queryConfig !== '') {
+    // try get filters from config
+    if (config.hasOwnProperty('query') && config.query.hasOwnProperty(queryConfig) && config.query[queryConfig].hasOwnProperty('filter')) {
+      filters = config.query[queryConfig].filter
+    }
+  }
+
+  if (queryText === '') {
+    // try to get searchText from config
+    if (config.hasOwnProperty('query') && config.query.hasOwnProperty(queryConfig) && config.query[queryConfig].hasOwnProperty('searchText')) {
+      queryText = config.query[queryConfig].searchText
+    }
+  }
+
+  // Process filters and searchText if exists
+  if (filters.length > 0) {
+    filters.forEach(filter => {
+      query = query.applyFilter({key: filter.key, value: filter.value}) // Tees category
+    })
+  }
+
+  if (queryText !== '') {
+    query = query.setSearchText(queryText)
+  }
+
+  // Add basic filters
+  query = query
+    .applyFilter({key: 'visibility', value: {'in': [2, 3, 4]}})
+    .applyFilter({key: 'status', value: {'in': [0, 1]}})
+
+  return query
+}

core/api/product/queries/related.js

@@ -0,0 +1,18 @@
+import SearchQuery from 'core/store/lib/search/searchQuery'
+import config from 'config'
+
+export function prepareRelatedQuery (key, sku) {
+  let relatedProductsQuery = new SearchQuery()
+
+  relatedProductsQuery = relatedProductsQuery.applyFilter({key: key, value: {'in': sku}})
+
+  relatedProductsQuery = relatedProductsQuery
+    .applyFilter({key: 'visibility', value: {'in': [2, 3, 4]}})
+    .applyFilter({key: 'status', value: {'in': [0, 1, 2]}}) // @TODO Check if status 2 (disabled) was set not by occasion here
+
+  if (config.products.listOutOfStockProducts === false) {
+    relatedProductsQuery = relatedProductsQuery.applyFilter({key: 'stock.is_in_stock', value: {'eq': true}})
+  }
+
+  return relatedProductsQuery
+}

core/api/product/queries/searchPanel.js

@@ -0,0 +1,17 @@
+import SearchQuery from 'core/store/lib/search/searchQuery'
+import config from 'config'
+
+export function prepareQuickSearchQuery (queryText) {
+  let searchQuery = new SearchQuery()
+
+  searchQuery = searchQuery
+    .setSearchText(queryText)
+    .applyFilter({key: 'visibility', value: {'in': [3, 4]}})
+    .applyFilter({key: 'status', value: {'in': [0, 1]}})/* 2 = disabled, 3 = out of stock */
+
+  if (config.products.listOutOfStockProducts === false) {
+    searchQuery = searchQuery.applyFilter({key: 'stock.is_in_stock', value: {'eq': true}})
+  }
+
+  return searchQuery
+}

core/app.ts

@@ -21,6 +21,46 @@ import themeModules from 'theme/store'
 import themeExtensionEntryPoints from 'theme/extensions'
 import extensionEntryPoints from 'src/extensions'
 
+// Declare Apollo graphql client
+import ApolloClient from 'apollo-client'
+import { HttpLink } from 'apollo-link-http'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+import VueApollo from 'vue-apollo'
+console.log('Add Vue-Apollo graphql client')
+
+const httpLink = new HttpLink({
+    uri: config.server.protocol + '://' + config.graphql.host + ':' + config.graphql.port + '/graphql'
+})
+
+const apolloClient = new ApolloClient({
+    link: httpLink,
+    cache: new InMemoryCache(),
+    connectToDevTools: true
+})
+
+let loading = 0
+
+const apolloProvider = new VueApollo({
+    clients: {
+        a: apolloClient
+    },
+    defaultClient: apolloClient,
+    defaultOptions: {
+        // $loadingKey: 'loading',
+    },
+    watchLoading (state, mod) {
+        loading += mod
+        console.log('Global loading', loading, mod)
+    },
+    errorHandler (error) {
+        console.log('Global error handler')
+        console.error(error)
+    }
+})
+
+Vue.use(VueApollo)
+// End declare Apollo graphql client
+
 store.state.version = '1.3.0'
 store.state.__DEMO_MODE__ = (config.demomode === true) ? true : false
 store.state.config = config
@@ -63,6 +103,7 @@ export function createApp (): { app: Vue, router: any, store: any } {
     router,
     store,
     i18n,
+    provide: apolloProvider.provide(),
     render: h => h(App)
   })
 

core/build/webpack.base.config.js

@@ -64,7 +64,7 @@ module.exports = {
       path.resolve(__dirname, extensionsRoot),
       path.resolve(__dirname, themesRoot)
     ],
-    extensions: ['.js', '.vue', '.ts'],
+    extensions: ['.js', '.vue', '.gql', '.graphqls', '.ts'],
     alias: {
       // Main aliases
       'config': path.resolve(__dirname, './config.json'),
@@ -166,6 +166,11 @@ module.exports = {
       {
         test: /\.(woff|woff2|eot|ttf)(\?.*$|$)/,
         loader: 'url-loader?importLoaders=1&limit=10000'
+      },
+      {
+        test: /\.(graphqls|gql)$/,
+        exclude: /node_modules/,
+        loader: ['graphql-tag/loader']
       }
     ]
   }

core/components/blocks/SearchPanel/SearchPanel.js

@@ -1,8 +1,7 @@
-import bodybuilder from 'bodybuilder'
 import { mapState } from 'vuex'
 import i18n from '@vue-storefront/i18n'
 import onEscapePress from '@vue-storefront/core/mixins/onEscapePress'
-import config from 'config'
+import { prepareQuickSearchQuery } from 'core/api/product/queries/searchPanel'
 
 export default {
   name: 'SearchPanel',
@@ -27,49 +26,45 @@ export default {
       this.$store.commit('ui/setSearchpanel', false)
     },
     buildSearchQuery (queryText) {
-      let query = bodybuilder()
-        .query('range', 'visibility', { 'gte': 3, 'lte': 4 })
-        .andQuery('range', 'status', { 'gte': 0, 'lt': 2 }/* 2 = disabled, 4 = out of stock */)
-      if (config.products.listOutOfStockProducts === false) {
-        query = query.andQuery('match', 'stock.is_in_stock', true)
-      }
-      query = query.andQuery('bool', b => b.orQuery('match_phrase_prefix', 'name', { query: queryText, boost: 3, slop: 2 })
-        .orQuery('match_phrase', 'category.name', { query: queryText, boost: 1 })
-        .orQuery('match_phrase', 'short_description', { query: queryText, boost: 1 })
-        .orQuery('match_phrase', 'description', { query: queryText, boost: 1 })
-        .orQuery('bool', b => b.orQuery('terms', 'sku', queryText.split('-'))
-          .orQuery('terms', 'configurable_children.sku', queryText.split('-'))
-          .orQuery('match_phrase', 'sku', { query: queryText, boost: 1 })
-          .orQuery('match_phrase', 'configurable_children.sku', { query: queryText, boost: 1 }))
-      )
-      return query.build()
+      let searchQuery = prepareQuickSearchQuery(queryText)
+      return searchQuery
     },
     makeSearch () {
-      let query = this.buildSearchQuery(this.search)
-      this.start = 0
-      this.readMore = true
-      this.$store.dispatch('product/list', { query, start: this.start, size: this.size, updateState: false }).then(resp => {
-        this.products = resp.items
-        this.start = this.start + this.size
-        this.emptyResults = resp.items.length < 1
-      }).catch((err) => {
-        console.error(err)
-      })
+      if (this.search !== '' && this.search !== undefined) {
+        let query = this.buildSearchQuery(this.search)
+        this.start = 0
+        this.readMore = true
+        this.$store.dispatch('product/list', { query, start: this.start, size: this.size, updateState: false }).then(resp => {
+          this.products = resp.items
+          this.start = this.start + this.size
+          this.emptyResults = resp.items.length < 1
+        }).catch((err) => {
+          console.error(err)
+        })
+      } else {
+        this.products = []
+        this.emptyResults = 0
+      }
     },
     seeMore () {
-      let query = this.buildSearchQuery(this.search)
-      this.$store.dispatch('product/list', { query, start: this.start, size: this.size, updateState: false }).then((resp) => {
-        let page = Math.floor(resp.total / this.size)
-        let exceeed = resp.total - this.size * page
-        if (resp.start === resp.total - exceeed) {
-          this.readMore = false
-        }
-        this.products = this.products.concat(resp.items)
-        this.start = this.start + this.size
-        this.emptyResults = this.products.length < 1
-      }).catch((err) => {
-        console.error(err)
-      })
+      if (this.search !== '' && this.search !== undefined) {
+        let query = this.buildSearchQuery(this.search)
+        this.$store.dispatch('product/list', { query, start: this.start, size: this.size, updateState: false }).then((resp) => {
+          let page = Math.floor(resp.total / this.size)
+          let exceeed = resp.total - this.size * page
+          if (resp.start === resp.total - exceeed) {
+            this.readMore = false
+          }
+          this.products = this.products.concat(resp.items)
+          this.start = this.start + this.size
+          this.emptyResults = this.products.length < 1
+        }).catch((err) => {
+          console.error(err)
+        })
+      } else {
+        this.products = []
+        this.emptyResults = 0
+      }
     }
   },
   computed: {

core/pages/PageNotFound.js

@@ -1,4 +1,4 @@
-import builder from 'bodybuilder'
+import { prepareQuery } from 'core/api/product/queries/common'
 
 import i18n from '@vue-storefront/i18n'
 import EventBus from '@vue-storefront/core/plugins/event-bus'
@@ -11,7 +11,7 @@ export default {
   asyncData ({ store, route }) { // this is for SSR purposes to prefetch data
     return new Promise((resolve, reject) => {
       console.log('Entering asyncData for PageNotFound ' + new Date())
-      let ourBestsellersQuery = builder().query('range', 'visibility', { 'gte': 2, 'lte': 4 }/** Magento visibility in search & categories */).build()
+      let ourBestsellersQuery = prepareQuery({ queryConfig: 'bestSellers' })
       store.dispatch('category/list', {}).then(categories => {
         store.dispatch('product/list', {
           query: ourBestsellersQuery,