MixListPage

This mixin provides all the functionality for the list page data in an e-commerce application. It includes properties such as the type of list page, Graphql for the listPageInfo query, and base filters for the page. The mixin also includes methods for load more, load previous, sort change, and filter change, along with computed properties for the current selection, filter selection, and query parameters for the product list. Additionally, the mixin has several computed properties that determine the type of list page and the number of active filters.

The mixin is designed to be used with a Graphql based e-commerce application and provides a comprehensive set of tools to manage the data and behavior of the list page. Whether you're building a product list for a category, brand, or search result, this mixin has you covered.

All functionality for the list page Data:

• isInitialRequest: true
• initVariables: {}
• baseFilters: {}
• userSkip: 0
• sort: vm.$config.productListDefaultSort
• defaultSort: vm.$config.productListDefaultSort
• listInfo: null
• filters: {}
• userSelection: null
• filterParamQuery: {}
• skipProductsQuery: false
• relocateTimeout: null
• URLparamsRead: false
• filtersSet: false
• userHasPaged: false
• productsFetched: false

Props

Name	Description	Type	Required	Default
type	Type of list page	'category', 'brand', 'search', 'favorites', 'all'	false	-
infoQuery	Graphql for the listPageInfo query	Object	true	-
currentAlias	Current alias for the page	String	false	-
currentPath	Current url path for the page	String	false	-
filtersVars	Base filters for this page	Object	false	{}
implicitFacets	Automatically applied parameters, added through routing. Can be used for section style routing. See Ekotextil for implementation example.	Array	false	[]
excludeFacets	Exclude facets by facet ids	Array	false	[]

Methods

Method	Description	Parameters
loadMore	Load next chunk of products	-
loadPrev	Load previous chunk of products	-
getScrollHeight	Get the current scroll height of the page, used to keep scroll in the right position while loading previous products	-
sortChangeHandler	Update the sort setting	new value (String)
filterChangeHandler	Update the filter selections	new value (Object)
resetFilters	Resetting the filter selections	-
resetCurrentPage	Reset paging state	-
pushURLParams	Set filter selection in URL	-
setPagingState	Sets current page from URL or saved state	-
initProductList	Run to init the product list	-
relocateProduct	Runned to relocate product on page after back navigating	-
setupUserSelection	Setting up the current user selection from store	-
setupFilters	Setting up all filters	filters (Object)
updateFilters	Updating all filters	filters (Object)
setNewCount	Used to set new count of filters	base filters (Array), new filters (Array)
getSortedFilters	Sorting all filters into groups	filters (Object)
getReadableParams	Setting up params for filter in URL	filter selection (Array)
switchToCanonicalOr404	Switching to canonical url if different from route path	-
handleFilteredRoutesRouting	Controls routing between filtered paths on the same category/brand etc	-

Computed

Computed	Type	Description	From Store
isNostoRequest	Boolean	Condition to skip nosto request	No
skip	Number	Current number of products to skip when querying	No
filterURLparams	Object	Returns the filter object used to query products based on filters	No
modifier	String	The modifer class for the list page	No
isList	Boolean	Is this list page of type list?	No
isCategory	Boolean	Is this list page of type category?	No
isBrand	Boolean	Is this list page of type brand?	No
isCampaign	Boolean	Is this list page of type discountCampaign?	No
isSearch	Boolean	Is this list page of type search?	No
isAll	Boolean	Is this list page of type all?	No
selection	Object	Current selection	No
productsQueryFilter	Object	Returns the filter object for the productsQueryVars	No
totalFiltersActive	Number	Number of total filters active	No
filterSelectionActive	Boolean	Is a filter selection made?	No
nostoQueryVars	Object	Returns the variable object with the query parameters for the nosto product list	No
productsQueryVars	Object	Returns the variable object with the query parameters for the product list	No
loadMoreQueryVars	Object	Returns the variable object for loading more products	No
loadPrevQueryVars	Object	Returns the variable object for loading previous products	No
skeletonProducts	Array	Returns an array of empty objects with same lengt as pageSize	No
widgetAreaFilters	Array	Returns array of widget filters	No
breadcrumbsCurrent	Object	Current bredcrumb info	No
showControls	Boolean	Show filters and other controls	No

MixIns

MixIn
MixMetaReplacement
MixListPagination
MixApolloRefetch