Vehicle Types Browser

The Vehicle Types Browser displays the body types in your inventory as tiles so visitors can start browsing by type.

Introduction

The vehicle-types-browser component is the first step for visitors who know they want an SUV or an estate but not yet which model. It shows every body type that currently has vehicles in stock as a tile with an illustration, the name and — optionally — the number of matching vehicles. Clicking a tile opens your vehicle search page with the type filter applied.

Basic Usage

<div
  data-carpose-component="vehicle-types-browser"
  data-api-key="your-api-key"
></div>

Attributes

Attribute	Required	Default	Description
data-carpose-component	Yes	—	Must be vehicle-types-browser
data-api-key	Yes	—	Your Carposé API key
data-layout	No	carousel	carousel for a horizontally scrolling row with arrows, grid for a static grid
data-grid-columns	No	4	Columns of the grid on desktop: 1, 2, 3 or 4. One column on phones. Ignored in carousel layout.
data-show-count	No	true	Set to "false" to hide the number of vehicles per type
data-title	No	—	Optional headline rendered above the tiles
data-primary-color, data-secondary-color, data-accent-color, data-color-scheme	No	account	See Colors and color scheme

Where a click leads

A tile forwards to the vehicle search page configured on your account (vehicleSearchMainPageUrl in the Carposé administration) with the chosen type preselected. If the browser is embedded on that very page, the search form on it is filtered in place instead of navigating.

Examples

Four-column grid:

<div
  data-carpose-component="vehicle-types-browser"
  data-api-key="your-api-key"
  data-layout="grid"
  data-grid-columns="4"
></div>

Two columns for a sidebar, without counts:

<div
  data-carpose-component="vehicle-types-browser"
  data-api-key="your-api-key"
  data-layout="grid"
  data-grid-columns="2"
  data-show-count="false"
></div>

Behavior

• Types are sorted by the number of vehicles, most first

• Only types with at least one vehicle in stock are shown; counts reflect the current inventory

• Responsive: the carousel scrolls with touch and arrows, the grid collapses to one column on phones

Notes

• Live demo: carpose.de/demo/fahrzeugtypen