YourCarLoan Embedded Support

Welcome to the user guide for YourCarLoan Embedded - a javascript plugin for delivering finance calculations via a modal, xHTML layer overlay. The process is designed to be as simple as possible so just follow the steps in order for setting up and specifying a link. You can then supply the required fields using the CSS classnames as described.

We recommend that you read the short Setup and Formatting sections before proceeding with any development. You should also check out the demos.

For trouble shooting tips scroll to the end of the page for the common issues we've found. This section will be updated as we receive feedback. If you have any feedback, good or bad, please email us directly at ycle@codeweavers.net

This is a beta release and is therefore open to small bugs and issues. If you find that the calculation is not returning try clearing the cookies for http://embedded.yourcarloan.co.uk, as the deposit, term and annual mileage all use cookies.

Please report any issues or bugs to ycle@codeweavers.net

Demo Implementations

We've tested our own beta by building some examples from compiled HTML taken from our client's sites. On average, these implementations took us around 20 minutes, and involved the steps as detailed below. Feel free to check the source code, and have a play around to see what the system should look like.

• Heartlands Ford

Setup

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

<script type="text/javascript" src="http://embedded.yourcarloan.co.uk/js.mvc" ></script>

<link type="text/css" href="http://embedded.yourcarloan.co.uk/css.mvc" rel="stylesheet"/>

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.

<script>new YcleCalculation('Dealer Name');</script>

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:

<script>new YcleCalculation('Dealer Name', { rateType:ycleRateType.type, rate:rate } );</script>

• 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

<span class="ycleCashPrice" rel="100099" />

<span class="ycleRegDate" rel="20070911" />

Supplying The Values

• rel attribute
• title attribute
• element value
• element innerHTML

Examples are supplied below:

<span class="ycleCashPrice" rel="100099" />

<span class="ycleCashPrice" title="100099" />

<input class="ycleCashPrice" value="100099" />

<div class="ycleCashPrice">100099</div>

<td class="ycleCashPrice">100099</td>

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

<span class="ycleCurrentMileage" rel="12000" />

<span class="ycleCapCode" rel="POBO272452RPIM 3" />  

<span class="ycleCapCode" rel="35137" />

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.

<span class="ycleRegNumber" rel="PJ56HLE" />

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:

Registration Date

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

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 .)

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)

Registration Number

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

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

<script src="http://embedded.yourcarloan.co.uk/js.mvc"></script>

<script src="http://jquery.com/src/latest/"></script>

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

<script src="http://embedded.yourcarloan.co.uk/js.mvc"></script>

<script src="http://dojo/src/latest/"></script>

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.

<a class="lightview" href="/path/to/image"></a> 

Product Support Areas

• Web Services
• XML / SOAP Webservices


• YourCarLoan
• Admin
• Embedded
• Linked
• Proposal


• Insurance
• Motor Insurance
• Gap Insurance


• Additional Support
• Frequently Asked Questions
• Remote Support Tool

Top Solutions

Contact Support

Visit our HelpDesk and Knowledgebase

support@codeweavers.net

Telephone: 0870 443 0888