Slot Type Group Component

The Slot Type Group component can be added to any page using the following code snippet:

<slot-type-group-list></slot-type-group-list>

This widget requires a branch in order to have any results. The prices and available slot types will automatically update if the vehicle changes.

Configuration options

The following configuration options are currently available for the VRM Lookup Component:

slot-type-group-ids
This determines which slot type groups are visible. By default, it will show all slot type groups for the currently selected branch. A string is expected and you can simply pass in as many slot type groups IDs seperated by commas, e.g. ‘1791,1788,1799’.

show-prices-from
Show prices from is a boolean value that will allow you to show ‘prices from’ for servicing slots when a vehicle isn’t entered. The default value is true.

book-without-vehicle
Book without vehicle is a boolean value that will allow users to add slots to the basket without a vehicle selected. The default value is false.

Note: This only affects slot types with a fixed price. This won’t work with servicing slot types.

redirect-url
If you want to redirect the user to a different page on a successful VRM result, you can enter the url here. Please note, as this is a string it must be formatted correctly with both double and single quotes. e.g redirect-url=”‘/go-to-this-url’”.

redirect-state
If you want to redirect the user to a different state upon a successful result, then you can enter the state here.  Please note, as this is a string it must be formatted correctly with both double and single quotes. e.g redirect-url=”‘app.go.here’”. If there is both a redirect url and redirect state, the state will take priority.

template
This is which version of the widget is used. Default value is set to 1.

button-text
You can change the button text using this binding. The default value is ‘Get prices’. Please note, as this is a string it must be formatted correctly with both double and single quotes. e.g button-text=”‘BOOK’”.

loading-panel
This is a boolean value that will detemine whether or not a loading panel will show over the component while its initialising and doing initial API calls. The default value is false.

min-height
Min-height is the minimum height of the component in px. Important to set a value here if you want the loading panels to look good. Default value is 0.

Example code

<slot-type-group-list slot-type-group-ids="'1223,1243,1255'" show-prices-from="true" loading-panel="true" redirect-url="'/checkout/select-date-time'" min-height="200" book-without-vehicle="false"></slot-type-group-list>

Updated on February 7, 2018

Was this article helpful?

Related Articles