List of Configurations

You can find the list of the available configurations in this Github link.

Examples/Recipes

• Basic (default template) : ES5
• Basic (default template) : ES6
• Custom product card
• Pagination: infinite scroll
• Pagination: fixed size
• Pagination: Load More
• Range slider as checkboxes
• Customised
• IE10

Search Template Config

The search template options are configured under the ‘products’ object.

 

OPTIONS	DATATYPE	DESCRIPTION
gridCount	Number	If you wish to have grid type user interface, then you can configure how many columns you will to have in a row
defaultFilters	Object	to apply default filters, this will be applied in all api requests
template	Function	this function has two parameters. product and idx product is the each product object.idx is the index of the each product
productItemClass	String	this class name will be applied to each product card. it need to be added in search results template
productType	String	SEARCH or BROWSE or CATEGORY
attributesMap	Object	field mappings for the current product card
el	Element	Element to place the search template

 

Loader Config

OPTIONS	DATATYPE	DESCRIPTION
template	Function
el	Element	Ellement to place the loader

noResults Config

OPTIONS	DATATYPE	DESCRIPTION
template	Function
el	Element	Element to place the no results template

Facet Config

The facet configuration table is available here.

 

OPTIONS	DATATYPE	DESCRIPTION
facetsEl	Element	Element to place facet elements
facetTemplate	Function	function to render facet wrapper template. has two arguments. facetInfo and facets facetInfo will give you the each facet and facets will give the facets elements
facetItemTemplate	Function	customise filters here. has two arguments. facet – each facet item object filter – each filter value
facetMultiSelect	Booelan	to enable the multiple selection og facets. by default it is true
facetClass	String	css class name the facet item. optional.
facetAction	String	‘click’ or ‘change’ based on the facet item
selectedFacetClass	String	css class name for the selected facet items
selectedFacetsEl	Element	an element to place the selected facets. if you dont provide this element selected facets will be rendered along with facets
selectedFacetTemplate	Function	customise the selected facet here. provided 2 arguments. selectedFacet : selected facet filter : selected filter object
rangeFacetEl	Element	placeholder to render the rangefacet
rangeTemplate	Function	if you wish to customise the range facets. has one argument, will provide the list of range facets available
rangeWidgetConfig	Function	configure the default range slider. has 2 properties. minLabel : prefix for the min value maxLabel : prefix for the max value
multiLevelFacetSelector	String	class name for the each multi level facet item
multiLevelFacetEl	Element	placeholder to render multilevel facet element
facetDepth	4	configure how many levels of category filter you wish to have
clearFacetsSelector	String	Class name for button to clear the selected filters under a facet
removeFacetsSelector	String	for deleting each selected filter under a facet. this class name is must to work
onFacetLoad	function	if you wish to do something after each facet selection
applyMultipleFilters	Boolean	if you wish to apply multiple filters together
isCollapsible	Boolean	if you wish to have accordian on facets
defaultOpen	String	Available options ALL , FIRST , NONE
isSearchable	Boolean	if you wish to have a search feature on facets
searchPlaceHolder	String	placeholder for the facet search input
textFacetWrapper	String	css class for the facets list

Pagination

OPTIONS	DATATYPE	DESCRIPTION
el	Element	placeholder to place the pagination element
type	String	‘FIXED_PAGINATION’ or ‘INFINITE_SCROLL’ or ‘CLICK_N_SCROLL’
onPaginate	Function	call back function after pagination.
action	String	‘click’ or ‘change’ to make the pagination
template	Function	for customising the default pagination look. it has an argument(object) to provide the pagination information

NOTE:. We advise you to use your API Key in encrypted form on your frontend and never share it with anyone.

Spellcheck

OPTIONS	DATATYPE	DESCRIPTION
enabled	Boolean	for enabling spell check
el	Element	for placing the spellcheck element
template	Function	for modifying the default look of spellcheck

Sort Config

OPTIONS	DATATYPE	DESCRIPTION
el	Element	placeholder for the sort element
options	Array	array of sort options(Object)
sortClass	String	css class name for the sort item, make sure you will be providing this information in template
selectedSortClass	String	css class for the selected sort item
template	Function	modify the default look of the sort. provides and argument (object) gives you the selected sort
action	String	‘click’ or ‘change’ as per the sort item

PageSize Config

OPTIONS	DATATYPE	DESCRIPTION
pageSize	Number	number of results per page
options	Array	array of number of desired page sizes (number)
pageSizeClass	String	class name for page size element
selectedPageSizeClass	String	css class name for the selected page size option
action	String	click or change based on the customised template
template	Function	for modifying the default look of the element
el	Element	placeholder for the page size element

Breadcrumb Config

The Breadcrumb options are available here.

 

OPTIONS	DATATYPE	DESCRIPTION
enabled	Boolean	for showing breadcrumbs if it is available
el	Element	placeholder to append the breadcrumbs
selectorClass	String	css class for the each breadcrumb item
template	Function	if you wish to modify default breadcrumb template

Product Views

OPTIONS	DATATYPE	DESCRIPTION
el	Element	an element to place the product views element.
action	String	‘click’ or ‘change’ event for the product view element.
viewTypeClass	String	css classes for the product view element
selectedViewTypeClass	String	css class name for the selected view type
viewTypes	String	‘LIST’ or ‘GRID”

Variants

The Variant options can be configured here:

 

OPTIONS	DATATYPE	DESCRIPTION
enabled	Boolean	for enabling the variants
count	Number	how many variants required
groupBy	String	variants will be grouped based on this property. has to get from your catalogue
attributes	Array	provide the list of fields you need for each variants
mapping	Object	if you wish to map the product attributes to the variant attributes

• Did this answer your question?
• 

  Yes!

  Nice work, I love it.

  

  No…

  I have some feedback