Help:WSSearchFront

The WSSearchFront extension is a front-end for WSSearch written in Vue.js

For installation instructions see the extension page

Configuration
The WSSearchFront extension must be configured using the WSSearchFrontend parser function

There are 3 types of configuration:


 * Settings, without a prefix
 * Filter settings, prefixed with a  
 * Result settings, prefixed with a

Configurations can have setting options prefixed with a

Example configuration:

Facets filter settings
Facet filters are divined by adding an  in front of the property name. All settings are optional. When no display setting is used the default check-boxes are displayed

Styling and layout
WSSearchFront can be styled using CSS. Components are logically named using BEM convention, and the layout id defined with CSS Grid, you can just add your own style-sheet, by adding your CSS to common.css or you could use TemplateStyles

Layout
Below you find the default layout, grid-template-columns defines the columns sizes, grid-template-rows define the row sizes.

The different components can be moved around by changing the grid-template-areas in the default layout the search components spans over the whole first row The available components are:


 * search this is the search input including the search button
 * selected this is the area where the pills for selected filter show up
 * order this is the area where the sort options drop-down will show if sort options are set in the configuration
 * filters this is where the different facet filters will be located
 * total this where the result count will show up
 * main this is the area where the search result are shown, including the pagers

Variables
WSSearchFront uses CSS variables to define colors and icons, the following variables are available to override