Apex Track Experience — Vehicle Registration Snippet

Build Pattern

A self-contained HTML/JS snippet for vehicle registration with cascading dropdowns (Make → Model → Year → Color → Specs), hosted on WordPress via Elementor HTML widget.

Architecture

Static JSON dataset — make/model/year/horsepower in a single vehicles.json file. No API calls, no recurring cost.
Inline all-in-one HTML — the snippet contains styles, vehicle data, JS logic, and dark/light theme. No external dependencies. Single copy-paste deployment.
Cascading dropdowns — Make selects populate Model, Model populates Year, Year enables Color. Each step is disabled until the previous is selected.
Specs remain locked until all fields (including Color) are filled — the Horsepower panel only appears after the user picks a color.
Color field — 16 preset options + "Other" with free-text input. Triggers specs display on selection.

Themes

Two versions exist:

Dark theme — apex-register.html at the portal mockup. Black background, orange accent.
Light theme — apex-vreg-final.html sent to user. White background, blue accent, matching WordPress light themes.

Deployment

Paste the entire content into an Elementor HTML widget on the target page. No additional configuration needed — vehicle data embedded as a JS object literal.

Adding Vehicles

Edit the vData JSON object inside the <script> tag. Structure:

{"Make Name": {"Model Name": {"2024": 500, "2025": 520}}}

Make/Model sorted alphabetically. Years sorted descending (newest first).

Vehicle Data Source

Compiled from manufacturer spec sheets for exotics/performance cars (Ferrari, Lamborghini, Porsche, McLaren, etc.). The exotic-vehicle-scout cron job checks daily for newly announced models.

Building a New Snippet

Compile vehicle data as JSON
Choose dark or light theme
Build HTML with Tailwind CDN or inline styles
Use {VEHICLE_DATA} as placeholder, inject real JSON at build time
Email as file attachment (16KB+ — too large for email preview)

2.1 KiB Raw Blame History