Search Form Demo Pages A collection of useful examples you can play with
API Usage Example: How to show additional data using widget variables
According docs widget have several variables that you can use in widget in links or instead of any text in columns. You can use following variables in custom link templates:
- trim (string), e.g. "1.8"
- is_oem (boolean), e.g. true
- bolt_pattern (string), e.g. "5x105"
- thd (string), e.g. "M12 x 1.5"
- lock_type (string), e.g. "nut"
- cb (number), e.g. 56.5
- rim (string), e.g. "7Jx16 ET40"
- rim_diameter (number), e.g. 16
- rim_width (number), e.g. 7
- rim_offset (number), e.g. 40
- tire (string), e.g. "215/60 R16"
- tire_aspect_ratio (number), e.g. 60
- tire_width (number), e.g. 215
- fuel (string), e.g. "Petrol"
- engine_type (string), e.g. "V6"
- power.PS (number), e.g. 328
- power.hp (number), e.g. 323
- power.kW (number), e.g. 241
- generation.name (string), e.g. "III Restyling"
- generation.start_year (number), e.g. 2012
- generation.end_year (number), e.g. 2015
make, year, model - objects with fields slug and title,
e.g. { slug: "chevrolet", title: "Chevrolet" }
- Wheel Bolts if lock type is bolt
- Wheel Nuts if lock type is nut
You can use the following constructs in the html code of the widget:
- {{ { "nut": "Wheel Nuts", "bolt": "Wheel Bolts" }[lock_type] || "" }}
- {{ (rim_diameter + 64) }}
- {{ (rim_diameter == 15 ? "This is 15 tire" : "This is not 15 tire") }}
Custom Header
Widget Code (please note that uuid
parameter should be different for your own widget ):
<div>
<h3 class="title-divider">
<span>Custom <span class="de-em">Header</span></span>
</h3>
<div id="ws-widget"></div>
</div>
<script src="//services.wheel-size.com/code/ws-widget.js"></script>
<script>
var widget = WheelSizeWidgets.create('#ws-widget', {
uuid: '58d5fc75790440cf9c015bd7b257013d',
width: '600'
});
widget.registerUserLinks({
replaceThd: {
text: '{{ thd }} {{ { "nut": "Wheel Nuts", "bolt": "Wheel Bolts" }[lock_type] || "" }}'
}
});
</script>