Tire Widget Demo
Wheel Widget Demo
Usage
Function of the widget should be called when passing search method and parameters of the search. Method can be called just after the .init method. User is able to add several search methods and use them as he needs.
Each method accepts only one argument. It’s an object with search params. Search params look the same as in a url. After calling a method Widget performs the search according to the passed search parameters.
Tire Widget
Search methods
Note: Parameters highlighted bold - required.
Adding filters & options
You can add filters to any of search methods.
Full list of filters:
brand
load_index
speed_rating
price
run_flat
light_truck
category
season_id
offers
Example
filters: {
brand: ['Bridgestone', 'Firestone', 'Fuzion'],
load_index: [91, 89],
speed_rating: ['H', 'V', 'W', 'S'],
price: {
from: 100,
to: 160
}
}
Also, you can add search options to any of search methods.
Full list of options:
defaultSelectedQty - provide default selected Qty
minQtyInResults - provide minimum searched Qty
autoRedirectToSummary - flag, which will say widget to go to summary page if results have only 1 item
Example
{
defaultSelectedQty: 4,
minQtyInResults: 4,
autoRedirectToSummary: true
}
Full usage of filters and options example might look like this
<script>
TCWidget.init({
apikey: '[your apikey]',
container: 'tireconnect',
}).then(function(widget) {
widget.searchByVIN({
vin: '[VIN_code]',
location_id: [somelocation],
filters: {
brand: ['Bridgestone', 'Firestone', 'Fuzion'],
load_index: [91, 89],
speed_rating: ['H', 'V', 'W', 'S'],
price: {
from: 100,
to: 160
},
run_flat: 1,
light_truck: 1,
category: 10,
season_id: 1,
offers: 293
},
{
defaultSelectedQty: 4,
minQtyInResults: 4,
autoRedirectToSummary: true
}
})
});
</script>
Search by Aces
aces_id - Vehicle Aces ID
location_id - Dealer's location ID
Example
widget.searchByVehicle({
aces_id: 268647,
location_id: 15290
});
Search by Vehicle
year - Year of vehicle manufacture
make - Make of vehicle
model - Model of vehicle
trim - Trim of vehicle
car_tire_id - Vehicle tire size (optional if just one for this trim)
location_id - Dealer's location ID
season_id - Tire season
Example
widget.searchByVehicle({
year: '2017',
make: 'Toyota',
model: 'Highlander',
trim: 'SE',
car_tire_id: '168544',
location_id: 12650,
season_id: 'all'
});
Staggered fitment Search
*kind of the search by Vehicle that using double CarTireID separated by ||
year - Year of vehicle manufacture
make - Make of vehicle
model - Model of vehicle
trim - Trim of vehicle
car_tire_id - Vehicle tire size
location_id - Dealer's location ID
season_id - Tire season
Example
widget.searchByVehicle({
year: '2016',
make: 'BMW',
model: '228i xDrive',
trim: 'Coupe',
car_tire_id: '142318||142319',
location_id: 15290,
season_id: 'all'
});
Search by Size
width - Tire width
height - Aspect ratio
rim - Rim diameter
location_id - Dealer's location ID
season_id - Tire season
load_index - Load index
speed_rating - Speed rating
Example
widget.searchBySize({
width: 195,
height: 65,
rim: 15,
location_id: 15290,
season_id: 'all',
load_index: '89',
speed_rating: 'H'
});
Search by Size Double
width - Tire width
f - Front tire width
r - Rear tire width
height - Aspect ratio
f - Front tire aspect ratio
r - Rear tire aspect ratio
rim - Rim diameter
f - Front tire rim diameter
r - Rear tire rim diameter
location_id - Dealer's location ID
season_id - Tire season
Example
widget.searchBySize({
width: {f: 195, r: 205},
height: {f: 65, r: 55},
rim: {f: 15, r: 16},
location_id: 15290,
season_id: 'all'
});
Search by Raw Size
size - Raw Size
location_id - Dealer's location ID
Example
widget.searchByRawSize({
size: 1956515,
location_id: 15290
});
Search by Part numbers
part_numbers - Array of part numbers
location_id - Dealer's location ID
Example
widget.searchByPartNumbers({
part_numbers: ['9','90000003278','240','8501','15494650000','402542073','100A1524','1014241','78380','84671','72016','90000007446','38076'],
location_id: 15290
});
Search by State & License Plate
state - State
license - Licence Plate
location_id - Dealer's location ID
Example
widget.searchByLicense({
state: 'NH',
license: '12345',
location_id: 15290
});
Search by VIN
vin - Vin
location_id - Dealer's location ID
Example
widget.searchByVIN({
vin: '1N4AZ1CPXJC309165',
location_id: 15290
});
JS Functions
addCustomerInfo
Example
widget.addCustomerInfo({
name: 'John Doe',
phone: '4564564562',
email: 'john@doe.com',
zipPostalCode: 'L4S0B8',
city: 'Richmond Hill',
stateProvince: 'ON',
addressLine1: '30 Via Renzo Drive',
addressLine2: 'Suite 254',
preferredTime: '2020-11-30 17:15', //15 min step
wayToContact: 'phone',
vehicle: {
year: '2020',
make: 'Honda',
model: 'CR-V',
trim: 'LX',
carTireId: 162713
}
});
addSupplierOrderInfo
editable: true/false (optional with true being default)
singleUse: true/false (optional with false being default)
Example
widget.addSupplierOrderInfo({
poNumber: {
value: '111222333',
editable: false,
singleUse: false
}
});
Wheel Widget
Search methods
Note: Parameters highlighted bold - required.
Full usage example might look like this
<script>
TCWidget.initWheels({
apikey: 'd373e2721a7975fe8143c9545b412069',
container: 'tireconnect'
}).then(widget => {
widget.searchWheelsByVehicle({
year: '[vehicle_year]',
make: '[vehicle_make]',
model: '[vehicle_year]',
bodyType: '[vehicle_body_type]',
subModel: '[vehicle_sub_model]',
option: '[vehicle_option]',
diameter: '[wheel_diameter]',
locationId: [somelocation]
});
})
</script>
Adding filters & options
You can add filters to any of search methods.
Full list of filters:
brandName
boreMax
color
width
price
Example
filters: {
brandName: ['Motiv'],
boreMax: ['73.1'],
color: ['BLACK'],
width: ['7.5'],
price: {
from: 109,
to: 160
}
}
Also you can add search options.
Full list of options:
autoRedirectToSummary - flag, which will say widget to go to summary page if results have only 1 item
Example
{
autoRedirectToSummary: true
}
Full usage of filters and options example might look like this
<script>
TCWidget.initWheels({
apikey: '[your_api_key]',
container: 'tireconnect'
}).then(widget => {
widget.searchWheelsByVehicle({
year: [vehicle_year],
make: '[vehicle_make]',
model: '[vehicle_year]',
bodyType: '[vehicle_body_type]',
subModel: '[vehicle_sub_model]',
option: '[vehicle_option]',
diameter: [wheel_diameter],
locationId: [somelocation],
filters: {
brandName: ['Motiv'],
boreMax: ['73.1'],
color: ['BLACK'],
width: ['7.5'],
price: {
from: 109,
to: 160
}
}
}, {
autoRedirectToSummary: false
});
})
</script>
Search by Vehicle
year - Year of vehicle manufacture
make - Make of vehicle
model - Model of vehicle
trim - Trim of vehicle
bodyType - Vehicle body type
subModel - Vehicle submodel
option - Vehicle submodel option
diameter - Vehicle’s wheel diameter
location_id - Dealer's location ID
Example
widget.searchWheelsByVehicle({
year: 2022,
make: "Acura",
model: "ILX",
bodyType: "Sedan",
subModel: "",
option: "",
diameter: "18",
locationId: 22592
});