Documentation · Frontend Guide
Financing Calculator
This document covers the financing calculator widget of the ADP Car Market Hub WordPress Plugin: where it appears, how it works for visitors, how it is configured, and what its limitations are.
When to use this document
Read this document if you are enabling the financing calculator for the first time, adjusting its default values, or helping a visitor understand what the calculator shows.
Overview
The financing calculator is an interactive widget displayed on individual vehicle detail pages. It allows visitors to estimate a monthly loan payment based on the vehicle price, a down payment percentage, a loan term, and an annual interest rate.
All fields are adjustable by the visitor. The calculator updates the estimated monthly payment instantly as values change, without any page reload or server request. The calculation is performed entirely in the browser using a standard annuity formula.
The calculator is for estimation purposes only. The result is clearly labeled as an estimate, and the widget includes a disclaimer reminding visitors to consult their bank or financial institution for actual financing terms.
Requirements or prerequisites
- The financing calculator must be enabled in the plugin settings (
FINANCING_ENABLED). It is disabled by default. - The vehicle detail page must have a vehicle price greater than zero. The calculator does not render if the vehicle price is zero or missing.
Step-by-step instructions
Enable the financing calculator
- In the WordPress admin, open the plugin settings.
- Navigate to the Financing Calculator configuration section.
- Enable the master toggle.
- Optionally adjust the default interest rate, loan term, and down payment percentage.
- Save the settings.
The calculator will appear on all vehicle detail pages where the vehicle has a price.
Visitor: use the financing calculator
- Open a vehicle detail page.
- Scroll to the Financing Calculator section.
- The calculator shows the vehicle price and pre-filled default values for the three adjustable inputs.
- Move the Down Payment slider to adjust the percentage of the vehicle price paid upfront. The label above the slider shows the current percentage.
- Select the Loan Term from the dropdown. The available options are 12, 24, 36, 48, 60, 72, and 84 months.
- Edit the Annual Interest Rate field. It accepts values from 0% to 30% in 0.1% increments.
- The Estimated Monthly Payment updates immediately as any value changes.
- A summary below the payment shows the loan amount, total cost, and total interest.
- The disclaimer at the bottom reminds the visitor that the result is an estimate only.
Configuration reference
Calculator settings
| Setting | Option key | Default | Description |
|---|---|---|---|
| Enable calculator | as24ci_financing_enabled | Off (0) | Master switch for the financing calculator feature |
| Default interest rate | as24ci_financing_default_rate | 3.9 | Pre-filled annual interest rate in percent |
| Default loan term | as24ci_financing_default_months | 48 | Pre-selected loan term in months |
| Default down payment | as24ci_financing_down_payment | 20 | Pre-filled down payment as a percentage of vehicle price |
Visitor-adjustable inputs
| Input | Type | Range | Description |
|---|---|---|---|
| Down Payment | Range slider | 0% – 100% | Percentage of vehicle price paid as down payment |
| Loan Term | Dropdown | 12 / 24 / 36 / 48 / 60 / 72 / 84 months | Duration of the loan |
| Interest Rate | Number input | 0% – 30% | Annual interest rate in percent |
Calculator output
The widget displays:
| Output | Description |
|---|---|
| Estimated Monthly Payment | Monthly payment calculated using the annuity formula |
| Loan Amount | Vehicle price minus down payment amount |
| Total Cost | Loan amount plus total interest paid over the loan term |
| Total Interest | Difference between total cost and loan amount |
All monetary values are formatted using the vehicle's currency and the site locale.
Layout placement
The financing calculator placement on the single vehicle page is controlled by the Layout Manager. When the feature is enabled, the calculator block is available in the single vehicle sidebar and can also be placed in the main content area or the bottom section via the Layout Manager. If the same block is placed in multiple zones, only the first applicable instance renders.
Operational notes
- The annuity calculation is performed entirely in JavaScript (
as24ci-financing.js). The server only supplies the initial data (vehicle price, currency, default settings) via a localized script object (as24ciFinancing). No further server requests are made when the visitor adjusts the calculator. - The calculator renders only when the vehicle price is greater than zero. If a vehicle has no price, the widget is silently omitted even if the feature is enabled and the block is in the Layout Manager.
- The JavaScript and CSS assets for the calculator are enqueued only on single vehicle pages (
is_singular), not on the archive or other pages. - The widget uses CSS custom properties from the plugin's design system (primary color, border radius, background, text colors) so it inherits the configured theme colors automatically.
- The disclaimer text ("This is an estimate only. Actual rates may vary. Please consult your bank or financial institution for exact terms.") is hardcoded in the template and is not configurable from the admin settings.
- The financing calculator does not submit any data to the server, does not create any leads, and does not contact any external financing service.
Troubleshooting
The financing calculator does not appear on a vehicle detail page.
- Confirm the feature is enabled in the plugin settings.
- Verify the vehicle has a price greater than zero.
- Confirm the financing calculator block is active in the Layout Manager for the single vehicle page.
- Check the browser console for JavaScript errors.
The monthly payment shows a dash (—) and does not update.
- The calculator requires JavaScript to function. Verify that JavaScript is not blocked in the browser.
- Check for conflicting scripts from other plugins that may interfere with the calculator's event listeners.
The calculator values do not reflect the currency or locale of the site.
- The currency and locale are passed to the JavaScript when the page is loaded, based on the vehicle's stored currency and the WordPress site locale. Changing these settings requires clearing any page cache.