Add custom pageSize parameter for category-next/loadCategoryProducts

CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added support for ES7 - @andrzejewsky (#3690)
 - Added unit tests for `core/modules/mailer` - @krskibin (#3710)
 - Get payment methods with billing address data - @rain2o (#2878)
+- Added custom page-size parameter for `category-next/loadCategoryProducts` action - @cewald (#3713, #3714)
 
 ## [1.11.0-rc.1] - 2019.10.03
 

config/default.json

@@ -311,6 +311,7 @@
     "setupVariantByAttributeCode": true,
     "endpoint": "/api/product",
     "defaultFilters": ["color", "size", "price", "erin_recommends"],
+    "systemFilterNames": ["sort"],
     "maxFiltersQuerySize": 999,
     "routerFiltersSource": "query",
     "filterFieldMapping": {

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

@@ -1,6 +1,7 @@
-import FilterVariant from 'core/modules/catalog-next/types/FilterVariant';
+import config from 'config'
+import FilterVariant from 'core/modules/catalog-next/types/FilterVariant'
 
-export const getSystemFilterNames: string[] = ['sort']
+export const getSystemFilterNames: string[] = config.products.systemFilterNames
 
 /**
  * Creates new filtersQuery (based on currentQuery) by modifying specific filter variant.

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

@@ -23,7 +23,7 @@ import omit from 'lodash-es/omit'
 import config from 'config'
 
 const actions: ActionTree<CategoryState, RootState> = {
-  async loadCategoryProducts ({ commit, getters, dispatch, rootState }, { route, category } = {}) {
+  async loadCategoryProducts ({ commit, getters, dispatch, rootState }, { route, category, pageSize = 50 } = {}) {
     const searchCategory = category || getters.getCategoryFrom(route.path) || {}
     const categoryMappedFilters = getters.getFiltersMap[searchCategory.id]
     const areFiltersInQuery = !!Object.keys(route[products.routerFiltersSource]).length
@@ -36,7 +36,8 @@ const actions: ActionTree<CategoryState, RootState> = {
       query: filterQr,
       sort: searchQuery.sort,
       includeFields: entities.productList.includeFields,
-      excludeFields: entities.productList.excludeFields
+      excludeFields: entities.productList.excludeFields,
+      size: pageSize
     })
     await dispatch('loadAvailableFiltersFrom', {aggregations, category: searchCategory, filters: searchQuery.filters})
     commit(types.CATEGORY_SET_SEARCH_PRODUCTS_STATS, { perPage, start, total })

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

@@ -107,7 +107,7 @@ const getters: GetterTree<CategoryState, RootState> = {
   getCurrentSearchQuery: (state, getters, rootState) => getters.getCurrentFiltersFrom(rootState.route[products.routerFiltersSource]),
   getCurrentFilters: (state, getters) => getters.getCurrentSearchQuery.filters,
   hasActiveFilters: (state, getters) => !!Object.keys(getters.getCurrentFilters).length,
-  getSystemFilterNames: () => ['sort'],
+  getSystemFilterNames: () => products.systemFilterNames,
   getBreadcrumbs: (state, getters) => getters.getBreadcrumbsFor(getters.getCurrentCategory),
   getBreadcrumbsFor: (state, getters) => category => {
     if (!category) return []

docs/guide/basics/configuration.md

@@ -496,6 +496,12 @@ This is the `vue-storefront-api` endpoint for rendering product lists.
 
 Here, we have the sort field settings as they're displayed on the Category page.
 
+```json
+  "systemFilterNames": ["sort"],
+```
+
+This is an array of query-fields which won't be treated as filter fields when in URL.
+
 ```json
   "gallery": {
       "mergeConfigurableChildren": true

docs/guide/cookbook/setup.md

@@ -1131,6 +1131,7 @@ At [`vue-storefront/config/default.json`](https://github.com/DivanteLtd/vue-stor
   "setupVariantByAttributeCode": true,
   "endpoint": "http://localhost:8080/api/product",
   "defaultFilters": ["color", "size", "price", "erin_recommends"],
+  "systemFilterNames": ["sort"],
   "filterFieldMapping": {
     "category.name": "category.name.keyword"
   },