[WIP] Refactor catalog module

config/default.json

@@ -270,6 +270,7 @@
       "setupVariantByAttributeCode": true,
       "endpoint": "/api/product",
       "defaultFilters": ["color", "size", "price", "erin_recommends"],
+      "routerFiltersSource": "query",
       "filterFieldMapping": {
         "category.name": "category.name.keyword"
       },

core/build/webpack.prod.sw.config.ts

@@ -60,10 +60,12 @@ module.exports = merge(base, {
         {
           urlPattern: '/img/(.*)',
           handler: 'fastest'
-        }, {
-          urlPattern: '/api/catalog/*',
+        },
+        {
+          urlPattern: /(http[s]?:\/\/)?(\/)?([^\/\s]+\/)?(api\/catalog\/)(.*)/g, // eslint-disable-line no-useless-escape
           handler: 'networkFirst'
-        }, {
+        },
+        {
           urlPattern: '/api/*',
           handler: 'networkFirst'
         }, {

core/compatibility/components/blocks/Category/Sidebar.js

@@ -19,7 +19,7 @@ export default {
       return this.getActiveCategoryFilters
     },
     availableFilters () {
-      return pickBy(this.filters, (filter) => { return (filter.length) })
+      return pickBy(this.filters, (filter, filterType) => { return (filter.length && !this.$store.getters['category-next/getSystemFilterNames'].includes(filterType)) })
     },
     hasActiveFilters () {
       return Object.keys(this.activeFilters).length !== 0

core/data-resolver/CategoryService.ts

@@ -0,0 +1,48 @@
+import { quickSearchByQuery } from '@vue-storefront/core/lib/search';
+import SearchQuery from '@vue-storefront/core/lib/search/searchQuery';
+import config from 'config';
+import { DataResolver } from './types/DataResolver';
+import { Category } from 'core/modules/catalog-next/types/Category';
+
+const getCategories = async ({
+  parentId = null,
+  filters = {},
+  level = null,
+  onlyActive = true,
+  onlyNotEmpty = false,
+  size = 4000,
+  start = 0,
+  sort = 'position:asc',
+  includeFields = config.entities.optimize ? config.entities.category.includeFields : null,
+  excludeFields = config.entities.optimize ? config.entities.category.excludeFields : null
+}: DataResolver.CategorySearchOptions = {}): Promise<Category[]> => {
+  let searchQuery = new SearchQuery()
+  if (parentId) {
+    searchQuery = searchQuery.applyFilter({key: 'parent_id', value: {'eq': parentId}})
+  }
+  if (level) {
+    searchQuery = searchQuery.applyFilter({key: 'level', value: {'eq': level}})
+  }
+
+  for (var [key, value] of Object.entries(filters)) {
+    if (Array.isArray(value)) {
+      searchQuery = searchQuery.applyFilter({key: key, value: {'in': value}})
+    } else {
+      searchQuery = searchQuery.applyFilter({key: key, value: {'eq': value}})
+    }
+  }
+
+  if (onlyActive === true) {
+    searchQuery = searchQuery.applyFilter({key: 'is_active', value: {'eq': true}})
+  }
+
+  if (onlyNotEmpty === true) {
+    searchQuery = searchQuery.applyFilter({key: 'product_count', value: {'gt': 0}})
+  }
+  const response = await quickSearchByQuery({ entityType: 'category', query: searchQuery, sort: sort, size: size, start: start, includeFields: includeFields, excludeFields: excludeFields })
+  return response.items as Category[]
+}
+
+export const CategoryService: DataResolver.CategoryService = {
+  getCategories
+}

core/data-resolver/index.ts

@@ -0,0 +1,5 @@
+import { CategoryService } from './CategoryService';
+
+export {
+  CategoryService
+}

core/data-resolver/types/DataResolver.d.ts

@@ -0,0 +1,21 @@
+import { Category } from 'core/modules/catalog-next/types/Category';
+
+declare namespace DataResolver {
+
+  interface CategorySearchOptions {
+    parentId?: number,
+    filters?: { [key: string]: string[] | string },
+    level?: number,
+    onlyActive?: boolean,
+    onlyNotEmpty?: boolean,
+    size?: number,
+    start?: number,
+    sort?: string,
+    includeFields?: string[],
+    excludeFields?: string[]
+  }
+
+  interface CategoryService {
+    getCategories: (searchRequest?: CategorySearchOptions) => Promise<Category[]>
+  }
+}

core/helpers/index.ts

@@ -125,24 +125,27 @@ export function baseFilterProductsQuery (parentCategory, filters = []) { // TODO
   return searchProductQuery
 }
 
-export function buildFilterProductsQuery (currentCategory, chosenFilters, defaultFilters = null) {
+export function buildFilterProductsQuery (currentCategory, chosenFilters = {}, defaultFilters = null) {
   let filterQr = baseFilterProductsQuery(currentCategory, defaultFilters == null ? config.products.defaultFilters : defaultFilters)
 
   // add choosedn filters
   for (let code of Object.keys(chosenFilters)) {
     const filter = chosenFilters[code]
+    const attributeCode = Array.isArray(filter) ? filter[0].attribute_code : filter.attribute_code
 
-    if (filter.attribute_code !== 'price') {
-      filterQr = filterQr.applyFilter({key: filter.attribute_code, value: {'eq': filter.id}, scope: 'catalog'})
+    if (Array.isArray(filter) && attributeCode !== 'price') {
+      const values = filter.map(filter => filter.id)
+      filterQr = filterQr.applyFilter({key: attributeCode, value: {'in': values}, scope: 'catalog'})
+    } else if (attributeCode !== 'price') {
+      filterQr = filterQr.applyFilter({key: attributeCode, value: {'eq': filter.id}, scope: 'catalog'})
     } else { // multi should be possible filter here?
       const rangeqr = {}
-      if (filter.from) {
-        rangeqr['gte'] = filter.from
-      }
-      if (filter.to) {
-        rangeqr['lte'] = filter.to
-      }
-      filterQr = filterQr.applyFilter({key: filter.attribute_code, value: rangeqr, scope: 'catalog'})
+      const filterValues = Array.isArray(filter) ? filter : [filter]
+      filterValues.forEach(singleFilter => {
+        if (singleFilter.from) rangeqr['gte'] = singleFilter.from
+        if (singleFilter.to) rangeqr['lte'] = singleFilter.to
+      })
+      filterQr = filterQr.applyFilter({key: attributeCode, value: rangeqr, scope: 'catalog'})
     }
   }
 

core/i18n/resource/i18n/en-US.csv

@@ -74,4 +74,5 @@
 "Quantity must be above 0","Quantity must be above 0"
 "Error: Error while adding products","Error: Error while adding products"
 "Unexpected authorization error. Check your Network conection.","Unexpected authorization error. Check your Network conection."
+"Columns","Columns"
 "You are going to pay for this order upon delivery.","You are going to pay for this order upon delivery."

core/lib/search.ts

@@ -27,7 +27,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-next/helpers/categoryHelpers.ts

@@ -0,0 +1,16 @@
+import { Category, ChildrenData } from '../types/Category';
+
+export const compareByLabel = (a, b) => {
+  if (a.label < b.label) {
+    return -1
+  }
+  if (a.label > b.label) {
+    return 1
+  }
+  return 0
+}
+
+export const _prepareCategoryPathIds = (category: Category): string[] => {
+  if (!category || !category.path) return []
+  return category.path.split('/')
+}

core/modules/catalog-next/helpers/filterHelpers.ts

@@ -0,0 +1,54 @@
+import FilterVariant from 'core/modules/catalog-next/types/FilterVariant';
+
+export const getSystemFilterNames: string[] = ['sort']
+
+/**
+ * Creates new filtersQuery (based on currentQuery) by modifying specific filter variant.
+ */
+export const changeFilterQuery = ({currentQuery = {}, filterVariant}: {currentQuery?: any, filterVariant?: FilterVariant} = {}) => {
+  const newQuery = JSON.parse(JSON.stringify(currentQuery))
+  if (!filterVariant) return newQuery
+  if (getSystemFilterNames.includes(filterVariant.type)) {
+    if (newQuery[filterVariant.type] && newQuery[filterVariant.type] === filterVariant.id) {
+      delete newQuery[filterVariant.type]
+    } else {
+      newQuery[filterVariant.type] = filterVariant.id
+    }
+  } else {
+    let queryFilter = newQuery[filterVariant.type] || []
+    if (!Array.isArray(queryFilter)) queryFilter = [queryFilter]
+    if (queryFilter.includes(filterVariant.id)) {
+      queryFilter = queryFilter.filter(value => value !== filterVariant.id)
+    } else {
+      queryFilter.push(filterVariant.id)
+    }
+    newQuery[filterVariant.type] = queryFilter
+  }
+  return newQuery
+}
+
+export const getFiltersFromQuery = ({filtersQuery = {}, availableFilters = {}} = {}) => {
+  const searchQuery = {
+    filters: {}
+  }
+  Object.keys(filtersQuery).forEach(filterKey => {
+    const filter = availableFilters[filterKey]
+    const queryValue = filtersQuery[filterKey]
+    if (!filter) return
+    if (getSystemFilterNames.includes(filterKey)) {
+      searchQuery[filterKey] = queryValue
+    } else if (Array.isArray(queryValue)) {
+      queryValue.map(singleValue => {
+        const variant = filter.find(filterVariant => filterVariant.id === singleValue)
+        if (!variant) return
+        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)
+      if (!variant) return
+      searchQuery.filters[filterKey] = {...variant, attribute_code: filterKey}
+    }
+  })
+  return searchQuery
+}

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

@@ -0,0 +1,4 @@
+import { optionLabel } from '@vue-storefront/core/modules/catalog/helpers/optionLabel'
+
+// TODO in future move old helper here, add tests and refactor
+export { optionLabel }

core/modules/catalog-next/index.ts

@@ -0,0 +1,10 @@
+import { categoryModule } from './store/category'
+import { createModule } from '@vue-storefront/core/lib/module'
+
+export const KEY = 'catalog-next'
+export default createModule({
+  key: KEY,
+  store: { modules: [
+    { key: 'category-next', module: categoryModule }
+  ] }
+})

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

@@ -0,0 +1,9 @@
+import { Category } from '../../types/Category';
+import Product from 'core/modules/catalog/types/Product';
+
+export default interface CategoryState {
+  categoriesMap: { [id: string]: Category },
+  availableFilters: any,
+  products: Product[],
+  searchProductsStats: any
+}

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

@@ -0,0 +1,134 @@
+// 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 { router } from '@vue-storefront/core/app'
+import FilterVariant from '../../types/FilterVariant'
+import { CategoryService } from '@vue-storefront/core/data-resolver'
+import { changeFilterQuery } from '../../helpers/filterHelpers'
+import { products } from 'config'
+import { configureProductAsync } from '@vue-storefront/core/modules/catalog/helpers'
+import { DataResolver } from 'core/data-resolver/types/DataResolver';
+import { Category } from '../../types/Category';
+import { _prepareCategoryPathIds } from '../../helpers/categoryHelpers';
+import chunk from 'lodash-es/chunk'
+
+const actions: ActionTree<CategoryState, RootState> = {
+  async loadCategoryProducts ({ commit, getters, dispatch, rootState }, { route, category } = {}) {
+    const searchCategory = category || getters.getCategoryFrom(route.path)
+    await dispatch('loadCategoryFilters', searchCategory)
+    const searchQuery = getters.getCurrentFiltersFrom(route[products.routerFiltersSource])
+    let filterQr = buildFilterProductsQuery(searchCategory, searchQuery.filters)
+    const {items, perPage, start, total} = await quickSearchByQuery({ query: filterQr, sort: searchQuery.sort })
+    commit(types.CATEGORY_SET_SEARCH_PRODUCTS_STATS, { perPage, start, total })
+    let configuredProducts = items.map(product => {
+      const configuredProductVariant = configureProductAsync({rootState, state: {current_configuration: {}}}, {product, configuration: searchQuery.filters, selectDefaultVariant: false, fallbackToDefaultWhenNoAvailable: true, setProductErorrs: false})
+      return Object.assign(product, configuredProductVariant)
+    })
+    commit(types.CATEGORY_SET_PRODUCTS, configuredProducts)
+    // await dispatch('loadAvailableFiltersFrom', searchResult)
+
+    return items
+  },
+  async loadMoreCategoryProducts ({ commit, getters, rootState }) {
+    const { perPage, start, total } = getters.getCategorySearchProductsStats
+    if (start >= total || total < perPage) return
+
+    const searchQuery = getters.getCurrentSearchQuery
+    let filterQr = buildFilterProductsQuery(getters.getCurrentCategory, searchQuery.filters)
+    const searchResult = await quickSearchByQuery({ query: filterQr, sort: searchQuery.sort, start: start + perPage, size: perPage })
+    commit(types.CATEGORY_SET_SEARCH_PRODUCTS_STATS, {
+      perPage: searchResult.perPage,
+      start: searchResult.start,
+      total: searchResult.total
+    })
+    let configuredProducts = searchResult.items.map(product => {
+      const configuredProductVariant = configureProductAsync({rootState, state: {current_configuration: {}}}, {product, configuration: searchQuery.filters, selectDefaultVariant: false, fallbackToDefaultWhenNoAvailable: true, setProductErorrs: false})
+      return Object.assign(product, configuredProductVariant)
+    })
+    commit(types.CATEGORY_ADD_PRODUCTS, configuredProducts)
+
+    return searchResult.items
+  },
+  async cacheProducts ({ commit, getters, dispatch, rootState }, { route } = {}) {
+    const searchCategory = getters.getCategoryFrom(route.path)
+    const searchQuery = getters.getCurrentFiltersFrom(route[products.routerFiltersSource])
+    let filterQr = buildFilterProductsQuery(searchCategory, searchQuery.filters)
+
+    const cachedProductsResponse = await dispatch('product/list', {
+      query: filterQr,
+      sort: searchQuery.sort,
+      updateState: false // not update the product listing - this request is only for caching
+    }, { root: true })
+    if (products.filterUnavailableVariants && products.configurableChildrenStockPrefetchStatic) { // prefetch the stock items
+      const skus = []
+      let prefetchIndex = 0
+      cachedProductsResponse.items.map(i => {
+        if (products.configurableChildrenStockPrefetchStaticPrefetchCount > 0) {
+          if (prefetchIndex > products.configurableChildrenStockPrefetchStaticPrefetchCount) return
+        }
+        skus.push(i.sku) // main product sku to be checked anyway
+        if (i.type_id === 'configurable' && i.configurable_children && i.configurable_children.length > 0) {
+          for (const confChild of i.configurable_children) {
+            const cachedItem = rootState.stock.cache[confChild.id]
+            if (typeof cachedItem === 'undefined' || cachedItem === null) {
+              skus.push(confChild.sku)
+            }
+          }
+          prefetchIndex++
+        }
+      })
+      for (const chunkItem of chunk(skus, 15)) {
+        dispatch('stock/list', { skus: chunkItem }, { root: true }) // store it in the cache
+      }
+    }
+  },
+  async findCategories (context, categorySearchOptions: DataResolver.CategorySearchOptions): Promise<Category[]> {
+    return CategoryService.getCategories(categorySearchOptions)
+  },
+  async loadCategories ({ commit }, categorySearchOptions: DataResolver.CategorySearchOptions): Promise<Category[]> {
+    const categories = await CategoryService.getCategories(categorySearchOptions)
+    commit(types.CATEGORY_ADD_CATEGORIES, categories)
+    return categories
+  },
+  async loadCategory ({ commit }, categorySearchOptions: DataResolver.CategorySearchOptions): Promise<Category> {
+    const categories: Category[] = await CategoryService.getCategories(categorySearchOptions)
+    const category: Category = categories && categories.length ? categories[0] : null
+    commit(types.CATEGORY_ADD_CATEGORY, category)
+    return category
+  },
+  /**
+   * Fetch and process filters from current category and sets them in available filters.
+   */
+  async loadCategoryFilters ({ dispatch, getters }, category) {
+    const searchCategory = category || getters.getCurrentCategory
+    let filterQr = buildFilterProductsQuery(searchCategory)
+    const searchResult = await quickSearchByQuery({ query: filterQr })
+    await dispatch('loadAvailableFiltersFrom', searchResult)
+  },
+  async loadAvailableFiltersFrom ({ commit, getters }, {aggregations}) {
+    const filters = getters.getAvailableFiltersFrom(aggregations)
+    commit(types.CATEGORY_SET_AVAILABLE_FILTERS, filters)
+  },
+  async switchSearchFilter ({ dispatch }, filterVariant: FilterVariant) {
+    const newQuery = changeFilterQuery({currentQuery: router.currentRoute[products.routerFiltersSource], filterVariant})
+    await dispatch('changeRouterFilterParameters', newQuery)
+  },
+  async resetSearchFilters ({dispatch}) {
+    await dispatch('changeRouterFilterParameters', {})
+  },
+  async changeRouterFilterParameters (context, query) {
+    router.push({[products.routerFiltersSource]: query})
+  },
+  async loadCategoryBreadcrumbs ({ dispatch, getters }, category: Category) {
+    if (!category) return
+    const categoryHierarchyIds = _prepareCategoryPathIds(category) // getters.getCategoriesHierarchyMap.find(categoryMapping => categoryMapping.includes(category.id))
+    const categoryFilters = { 'id': categoryHierarchyIds }
+    await dispatch('loadCategories', {filters: categoryFilters})
+  }
+}
+
+export default actions