Embedded Javascript Popup Documentation - Online motor finance calculator solution integrated into your website

Setup

The following 2 lines of code are required inside the <HEAD>tag of your HTML.

This includes all the required javascript files and default styling needed to implement YCLE in your page.

Secondly, you must add one of the following code blocks at the bottom of your HTML, ideally just before the closing </BODY> tag. As you can see both of the code blocks require you to supply a 'Dealer Name', this value will be supplied by ourselves and simply needs to be supplied as a string.

Using Default Rate Information

If you do not have any Rate information to supply use the following code, the default of £0 Commission will then be used.

This initialises the finance calculation javascript, and associates a calculation with all specified links in the document.

Using Custom Rate Information

If you wish to supply custom Rate information then the following code block will be required:

type - ycleRateType is a Enum containing the Rate Type options, simply select the option you wish to use. If an incorrect value is specified the default rateType and rate will be used (£0 Commission). The options are as follows:

APR (i.e. ycleRateType.APR)
Commission (i.e. ycleRateType.Commission)
CustomerRate (i.e. ycleRateType.CustomerRate)

rate - this value will need to reflect either a commission or percentage depending on the selected option above. However the value needs to be a valid numeric value with currency signs, commas and percentage signs (£ or , or %) removed. (i.e. £100 commission would be 100 and an APR of 7.9% would be 7.9)

This initialises the finance calculation javascript, and associates a calculation with all specified links in the document.

How to specify a calculation link

To create a link that will open the finance popup; firstly you add the class attribute with a value of "ycleCalculate", as in this example:

<a href="#" class="ycleCalculate">Get Your Finance Quote</a>

Secondly, you need to either create new elements, or add class names to existing elements, to specify where the cash price and registration date information to associate with the calculation can be found. The class names must be "ycleCashPrice" and "ycleRegDate" respectively. An example is below:

These class names are case sensitive and should appear exactly as detailed here

If either of these values cannot be found the calculation link will be hidden

Supplying The Values

The value can be supplied in one of 4 ways currently:

rel attribute
title attribute
element value
element innerHTML

Examples are supplied below:

Residual Value (RV) Based Products

If you require an RV based product calculation to be retrieved then there are 2 additional details that will be required, the Current Mileage of the vehicle and it's CapCode or CapId. These details will need to be referred to in the same way as the Cash Price, by using the following class names, "ycleCurrentMileage" and "ycleCapCode".

These class names are case sensitive and should appear exactly as detailed here

Optionally a vehicle registration number can also be supplied using the class name "ycleRegNumber".

By supplying the registration number it will enable the customer to apply for finance online. In order to automatically enable the finance application form the ycleCapCode, ycleRegNumber and ycleCurrentMileage must be provided.

Formatting

Cash Price

This needs to be a valid numeric value between 100000 and 100000000 (exclusive) expressed in pence (i.e. £1,000 - £1,000,000). It is preferred if the value can be supplied with no currency signs, commas or decimals (i.e £ or , or .) although validation exists to strip out pound signs and commas but not decimals; the rest of the value however must be a valid number. The following examples are valid:

599900 (i.e. 5999.00)
5,99900 (i.e. 5,999.00)
£599900 (i.e. £5999.00)
£5,99900 (i.e. £5,999.00)

Registration Date

This needs to be a date expressed any of the following formats:

20081225 - recommended to avoid ambiguity
2008 12 25
2008/12/25
2008-12-25
2008.12.25
25122008
25 12 2008
25/12/2008
25-12-2008
25.12.2008
25 December 2008
December 25, 2008
December 25,2008
December 25 2008
2008-December-25
25-December-2008
25/12 (dates with no year part will default to current year)
25-12
25-December
December 25

Dates will be tested to match the formats above in the order they are shown. You are encouraged to use the first format (yyyyMMdd) to avoid potential ambiguity. Other date formats may result in an error or invalid calculation.

Current Mileage

This needs to a valid numeric value between 0 and 1000000 (exclusive) without commas or decimals (i.e , or .)

0 (i.e for a new car)
75000 (i.e 75,000)
999999 (i.e 999,999)

CapCode

This needs to be either a valid 14-20 digit CapCode or a valid numeric CapId which should lie between 1000 and 1000000 (exclusive)

FOKA13ZC73HPIM (CapCode)
35165 (CapId)

Registration Number

This needs to be a valid alphanumeric registration number of length 2-7 characters with an option of having one space

PJ56HLE
PJ56 HLE
A1
T3ST

Common Issues

The finance button is not displayed

The application may not be able to find the required parameters needed to call the calculation. Please ensure you have followed all the steps in the setup above. To see if any errors were found, you can append ?debug=true to the URL of your page. Any errors will then be displayed on screen.

The lightbox is not centered

Ensure your webpage has a valid HTML DOCTYPE, including the DTD reference. An example for HTML 4.0 Transitional might be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

IE7 crashes when I click the finance button

Ensure your webpage has a valid HTML DOCTYPE, including the DTD reference. An example for HTML 4.0 Transitional might be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The finance button is displayed but the popup doesn't work

You need to ensure your browser is working in "Standards" or Strict" mode and not quirksmode More information about the differences can be found here: http://www.quirksmode.org/css/quirksmode.html

'Apply For Finance' button does not appear in popup

If you receive a calculation back in the popup but there is no 'Apply For Finance' button then this will be one of three things, either the Current Mileage of the vehicle is missing, the CapCode/CapId is missing or the Vehicle Registration Number is missing. It will also be hidden if more than one of these is not present. These are both required to allow a customer to apply for finance online.

Issues with Other Javascript Frameworks/Libraries (JQuery, Mootools, Dojo)

There are a number of Javascript Frameworks available for use in your web applications and due to the lack of centralisation or standardisation there are often conflicts between some of the funcitons. The script files delivered by the script include for YourCarLoan Embedded uses the Prototype.js library, version 1.6.1

JQuery
JQuery can be used with Prototype as it was originally based on an early version of the latter. More information is available on the JQuery wiki and the changes only involve the order of the script includes (ensure the YourCarLoan Embedded is before the JQuery include in your code). There are some differences in the use of "$()" function when Prototype is used with JQuery but these are well documented on the JQuery wiki

Dojo
With later versions of Prototype it was decided to change the way it implemented basic Javascript and this should enable Prototype to work alongside Dojo. You should include the scripts in the order Prototype (in this case YourCarLoan Embedded) then Dojo.js

GWT
Google Web Toolkit doesn't currently report any issues with Prototype

Mootools
This will conflict directly with Prototype and no work around is available at the moment.

Thickbox/Lightbox
Popular uses of javascript libraries are popup windows and image "enlarge" scripts that open images in a "lightbox" with minimal effort from the developer/designer. YourCarLoan Embedded uses a version of Lightview which can be used in the same way as Thickbox for JQuery, Lightbox for Prototype or Prototype Windows by xilinus The basic operation of these scripts uses a CSS class to denote links that should open in the popup/lightbox so you can simply replace your existing library, include the YourCarLoan Embedded script and use the "lightview" class instead.