mmyvs.partbot.io Open in urlscan Pro
35.214.184.4  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Learn more


SUPERCHARGEDVEHICLE SEARCH

Partbot's make, model, year vehicle search (MMYVS) is hands-down the fastest
search component available for online auto parts stores. Style to match the look
of your store and customise to show as many or as little fields and vehicles as
you need.

Select Vehicle

Select Vehicle...Close vehicle selection
Search
Optimised for mobile! Click to try.


LIGHTNING FAST

Partbot's Vehicle Search is lightning-fast! On average, each selection loads in
under 100 milliseconds, up to 20 times faster than other make, model, year
search plugins. Don't lose your customers with slow loading vehicle search
plugins!


MOST POPULAR

Partbot's MMY Vehicle Search is unique to your store and customers. Over time,
popular vehicles based on your customer's searching habits will appear first,
improving your store's personalisation and conversion rate.


35K+ VEHICLES

Over 35,000 vehicle listings covering the Australian Car Parc. Partbot Vehicle
Search integrates seamlessly with Partbot Marketplace listings, or you can map
your existing store products to Partbot vehicles.


CUSTOMISABLE

Choose the vehicle options you want to show, restrict to a subset of makes and
model specific to your product offering and style to match your brand and
website theme.

Get Started


ADD THE VEHICLE SEARCH JAVASCRIPT FILE TO YOUR HTML, JUST BEFORE THE CLOSING
</BODY> TAG.

<script src="//unpkg.com/@cartbot/vehicle-search@latest/dist/vehicle-search.js" async></script>

CopyCopied!


ADD THE VEHICLE-SEARCH WEB COMPONENT TO YOUR HTML WHERE YOU WANT IT TO APPEAR.

<vehicle-search
  data-api-key="PARTBOT_API_KEY"
  data-callback="false"
/>

CopyCopied!
Configuration

Using data-* attributes on the vehicle-search web component, you can configure
the following options:

Attribute
Type
Default
Description
data-api-keyrequired
string

Your Partbot public API key, available in your account settings. Your API key
can only be used on your approved domains.
data-callbackoptional
boolean
true
Whether or not to redirect the user to a different page (data-callback-url)
after selecting a vehicle. Defaults to true. If false, the callback-url is
ignored and a vehicle-search-change event is dispatched instead.
data-callback-urloptional
string
current page
The URL you want to redirect users to after selecting a vehicle. Used in
conjuntion with data-callback. Will reload current page if not set.
data-fieldsoptional
string

By default Make, Model and Year fields always appear. Provide a list of comma
serpated field names to display fields additional as needed. Available fields
are "body,series,engine_capacity,engine".
data-field-prefixoptional
string

This plugin appends field names to the URL as query parameters. Provide a prefix
to use for the query parameters. e.g. "pb_". Defaults to no prefix.
data-layoutoptional
string
row
Show the Vehicle Search horizontally (row) or vertically, stacked (column).
Available values are "row" or "column".
data-makesoptional
string

Provide a list of comma seperated vehicle makes to reduce the options presented
to your customers. e.g. "toyota,mazda,nissan,isuzu"
data-modelsoptional
string

Provide a list of comma seperated vehicle models to reduce the options presented
to your customers. e.g. "hilux,landcruiser,ranger,everest"
data-show-labelsoptional
boolean
false
Show the labels for the vehicle search fields.
Events
vehicle-search-change
Returns the user's selected vehicle as an object. Dispatched whenever a vehicle
property is selected or changed, on pageload (if query parameters present) and
when the user clicks the search button.


EXAMPLE EVENT LISTENER. DATA RETURNED ON THE EVENT.DETAIL OBJECT.

document.addEventListener("vehicle-search-change", (e) => {
  console.log(e.detail);
});

CopyCopied!


EXAMPLE RESPONSE

{
  "detail: {
    "vehicle_ids": [
      "90210","ABC123"
    ],
    "vehicle": {
      "make": {
        "value": "TOYOTA",
        "refinement": "TOYOTA",
        "popularity: 100
      },
      "model": {
        "value": "HILUX",
        "refinement": "HILUX",
        "popularity: 100
      },
    },
  }
}


CopyCopied!
vehicle-search-submit
Returns the user's selected vehicle as an object. Dispatched when the user
clicks the search button if callbackUrl is not set.


EXAMPLE EVENT LISTENER. DATA RETURNED ON THE EVENT.DETAIL OBJECT.

document.addEventListener("vehicle-search-submit", (e) => {
  console.log(e.detail);
});

CopyCopied!
Styling

You can adjust the colours of the vehicle search component using CSS variables.


ADD THIS CSS BLOCK TO YOUR HTML, JUST BEFORE THE CLOSING </HEAD> TAG.

<style>
  :root {
    --partbot-button-color: 99 102 241;
    --partbot-button-hover-color: 79 70 229;
    --partbot-button-label-color: 255 255 255;
    --partbot-button-border-radius: 0.375rem;
  }             
</style>

CopyCopied!

These CSS variables define the colours of the Button, Button hover state, the
Button label/text and the Button border radius value.

Set the colour variables with the RGB colour values of your choice. Set the
border radius to any valid CSS numeric value, i.e. px, rem, em, etc.


FOR EXAMPLE, A LIGHT GREEN BUTTON WITH AN RGB VALUE OF RGB(74, 222, 128) AND
BLACK TEXT AND SQUARE CORNERS, WOULD USE THESE VALUES...

<style>
  :root {
    --partbot-button-color: 74 222 128;
    --partbot-button-hover-color: 34 197 94;
    --partbot-button-label-color: 0 0 0;
    --partbot-button-border-radius: 0;
  }             
</style>

CopyCopied!
🇦🇺Made in Australia
LinkedIn

Twitter

Facebook

Instagram

Partbot® | Copyright ©2024 Partbot Software Pty Ltd.