@partbot/grid-garage

GRID Garage component for Partbot-connected storefronts. It combines:

• Plate/VIN search
• Make / model / year selection
• A current vehicle selector for quickly swapping saved vehicles

The package preserves the existing storefront compatibility contracts by reading and writing:

• partbot_selected_vehicle
• partbot_plate_details
• partbot_plate_search_session_limits_v1
• plate-search-change
• vehicle-search-change
• partbot-clear-vehicle

It also adds a garage-specific event:

• vehicle-garage-change
• vehicle-garage-wheel-tyre-fitment

Install

npm install @partbot/grid-garage

React

import VehicleGarage from "@partbot/grid-garage"

export function StorefrontGarage() {
  return (
    <VehicleGarage
      apiKey="YOUR_API_KEY"
      store="your-store-handle"
      fields="body,series,variant,engine,engine_capacity"
      themeColor="#2352d9"
      triggerLabel="Garage"
    />
  )
}

Named Exports

import {
  VehicleGarage,
  VehicleGarageRaw,
  vehicleGarageCssUrl,
} from "@partbot/grid-garage"

• VehicleGarage is the default shadow-root wrapped React export.
• VehicleGarageRaw is the unwrapped component for advanced consumers.
• vehicleGarageCssUrl points to the emitted CSS asset.

Web Component

<script src="https://unpkg.com/@partbot/grid-garage@latest/dist/js/vehicle-garage.js"></script>

<button type="button" data-garage-trigger>Garage</button>

<vehicle-garage
  data-api-key="YOUR_API_KEY"
  data-store="your-store-handle"
  data-fields="body,series,variant,engine,engine_capacity"
  data-theme-color="#2352d9"
  data-font-name="Inter"
  data-radius="0px"
  data-button-color="#111111"
  data-show-garage-icon="true"
  data-hide-default-button="true"
  data-trigger-selector="[data-garage-trigger]"
></vehicle-garage>

Manual Wheel/Tyre Rollout

For the interim wheel/tyre rollout, enable the opt-in tab and listen for the returned filter block in theme code:

<vehicle-garage
  data-api-key="YOUR_API_KEY"
  data-store="your-store-handle"
  data-show-wheel-tyre-tab="true"
  data-default-tab="wheels"
  data-api-base-url="https://api.cartbot.io"
></vehicle-garage>

<script>
  document.addEventListener("vehicle-garage-wheel-tyre-fitment", (event) => {
    const { filterParams, tokens } = event.detail
    window.partbotWheelTyreFilters = { filterParams, tokens }
  })
</script>

The component does not apply Shopify collection filters itself. It returns product and variant metafield filters so store-specific theme code can decide which collection URL to update.

Shopify-specific collection URL handling lives outside the published package in the top-level shopify/ folder. Copy shopify/partbot-vehicle-filters.js into a theme asset when a storefront needs native Shopify collection filters to follow garage vehicle selections.

The custom element exposes:

• open()
• close()
• toggle()

Use data-trigger-label when rendering the built-in trigger button. Use data-hide-default-button="true" with data-trigger-selector when a theme already has its own trigger element. The selector can target any page element, for example #garage-button or [data-garage-trigger]; matching elements call toggle() when clicked.

Use fontName in React, or data-font-name on the web component, when a theme/app block only has a simple font name setting. For example, a Partbot Shopify app block can expose a font_name text setting and pass it through:

<vehicle-garage
  data-api-key="{{ block.settings.api_key | escape }}"
  data-font-name="{{ block.settings.font_name | default: 'Inter' | escape }}"
></vehicle-garage>

fontFamily / data-font-family still accepts a full CSS font-family stack and takes precedence over fontName.

Use show-garage-icon="false" to hide the built-in grid icon, or garage-icon-url="https://example.com/icon.png" to render a custom square icon. The data-prefixed forms data-show-garage-icon and data-garage-icon-url are also supported.

Use show-branding="false" or hide-branding="true" to hide the powered-by footer. The data-prefixed forms data-show-branding and data-hide-branding are also supported.

Props

Core props:

• apiKey
• store
• triggerLabel
• showGarageIcon
• garageIconUrl
• showBranding
• hideBranding
• hideDefaultButton
• isOpen
• onOpenChange
• autoCloseOnSelect
• defaultTab
• garageLimit
• apiBaseUrl
• showWheelTyreTab
• wheelTyreFitmentUrl

Web component-only attributes:

• data-trigger-selector

Web component icon attributes:

• data-show-garage-icon
• data-garage-icon-url

Theme props:

• themeColor
• buttonColor
• buttonHoverColor
• buttonLabelColor
• buttonHoverLabelColor
• mobileBackgroundColor
• radius
• buttonBorderRadius
• fontName
• fontFamily
• fontSize
• padding
• inputShadow
• inputBorderColor
• inputBorderWidth

MMY compatibility props:

• makes
• models
• vehicleScopeTokens
• yearTokens
• fields
• fieldPrefix
• modifyQueryString
• useStoreVehicles
• fieldOrder
• yearOptional
• enableFeatureFlags
• callbackUrl

Plate compatibility props:

• useGeolocation
• geocodeApiKey
• placeholder
• intro
• supportMessage
• demoMode
• productsUrl
• actionButtonLabel

useGeolocation only performs reverse geocoding when geocodeApiKey is provided. The package does not bundle a Google API key.

Development

npm install
npm run dev
npm run build
npm run test