[WIP] Refactor catalog module

core/helpers/index.ts

@@ -87,8 +87,8 @@ export function productThumbnailPath (product, ignoreConfig = false) {
   return thumbnail
 }
 
-export function buildFilterProductsQuery (currentCategory, chosenFilters, defaultFilters = null) {
-  let filterQr = baseFilterProductsQuery(currentCategory, defaultFilters == null ? rootStore.state.config.products.defaultFilters : defaultFilters)
+export function buildFilterProductsQuery (currentCategory, chosenFilters = {}, defaultFilters = null) {
+  let filterQr = baseFilterProductsQuery(currentCategory, !defaultFilters ? rootStore.state.config.products.defaultFilters : defaultFilters)
 
   // add choosedn filters
   for (let code of Object.keys(chosenFilters)) {

core/lib/search.ts

@@ -25,7 +25,7 @@ export function isOnline () : boolean {
  * @param {Int} size page size
  * @return {Promise}
  */
-export const quickSearchByQuery  = async ({ query, start = 0, size = 50, entityType = 'product', sort = '', storeCode = null, excludeFields = null, includeFields = null }): Promise<SearchResponse> => {
+export const quickSearchByQuery  = async ({ query = {}, start = 0, size = 50, entityType = 'product', sort = '', storeCode = null, excludeFields = null, includeFields = null } = {}): Promise<SearchResponse> => {
   const searchAdapter = await getSearchAdapter()
   if (size <= 0) size = 50
   if (start < 0) start = 0

core/modules/catalog-magento/helpers/optionLabel.ts

@@ -0,0 +1,39 @@
+/**
+ * Helper method for getting attribute name - TODO: to be moved to external/shared helper
+ *
+ * @param {String} attributeCode
+ * @param {String} optionId - value to get label for
+ */
+import toString from 'lodash-es/toString'
+
+export function optionLabel (state, { attributeKey, searchBy = 'code', optionId }) {
+  let attrCache = state.labels[attributeKey]
+
+  if (attrCache) {
+    let label = attrCache[optionId]
+
+    if (label) {
+      return label
+    }
+  }
+  let attr = state['list_by_' + searchBy][attributeKey]
+  if (attr) {
+    let opt = attr.options.find((op) => { // TODO: cache it in memory
+      if (toString(op.value) === toString(optionId)) {
+        return op
+      }
+    }) // TODO: i18n support with  multi-website attribute names
+
+    if (opt) {
+      if (!state.labels[attributeKey]) {
+        state.labels[attributeKey] = {}
+      }
+      state.labels[attributeKey][optionId] = opt.label
+      return opt ? opt.label : optionId
+    } else {
+      return optionId
+    }
+  } else {
+    return optionId
+  }
+}

core/modules/catalog-magento/index.ts

@@ -0,0 +1,15 @@
+// import { productModule } from './store/product'
+// import { attributeModule } from './store/attribute'
+// import { stockModule } from './store/stock'
+// import { taxModule } from './store/tax'
+import { categoryModule } from './store/category'
+import { createModule } from '@vue-storefront/core/lib/module'
+// import { beforeRegistration } from './hooks/beforeRegistration'
+
+export const KEY = 'catalog-magento'
+export default createModule({
+  key: KEY,
+  store: { modules: [
+    { key: 'category-magento', module: categoryModule }
+  ] }
+})

core/modules/catalog-magento/store/category/CategoryState.ts

@@ -0,0 +1,16 @@
+export default interface CategoryState {
+  categories: any,
+  availableFilters: any,
+  products: any
+  // list: any,
+  // current: any,
+  // filters: {
+  //   available: any,
+  //   chosen: any
+  // },
+  // breadcrumbs: {
+  //   routes: any
+  // },
+  // current_product_query: any,
+  // current_path: any
+}

core/modules/catalog-magento/store/category/actions.ts

@@ -0,0 +1,132 @@
+// import Vue from 'vue'
+import { ActionTree } from 'vuex'
+import * as types from './mutation-types'
+import RootState from '@vue-storefront/core/types/RootState'
+import CategoryState from './CategoryState'
+import { quickSearchByQuery } from '@vue-storefront/core/lib/search'
+import { buildFilterProductsQuery } from '@vue-storefront/core/helpers'
+import config from 'config'
+import trim from 'lodash-es/trim'
+import toString from 'lodash-es/toString'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
+import { optionLabel } from '../../helpers/optionLabel'
+import { router } from '@vue-storefront/core/app'
+import FilterVariant from '../../types/FilterVariant';
+
+const actions: ActionTree<CategoryState, RootState> = {
+  /**
+   * Initialise category module.
+   * - gets available categories
+   * - gets available filters for current category
+   */
+  async initCategoryModule ({ getters, dispatch }) {
+    if (!getters.getCategories.length) {
+      await dispatch('getCategories')
+      await dispatch('getAvailableFilters')
+    }
+  },
+  async searchProducts ({ commit, getters, dispatch }, { filters, route } = {}) {
+    await dispatch('initCategoryModule')
+    const searchQuery = getters.calculateFilters(filters)
+    const searchCategory = getters.calculateCurrentCategory(route)
+    let filterQr = buildFilterProductsQuery(searchCategory, searchQuery.filters)
+    const searchResult = await quickSearchByQuery({ query: filterQr, sort: searchQuery.sort })
+    commit(types.CATEGORY_SET_PRODUCTS, searchResult.items)
+
+    return searchResult.items
+  },
+  async getCurrentCategory ({ dispatch, rootState }) {
+    return await dispatch('category/single', { key: config.products.useMagentoUrlKeys ? 'url_key' : 'slug', value: rootState.route.params.slug }, {root: true})
+  },
+  async fetchCategories ({ dispatch }) {
+    const res = await dispatch('category/list', {}, {root: true})
+    return res.items
+  },
+  async getCategories ({ commit, dispatch }) {
+    const categories = await dispatch('fetchCategories')
+    commit(types.CATEGORY_SET_CATEGORIES, categories)
+    return categories
+  },
+  /**
+   * Fetch and process filters from current category and sets them in available filters.
+   */
+  async getAvailableFilters ({ commit, getters, rootState }) {
+    const filters = {}
+    const searchCategory = getters.getCurrentCategory
+    let filterQr = buildFilterProductsQuery(searchCategory)
+    const searchResult = await quickSearchByQuery({ query: filterQr })
+    if (searchResult && searchResult.aggregations) { // populate filter aggregates
+      for (let attrToFilter of config.products.defaultFilters) { // fill out the filter options
+        let filterOptions:Array<FilterVariant> = []
+
+        let uniqueFilterValues = new Set<string>()
+        if (attrToFilter !== 'price') {
+          if (searchResult.aggregations['agg_terms_' + attrToFilter]) {
+            let buckets = searchResult.aggregations['agg_terms_' + attrToFilter].buckets
+            if (searchResult.aggregations['agg_terms_' + attrToFilter + '_options']) {
+              buckets = buckets.concat(searchResult.aggregations['agg_terms_' + attrToFilter + '_options'].buckets)
+            }
+
+            for (let option of buckets) {
+              uniqueFilterValues.add(toString(option.key))
+            }
+          }
+
+          uniqueFilterValues.forEach(key => {
+            const label = optionLabel(rootState.attribute, { attributeKey: attrToFilter, optionId: key })
+            if (trim(label) !== '') { // is there any situation when label could be empty and we should still support it?
+              filterOptions.push({
+                id: key,
+                label: label,
+                type: attrToFilter
+              })
+            }
+          });
+        } else { // special case is range filter for prices
+          const storeView = currentStoreView()
+          const currencySign = storeView.i18n.currencySign
+          if (searchResult.aggregations['agg_range_' + attrToFilter]) {
+            let index = 0
+            let count = searchResult.aggregations['agg_range_' + attrToFilter].buckets.length
+            for (let option of searchResult.aggregations['agg_range_' + attrToFilter].buckets) {
+              filterOptions.push({
+                id: option.key,
+                type: attrToFilter,
+                from: option.from,
+                to: option.to,
+                label: (index === 0 || (index === count - 1)) ? (option.to ? '< ' + currencySign + option.to : '> ' + currencySign + option.from) : currencySign + option.from + (option.to ? ' - ' + option.to : '')// TODO: add better way for formatting, extract currency sign
+              })
+              index++
+            }
+          }
+        }
+        filters[attrToFilter] = filterOptions
+      }
+      // Add sort to available filters
+      let variants = []
+      Object.keys(config.products.sortByAttributes).map(label => {
+        variants.push({
+          label: label,
+          id: config.products.sortByAttributes[label],
+          type: 'sort'
+        })
+      })
+      filters['sort'] = variants
+    }
+    commit(types.CATEGORY_SET_AVAILABLE_FILTERS, filters)
+  },
+  async switchSearchFilter({ dispatch }, filterVariant:FilterVariant) {
+    const query = Object.assign({}, router.currentRoute.query) // await dispatch('getCurrentFilters')
+    if(query[filterVariant.type] && query[filterVariant.type] === filterVariant.id) {
+      delete query[filterVariant.type]
+    } else {
+      query[filterVariant.type] = filterVariant.id
+    }
+    router.push({query})
+  },
+  async resetFilters() {
+    router.push({query: {}})
+  }
+}
+
+export default actions

core/modules/catalog-magento/store/category/getters.ts

@@ -0,0 +1,44 @@
+import { GetterTree } from 'vuex'
+import RootState from '@vue-storefront/core/types/RootState'
+import CategoryState from './CategoryState'
+
+const specialFields = ['sort']
+
+const getters: GetterTree<CategoryState, RootState> = {
+  getCategories: (state) => state.categories,
+  getCategoryProducts: (state) => state.products,
+  getAvailableFilters: state => state.availableFilters,
+  calculateCurrentCategory: (state, getters, rootState) => (route) => {
+    const currentRoute = route ? route : rootState.route
+    return getters.getCategories.find(category => currentRoute.path.includes(category.url_path)) || {}
+  },
+  getCurrentCategory: (state, getters, rootState) => getters.calculateCurrentCategory(rootState.route),
+  calculateFilters: (state, getters, rootState) => (filters) => {
+    const currentQuery = filters ? filters : rootState.route.query
+    const searchQuery = {
+      filters: {}
+    }
+    Object.keys(currentQuery).forEach(filterKey => {
+      const filter = getters.getAvailableFilters[filterKey]
+      const queryValue = currentQuery[filterKey]
+      if (!filter) return
+      if (specialFields.includes(filterKey)) {
+        searchQuery[filterKey] = queryValue
+      } else if (Array.isArray(queryValue)) {
+        queryValue.map(singleValue => {
+          const variant = filter.find(filterVariant => filterVariant.id === singleValue)
+          if (!searchQuery.filters[filterKey] || !Array.isArray(searchQuery.filters[filterKey])) searchQuery.filters[filterKey] = []
+          searchQuery.filters[filterKey].push({...variant, attribute_code: filterKey})
+        })
+      } else {
+        const variant = filter.find(filterVariant => filterVariant.id === queryValue)
+        searchQuery.filters[filterKey] = {...variant, attribute_code: filterKey}
+      }
+    })
+    return searchQuery
+  },
+  getCurrentFilters: (state, getters, rootState) => getters.calculateFilters(rootState.route.query).filters,
+  hasActiveFilters: (state, getters) => !!Object.keys(getters.getCurrentFilters).length
+}
+
+export default getters

core/modules/catalog-magento/store/category/index.ts

@@ -0,0 +1,18 @@
+import { Module } from 'vuex'
+import actions from './actions'
+import getters from './getters'
+import mutations from './mutations'
+import RootState from '@vue-storefront/core/types/RootState'
+import CategoryState from './CategoryState'
+
+export const categoryModule: Module<CategoryState, RootState> = {
+  namespaced: true,
+  state: {
+    categories: [],
+    availableFilters: {},
+    products: []
+  },
+  getters,
+  actions,
+  mutations
+}

core/modules/catalog-magento/store/category/mutation-types.ts

@@ -0,0 +1,4 @@
+export const SN_CATEGORY = 'category'
+export const CATEGORY_SET_PRODUCTS = `${SN_CATEGORY}/SET_PRODUCTS`
+export const CATEGORY_SET_CATEGORIES = `${SN_CATEGORY}/SET_CATEGORIES`
+export const CATEGORY_SET_AVAILABLE_FILTERS = `${SN_CATEGORY}/SET_AVAILABLE_FILTERS`

core/modules/catalog-magento/store/category/mutations.ts

@@ -0,0 +1,18 @@
+// import Vue from 'vue'
+import { MutationTree } from 'vuex'
+import * as types from './mutation-types'
+import CategoryState from './CategoryState'
+
+const mutations: MutationTree<CategoryState> = {
+  [types.CATEGORY_SET_PRODUCTS] (state, products = []) {
+    state.products = products
+  },
+  [types.CATEGORY_SET_CATEGORIES] (state, categories = []) {
+    state.categories = categories
+  },
+  [types.CATEGORY_SET_AVAILABLE_FILTERS] (state, availableFilters = {}) {
+    state.availableFilters = availableFilters
+  }
+}
+
+export default mutations

core/modules/catalog-magento/types/FilterVariant.ts

@@ -0,0 +1,7 @@
+export default interface FilterVariant {
+  id: string,
+  label: string,
+  type: string,
+  from?: string,
+  to?: string
+}

core/modules/catalog/components/CategorySort.ts

@@ -8,12 +8,24 @@ export const CategorySort = {
   methods: {
     // emit to category, todo: move all logic inside
     sort () {
-      this.$bus.$emit('list-change-sort', { attribute: this.sortby })
+      this.$emit('sortChange', this.sortby)
+      // this.$bus.$emit('list-change-sort', { attribute: this.sortby })
     }
   },
   computed: {
     sortingOptions () {
       return this.$store.state.config.products.sortByAttributes
+    },
+    sortingVariants () {
+      let variants = []
+      Object.keys(this.sortingOptions).map(label => {
+        variants.push({
+          label: label,
+          id: this.sortingOptions[label],
+          type: 'sort'
+        })
+      })
+      return variants
     }
   }
 }

core/modules/catalog/components/ProductCustomOption.ts

@@ -4,7 +4,7 @@ export const ProductCustomOption = {
     label: {
       type: String,
       required: false,
-      default: () => false
+      default: ''
     },
     id: {
       type: null,

src/modules/index.ts

@@ -1,6 +1,7 @@
 // import { extendModule } from '@vue-storefront/core/lib/module'
 import { VueStorefrontModule } from '@vue-storefront/core/lib/module'
 import { Catalog } from "@vue-storefront/core/modules/catalog"
+import CatalogMagento from "@vue-storefront/core/modules/catalog-magento"
 import { Cart } from '@vue-storefront/core/modules/cart'
 import { Checkout } from '@vue-storefront/core/modules/checkout'
 import { Compare } from '@vue-storefront/core/modules/compare'
@@ -77,5 +78,6 @@ export const registerModules: VueStorefrontModule[] = [
   AmpRenderer,
   InstantCheckout,
   Url,
+  CatalogMagento
   // Example
 ]