Visit Scotland Product Search

A web component designed to be embedded in any site, linking a user to the Visit Scotland DMS.

Using the component

Script tag

<script src="https://unpkg.com/@visitscotland/product-search/dist/product-search.umd.js"></script>

along with the element:

<product-search />

Node modules

• Run npm i @visitscotland/product-search --save
• Add as a script, eg:

<script src="node_modules/@visitscotland/product-search/dist/product-search.umd.js"></script>

Configuring the component

The product search widget can take the following props:

defaultProd

defines the starting product value when the tool is loaded
Default value: 'acti,attr,reta'
Allowed values:

| Value | Meaning | | ----------- | ----------- | | 'acco' | Accomodation | | 'acti,attr,reta' | Things to do | | 'cate' | Food and drink | | 'even' | Events | | 'tour' | Tours |

defaultLocation

defines the starting location when the tool is loaded
Note that this value must exactly match the name of an place in the VS DMS, including case.

defaultLocale

defines the language setting for the tool
Default value: ' ' (sets the language to English)
Allowed values:

| Value | Meaning | | ----------- | ---------| | 'de' | German | | 'en' | English | | 'fr' | French | | 'it' | Italian | | 'nl' | Dutch |

Project Setup

yarn

Compile and Hot-Reload for Development

yarn dev

Type-Check, Compile and Minify for Production

yarn build

Run Unit Tests with Vitest

yarn test:unit

Lint with ESLint

yarn lint