Tyres VRM Lookup Component

The Tyres VRM Lookup component can be added to any page using the following code snippet:

<tyres-vrm-lookup></tyres-vrm-lookup>

This widget allows the user to make a VRM Lookup and select a tyre size. The best way to use this component is to keep it on a back page and use the standalone VRM Lookup widget to redirect into it, as that widget has more options including a manual vehicle entry.

Configuration options

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

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

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.

allow-change-vehicle
This is a boolean value that will determine whether or not the user can change the vehicle using this component. The default value is true.

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’”.

require-branch-guid
This is a boolean to determine whether or not the user needs to have a branch selected before submitting a VRM lookup. The default is false and this is mainly going to be useful when you want to use a branch select and vrm lookup component together as a CTA.

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.

Example code

<tyres-vrm-lookup loading-panel="true" template="1" min-height="300" redirect-url="'/online-booking/#/select-services'"></tyres-vrm-lookup>

Updated on February 7, 2018

Was this article helpful?

Related Articles