AutoSync Visualizer
Documentation

Fired when the user submits the cart — either after filling in the built-in quote form, or, when disableQuoteForm: true, the moment the cart's Buy / Add to cart / Request a quote button is clicked. With the form disabled this event is the sole integration point for your external cart.

new Autosync({
  id: 'autosync-visualizer',
  key: 'YOUR_API_KEY',
  disableQuoteForm: true,
  onEvent: function({ event, data }) {
    if (event === 'submitQuote') {
      console.log('Cart submitted:', data);
      // data.wheels   → array of wheel objects
      // data.tires    → array of tire objects
      // data.vehicle  → selected vehicle
      // data.services → array of cart-level services
      // data.client   → contact details from the built-in form
      myCart.addItems(data);
    }
  }
});

Top-level keys

A key is only present when it has content. Check before reading it — a wheels-only cart has no data.tires, and data.client is absent whenever the built-in form was skipped.

data.client

{
  name: String,                  // first name
  lastName: String,
  email: String,
  phone: String,
  address: String,
  message: String,
  storeLocationId: Number,       // location chosen in the cart, from the portal
  storeLocationAddress: String
}

data.vehicle

{
  id: Number,
  make: String,
  model: String,
  submodel: String,
  year: Number,
  body: String,                  // e.g. "Sedan"
  bed: String,                   // trucks only
  type: String,                  // e.g. "SUV", "CAR", "VAN"
  isDrw: Boolean,                // dual rear wheel (dually)
  boltCircle: Number,
  lugCount: Number,
  bore: Number,
  boreRear: Number,              // null when the same as the front
  loadRating: String,
  loadRatingRear: String,
  maxWheelLoad: Number,
  raceTires: Boolean,
  staggeredDiameter: Boolean,    // front/rear take different diameters
  staggeredWidth: Boolean        // front/rear take different widths
}

data.wheels[]

{
  // identity
  id: Number,
  partNumber: String,            // manufacturer part number
  styleId: Number,
  externalProductId: String,     // your own ID — see the note below
  gtin: String,
  upc: String,

  // naming and appearance
  brand: String,
  model: String,
  submodel: String,
  color: String,
  shortColor: String,
  finish: String,
  shortFinish: String,
  accent: String,
  faceStyle: String,
  structure: String,
  material: String,
  orientation: String,

  // sizing and fitment
  diameter: Number,
  width: Number,
  offset: Number,
  bore: Number,
  boltCircle1: Number,
  boltCircle2: Number,
  lugCount: Number,
  lugType: String,
  exposedLugs: Boolean,
  lipSize: Number,
  bsm: Number,                   // back spacing measurement
  loadRating: Number,
  weight: Number,
  cap: String,
  position: String,
  side: String,

  // commerce
  price: Number,
  quantity: Number,
  inventory: Number,
  services: [ { id: Number, quantity: Number } ],

  // imagery
  img0001: String, img0002: String, img0003: String, img1001: String
}

data.tires[]

{
  // identity
  id: Number,
  partNumber: String,
  externalProductId: String,
  ean: String,
  asin: String,
  gmCode: String,
  traCode: String,

  // naming
  brand: String,
  model: String,
  displayName: String,           // e.g. "235/40R19 XL All Season Ev"
  size: String,

  // sizing
  sectionWidth: Number,
  aspectRatio: Number,
  rimDiameter: Number,
  metricRimDiameter: Number,
  inchWidth: Number,
  diameter: Number,
  overallDiameter: Number,
  overallWidth: Number,
  treadWidth: Number,
  treadDepth: Number,
  loadedWidth: Number,
  staticLoadedRadius: Number,
  rollingCircumference: Number,
  measuringRimWidth: Number,
  approvedRimWidthMin: Number,
  approvedRimWidthMax: Number,
  minDualSpacing: Number,

  // ratings
  loadRating: String,
  loadRange: String,
  loadCapacitySingle: Number,
  loadCapacityDual: Number,
  speedRating: String,
  starRating: String,
  plyRating: String,
  maxInflationPressure: Number,
  runFlat: Boolean,
  sidewall: String,              // e.g. "BSW"
  weight: Number,

  // commerce
  price: Number,
  quantity: Number,
  inStock: Boolean,
  services: [ { id: Number, quantity: Number } ],

  // imagery
  imgAngle: String, imgFront: String, imgSide1: String
}

data.services[]

Cart-level services. The per-product services arrays above reference these by id.

{
  id: Number,
  name: String,                  // label shown to the user
  cost: Number                   // as displayed, and as counted into the total
}

Fired when the user presses Search on the lookup home page — that is, with homeStyle: 'lookup' or in widget mode. It fires before the visualizer navigates, so it is the hook for sending the user somewhere else instead.

data is the query string of the route the widget is about to open, parsed into an object. Which keys appear depends on the tab the user searched from, and every value is a string — a bare flag such as wheels arrives as the string "true", not a boolean.

The _rear keys only appear when the user picked a staggered (different front/rear) size.

onEvent: function({ event, data }) {
  if (event === 'homeSearch') {
    if (data.vehicle_id) {
      window.location.href = '/shop/vehicle/' + data.vehicle_id;
    } else if (data.wheel_size) {
      window.location.href = '/shop/wheels?size=' + data.wheel_size;
    }
  }
}