30 lines
1.9 KiB
Markdown
30 lines
1.9 KiB
Markdown
# WPForms Vehicle Selector Integration
|
|
|
|
When embedding the vehicle selector inside a WPForms form, the vehicle data must be written to a WPForms-managed field for submission.
|
|
|
|
## Setup (user does this)
|
|
|
|
1. In WPForms builder, add a **Single Line Text** field
|
|
2. Label it "Vehicle" or "Vehicle Specs"
|
|
3. In **Advanced → CSS Classes**, enter `apex-vehicle-field`
|
|
4. Keep the existing **HTML Content** field with the vehicle dropdown snippet
|
|
|
|
## JS mechanism
|
|
|
|
The snippet detects the WPForms field via:
|
|
```javascript
|
|
var wpf = document.querySelector('.apex-vehicle-field input, .apex-vehicle-field textarea');
|
|
if(wpf) wpf.value = mk + ' ' + md + ' ' + yr + ' - ' + cl + ' - ' + hp + ' HP';
|
|
```
|
|
|
|
The format string is: `year color make model hp`
|
|
Example: `"2022 Red Ferrari F8 Tributo 710"`
|
|
|
|
## Critical pitfalls
|
|
|
|
- **Variable scope:** `hp` must be defined in the same scope as the WPForms population line. Store it as `var hp = d[mk][md][yr]` before the `wpf.value` line. If `hp` is not defined at that scope, the field stays blank.
|
|
- **Event handler method:** Do NOT use inline `onchange="vrUpdateModels()"` — WordPress/Elementor loaders may strip them. Use `.onchange = function() {...}` or `addEventListener()` inside an IIFE.
|
|
- **Vehicle data embedding:** Embed the JSON data as a JS object literal (`var d = {...}`), NOT fetched via `fetch()`. Elementor HTML widgets may not execute async fetches reliably.
|
|
- **Selector debugging:** If the field doesn't populate, check if `wpf` is null in browser dev tools. The CSS class `apex-vehicle-field` must match exactly what was entered in WPForms.
|
|
- **Notification gate:** WPForms notifications may be gated behind payment completion. If "Pay Offline" is an option and the notification never fires, check the notification settings for `paypal_commerce: "1"` or similar payment gate flags. Remove them from the notification JSON to send immediately on form submission.
|