JSON API

Look Up a Fitment With the API

These endpoints are the current, supported Aerpro API. Each call is a plain HTTPS GET that returns JSON. No JavaScript, plugin or browser is needed, and no key or authentication. The full reference is the OpenAPI specification.

1. Find the vehicle

Search with the make and model, at least three characters:

GET https://aerpro.com/api/search/vehicles?search_term=ford+ranger

[
  { "id": "18501", "title": "Ford Ranger 2006-2011 PJ, PK", "url": "…" },
  { "id": "32065", "title": "Ford Ranger 2012-2015 PX", "url": "…" },
  …
]

The title carries the years and chassis codes. Several generations of one model take different parts, so match the customer's year before going on, and take that result's id.

2. List what fits

GET https://aerpro.com/api/v2/linked/vehicle/18501

{ "products": [ "FP7500", "FP9072", "APP072", "CT10FD07", … ] }

The SKUs of every product that suits the vehicle. A vehicle with nothing linked returns an error string instead of products; an unknown id is a 404.

3. Check the dash, if the vehicle has more than one

GET https://aerpro.com/api/v2/vehicle/18501

Some vehicles were sold with more than one factory dash, and a part that fits one may not fit another. The list in step 2 covers every dash. This call returns the vehicle with has_variants and a variants array, each variant with its title, dash image and the products that fit it. Where there is more than one, ask which dash the customer has and answer from that variant's products.

4. Get the detail for a product

GET https://aerpro.com/api/v2/product/FP7500

{ "sku": "FP7500", "title": "Facia To Suit Ford, Mazda Champagne",
  "categories": [ "Single / Double DIN Facias" ], "available": true, … }

Other questions

• Which vehicles does a part fit? GET https://aerpro.com/api/v2/linked/sku/AP336
• Where can I buy it? Aerpro sells through stockists, not direct. GET https://aerpro.com/api/dealers?lat=-37.8136&lng=144.9631 takes coordinates, not a postcode.

When you pass a fitment on, quote the vehicle title and the SKUs you looked up, so the customer can check they match their vehicle. A wrong fitment means a returned product.

Integration Guide

Implementation Steps

Follow these four steps to integrate the vehicle selector on your website. The plugin has no dependencies and provides a callback-based interface for handling vehicle data. You can fully theme the selectors and interface, the output is just data, so you can format that how you need.

Code Examples

Step-by-Step Integration

No dependencies. One script tag is the whole install. No library, no build step. If your page already uses jQuery, the legacy $('#el').aerproVehicleSelector(callback) form works too, and existing integrations do not need to change.

Step 1: Load the Aerpro Plugin

<script src="https://aerpro.com/plugin.js"></script>

If you would rather keep it off your critical rendering path, add defer, but then start the selector from a DOMContentLoaded listener rather than inline, because a deferred script has not run yet while the page is still being parsed.

Step 2: Create a Container Element

<div id="aerpro-selector-here"></div>

Step 3: Start the Selector

<script>
  Aerpro.vehicleSelector('#aerpro-selector-here', function (data) {
    // data.vehicle contains: make, model, year, picture, products, has_variants, variants
    // Optional: data.vehicle.variant, the dash the visitor chose, when there was a choice
    console.log('Vehicle:', data.vehicle.make, data.vehicle.model);
    console.log('Products:', data.vehicle.products.length);
    // Make some magic!
  });
</script>

The first argument takes a CSS selector or an element. Your callback runs every time a visitor picks a vehicle, or variant if one is required.

Step 4: Handle the Cases With No Answer

Your callback runs when we have a vehicle to give you. When we do not, the plugin fires an aerpro-error event instead. Listen for it, or those selections will leave your panel showing whatever it showed last.

document.addEventListener('aerpro-error', function (event) {
  var info = event.detail;

  if (info.noVehicle) {
    // We have no fitment data for that vehicle. That is an answer, not a
    // failure, and retrying will not change it.
    showMessage('Sorry, we have no fitment information for that vehicle.');
  }
  else if (info.rateLimited) {
    // Too many requests. info.retryAfter is seconds, when we send one.
    showMessage('Please wait a moment and try again.');
  }
  else if (info.challenged) {
    // Our edge could not confirm the browser. Only the visitor can clear this,
    // by opening aerpro.com directly and completing the check there.
    showMessage(info.message);
  }
  else {
    // A problem reaching us. Worth a retry.
    showMessage('Could not reach Aerpro. Please try again.');
  }
});

info.status carries the HTTP status and info.message our explanation of it. Every field on an aerpro-error:

Field	Meaning
message	What went wrong, in words.
status	The HTTP status, or 0 when the request never got an answer.
noVehicle	We have no fitment for that vehicle. An answer, not a failure: retrying will not change it.
rateLimited	Too many requests. retryAfter is the number of seconds to wait, when we send one.
challenged	The browser could not be confirmed. Only the visitor can clear it, by opening aerpro.com directly.
stage	'makes' when the vehicle list itself failed to load, so there is no selector to use.

The matching aerpro-status event marks the normal milestones, named by event.detail.message:

Message	When
plugin-ready	The list of makes has loaded.
make-selected	A make was chosen; models counts its models.
model-selected	A model was chosen.
api-ready	Make and model are both chosen, and the vehicle is being fetched.
variants-available	The vehicle has more than one dash; the variant step is showing.
variant-selected	A dash was chosen; products counts what fits it.
variant-cleared	"Show all products" was chosen instead of a specific dash.
api-success	The vehicle was handed to your callback; data is the same payload.

Using the jQuery form? Keep it. $(document).on('aerpro-error', function (event, info) { … }) receives the same object as the second argument.

Vehicles With More Than One Dash

Some vehicles were sold with different factory dashes, and a part that fits one may not fit another. Only for those vehicles, the selector adds a third step showing the dash photos, so your visitor can point at the one in front of them. A vehicle with one dash has no third step. Your callback runs once they have chosen, with the products narrowed to their variant and data.vehicle.variant naming it. It never runs before they have answered. The step stays on the page, so changing their mind runs your callback again with the new answer, exactly as changing the model does.

A visitor who cannot identify their dash is never stuck: under the photos, a "Show all products for this vehicle" button carries every product the vehicle takes, and in the dropdown form "All variants" does the same, with its own product count.

You need write no variant code. If you would rather render the step differently:

// A plain dropdown instead of the dash photos.
Aerpro.vehicleSelector('#aerpro-selector-here', callback, { variants: 'select' });

// Skip the step; hand over every product the vehicle carries.
Aerpro.vehicleSelector('#aerpro-selector-here', callback, { variants: 'off' });

Styling the Selector

Every part carries an id or class you can target. The variant step's layout ships as a small stylesheet, #aerpro-selector-styles, rather than inline styles, so your own CSS overrides it without !important. Its buttons and select also carry Bootstrap's btn and form-select classes, so on a Bootstrap site they match your own controls.

Hook	What it is
#aerpro-selector	The whole selector.
#aerpro-selector-title	The introductory sentence.
#aerpro-selector-widget	The row of controls.
#aerpro-select-make, #select-make	The make wrapper, and its <select>.
#aerpro-make-default	The "Makes" placeholder option.
#aerpro-select-model, #select-model	The model wrapper, and its <select>.
.attribution	The "Powered by Aerpro" link. It must stay visible.
.aerpro-selector-notice	The message shown when the vehicle list cannot load.
#aerpro-list-variants	The variant step. Empty unless the vehicle has more than one dash.
.variant-prompt	The question above the dashes.
.variant-wrapper	One card per dash; .variant-chosen is added to the one picked.
.variant-image	The dash photo. Clicking it chooses that dash.
.variant-name, .variant-count, .variant-notes	The dash's name, how many products fit it, and its notes.
.variant-selection	The "Use this Variant" button.
.variant-actions, .variant-escape	The row holding the "Show all products" button, and the button.
#select-variant	The dropdown, in variants: 'select' mode only.

Try It Out

Live Demo

Select a vehicle below to see the plugin in action:

Going Further

A Worked Example

The same endpoints and the same callback, with the payload put to work instead of printed. Pick a vehicle and each fitting part flies from the car into the basket.

Built with Aerpro.vehicleSelector() and about a hundred lines of plain JavaScript, with no framework and no build step. Read it in fitting-guide.js via your browser's developer tools; it is a worked example, meant to be copied.

API Explorer

Try Every Endpoint

Every endpoint, live. Open one, fill in its parameters and press Execute to see the real response from aerpro.com. All of them are public and read-only, with no key and no authentication, and the vehicle selector is built on these same endpoints.

Aerpro is a wholesaler and publishes no pricing. Purchase enquiries must go to a stockist. Wholesale enquiries require a new account, see tdj.com.au.

Machine-readable: OpenAPI specification · API catalogue · llms.txt