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:

Settings
These are optional settings for the main interface

Search result settings
These are optional settings for the search result output they are defined by adding a  in front of the property name.

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

Some display types need a setting with an ask query, see Semantic MediaWiki ask query string for more information about them.

Styling and layout
WSSearchFront can be styled using CSS. Components are logically named using BEM convention, and the layout is 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 component spans over the whole first row. The available components are:


 *   this is the search input including the search button
 *   this is the area where the pills for selected filter show up
 *   this is the area where the sort options drop-down will show if sort options are set in the configuration
 *   this is where the different facet filters will be located
 *   this where the result count will show up
 *   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



Development
WSSearchFront is written with Vue.js and is pre-built. For performance and for old wiki support reasons. The development version is based on Vue-CLI and includes mock data and development modules for easy development. It can be found here wssearchfront-cli.

The final build files are added to the modules folder in the WSSearchFront extension folder.