45 lines
2.1 KiB
Markdown
45 lines
2.1 KiB
Markdown
# 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:
|
|
```json
|
|
{"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
|
|
|
|
1. Compile vehicle data as JSON
|
|
2. Choose dark or light theme
|
|
3. Build HTML with Tailwind CDN or inline styles
|
|
4. Use `{VEHICLE_DATA}` as placeholder, inject real JSON at build time
|
|
5. Email as file attachment (16KB+ — too large for email preview)
|