This javascript interface to TradePending's partner API. You must have a partner agreement with TradePending to use this library.
partner_id
is now required as a parameter onSNAP.configure
,SNAP.configure_with_options
,SNAP.next_attribute
,SNAP.get_report_url
,SNAP.get_report
,SNAPes.search
, andSNAPes.search_with_options
.dealer_url
andzip_code
are now required parameters onSNAP.get_report
andSNAP.get_report_url
.dealer_id
is not longer a parameter forSNAP.next_attribute
.- The
callback
provided toSNAP.configure
andSNAP.configure_with_options
now is called withcallback(err, vehicle)
instead ofcallback(error_or_vehicle_guess_which)
for consistency and usability. Other functions likeSNAP.next_attribute
already functioned this way since v3.
Better support for Canadian vehicle selection.
Added fuzzy
option to allow typos in search.
The Typeahead SDK uses an autocomplete box to allow a user to select a year, make, model, trim
quickly.
Additional functions help you ask the user to select additional vehicle attributes, and ultimately generate a TradePending used vehicle value report.
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.tradepending.com/javascript/typeahead.js"></script>
<script type="text/javascript" src="https://cdnjs.tradepending.com/javascript/snap-typeahead-v4.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.tradepending.com/stylesheets/snap-typeahead.css">
JQuery (with AJAX support) is required.
The SDK will be made available as the SNAP
global variable.
The stylesheet above is some basic CSS that you can use as is or copy and change.
npm i --save @tradepending/snap-sdk
require('snap-sdk')
exports two variables, SNAP
(Typeahead SDK), and SNAPes
(Search SDK).
The Typeahead SDK can be directly accessed via
const SNAP = require(snap-sdk/dist/snap-typeahead);
The typeahead.js
jQuery plugin must be loaded before calling SNAP.configure
. How this might be accomplished depends on your setup. The gulpfile.js
in this repository includes a minimal webpack example using code from the example/
directory.
Overview:
- Configure snap by telling it what
<input>
element to attach autocomplete to, and provide acallback
that will be called once the user has selected theiryear, make, model, trim
. - Repeatedly
next_attribute
and present additional choices to the user until the vehicle is fully identified. - Open a value report in a new window or iframe, or obtain the report data in JSON format.
A css_selector
is required to configure the SDK.
SNAP.configure(partner_id, css_selector, callback);
css_selector
should uniquely identify the <input>
element on the page that you want the vehicle autocomplete box to attach to. Default is #tradepending-vehicle-typeahead
.
Additional options can be configured as well.
SNAP.configure_with_options(options, callback);
The options
object must include css_selector
and partner_id
. Optional options are:
include_new_cars
: Allow selection of new cars, not just used. Default is false.country
:US
orCA
. Default isUS
.ymm_only
: Only select year, make, model (ignore trim). Default is false.fuzzy
: Use approximate matching for make/model/trim. Default is false.
After the user selects their Year/Make/Model/Trim in the autocomplete box, there may be more vehicle attributes that are needed to sufficiently identify the vehicle.
SNAP.next_attribute(partner_id, vehicle, callback)
partner_id
: partner id provided by tradepending.vehicle
: vehicle object fromSNAP.configure
or previousSNAP.next_attribute
callbacks.callback
: Handles asking the user for the remaining vehicle attributes.
The callback
for SNAP.next_attribute
is passed an error and result object. The result object contains the following fields:
vehicle
: the updated version of the vehicle object.attribute
: the next attribute that needs to be selected.choices
: all possible choices for the attribute.
Once the vehicle has been fully identified, the attribute
and choices
fields will not be set on the result object. Additionally, the vehicle
object will have been updated to include a vehicle.id
that is used when running the used value report.
Two report methods are available.
-
SNAP.get_report_url(partner_id, dealer_url, vehicle, zip_code, options)
: Creates the URL used to load the standard SNAP report in a new window or iFrame. -
SNAP.get_report(partner_id, dealer_url, vehicle, zip_code, options, callback)
: Obtains a JSON version of the report. -
partner_id
: partner id provided by tradepending. -
dealer_url
: URL of the dealership. -
vehicle
: vehicle selected usingSNAP.configure
andSNAP.next_attribute
. The vehicle must be fully selected (vehicle.id
exists). -
zip_code
: zip code of the dealership or market where the user is looking to trade their vehicle. -
options
: Possible options:mileage
: User entered mileage to use.
The Search SDK is intended for situations were you want to provide your own UI for selecting vehicles. It provides search methods for determining year, make, model, and trim
.
The To perform additional actions like narrowing down vehicle attributes or running a report, the TradePending API must be used.
<script type="text/javascript" src="https://cdnjs.tradepending.com/javascript/snap-search-v4.js"></script>
The SDK will be made available as the SNAPes
global variable.
npm i --save @tradpending/snap-sdk
require('snap-sdk')
exports two variables, SNAP
(Typeahead SDK), and SNAPes
(Search SDK).
The Search SDK can be directly accessed via
const SNAP = require(snap-sdk/dist/snap-search);
SNAPes.search(partner_id, search_term, callback)
or
SNAPes.search_with_options(options, callback)
the options
must include search_term
and partner_id
. Other options are:
include_new_cars
: Allow selection of new cars, not just used. Default is false.country
:US
orCA
. Default isUS
.ymm_only
: Only select year, make, model (ignore trim). Default is false.fuzzy
: Use approximate matching for make/model/trim. Default is false.
callback
is called with callback(err, results)
where results
is an array of vehicles containing year, make, model, trim
fields.
A simple example node server and example client is included in the /example
directory.
To run the example server:
DEALER_URL=<dealer-url> PARTNER_ID=<your-partner-id> node example/example_server.js
Then visit http://locahost:8081/
in your browser to view the example.