...

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. 

Sample of adding search by VIN method

widget.searchByVIN({
	vin: '[VIN_code]',
	location_id: [somelocation]
    });

Full usage example might look like this

<script>
	TCWidget.init({
		apikey: '[your apikey]',
		container: 'tireconnect',
	}).then(function(widget) {
		widget.searchByVIN({
		vin: '[VIN_code]',
		location_id: [somelocation]
		})
	});
</script>    

 Tire Widget

Search methods

Note: Parameters highlighted bold - required.

Adding filters & options

You can add filters to any of search methods.

...

• 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.

...

• 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

...

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 ||

...

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

...

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
});