Tyres Results Component

The Tyres Results component will display the tyres available from the selected branch.

<tyre-results></tyre-results>

There are a huge amount of customisation options available, so you can show tyres for specific manufacturers, sizes, quantities and more.

Configuration options

The following configuration options are currently available for the Tyres Results:

manufacturer-names
You can pass in one or more manufacturer names (separated by commas) and the results widget will only return the specified manufacturer names (e.g. pirelli,dunlop).

width
You either pass in a number or you can point it at the width value held in local storage by using {{vm.booking.vehicle.tyreSize.width}} (that will only work if the component is contained within a controller that has access to the local storage service.

profile
You either pass in a number or you can point it at the width value held in local storage by using {{vm.booking.vehicle.tyreSize.profile}} (that will only work if the component is contained within a controller that has access to the local storage service.

rim
You either pass in a number or you can point it at the width value held in local storage by using {{vm.booking.vehicle.tyreSize.diameter}} (that will only work if the component is contained within a controller that has access to the local storage service.

type
You can pass in a tyre type as a string, to only return certain types of tyre. The available types are ‘runflat’, ‘extraload’, ‘wintertyre’, ‘summertyre’, ‘budget’, ‘midrange’, ‘premium’ and ‘nextday’.

popup
Popup is a boolean value that will either enable or disable whether or not clicking on a tyre opens up a modal with more information.

results-template
There are different templates available for how the tyre results are displayed. Pass in a string with one of the following: ‘smalltable’, ‘card’ or ‘table’.

watch-size-change
This is a boolean value that, when set to true, will do a fresh api call if the tyre size is changed whilst on that page. Set to false by default.

show-manufacturers-filter
This is a boolean value that will hide the manufacturers filter in the filter dropdown menu. The default value is true.

minimum-stock
Minimum stock is the minimum amount of stock that a tyre has to have in order to be visible. By default this is set to 1.

preselect-quantity
This is the number that is initial available in the dropdowns. By default this is set to 0.

no-vehicle-redirect
Redirect url for when a user selects and tyre but hasn’t yet entered their vehicle.

no-vehicle-redirect-state
Redirect state for when a user selects and tyre but hasn’t yet entered their vehicle.

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.

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

<tyre-results tyre-results preselect-quantity="2" minimum-stock-level="1" tyre-popup="true" tyre-filters-responsive="true" tyre-results-template="smalltable"
tyre-width="{{vm.booking.vehicle.tyreSize.width}}" tyre-profile="{{vm.booking.vehicle.tyreSize.profile}}" tyre-rim="{{vm.booking.vehicle.tyreSize.diameter}}"
tyre-speed="{{vm.booking.vehicle.tyreSize.rating}}" tyre-watch-size-change="true" show-manufacturers-filter="false" redirect-url="'/online-booking/#/select-date-time'" no-vehicle-redirect-url="'/online-booking/#/tyres-enter-vehicle'"></tyre-results>

Updated on February 8, 2018

Was this article helpful?

Related Articles