IBAN converter materials - WEBSALE Dokumentation

The IBAN converter appears as a layer over the form in which the buyer enters their bank details, and calculates the IBAN from the account number and bank code. This page contains the style template for this layer and explains the expand/collapse function for the additional fields. How to integrate the converter, which classes the tool expects in the markup, and which settings it supports is described on the guide page for direct debit. Guide: Direct debit, IBAN converter for entering bank details

The style template

Add these rules to your shop’s stylesheet. They define the appearance of the layer and the fields within it.

Style rules for the IBAN converter

.ibanConverter {
	position: absolute;
	width: 715px;
	height: 420px;
	border: 2px solid #CCCCCC;
	background: #fff;
	padding: 20px 20px 20px 20px;
	box-shadow: 0 0 20px 0px #ddd;
	}

.ibanConverter .column_left,
.ibanConverter .column_right {
	float: left;
	width: 48%;
	}

.ibanConverter .column_right {
	float: right;
	}

.ibanConverter .subheadline {
	padding: 7px 0px;
	display: block;
	color: #C00418;
	margin-top: 0;
	}

.ibanConverter label {
	width: 110px;
	}

.ibanConverter select,
.ibanConverter input[type="text"] {
	width: 210px;
	}

.ibanBuild,
.ibanAssume {
	background: #C00418;
	border: 1px solid #C00418;
	color: #fff;
	float: right;
	margin: 15px 0px 0px 0px;
	padding: 5px 5px 5px 5px;
	clear: both;
	width: 200px;
	text-align: center;
	}

.ibanConverterOpen,
.ibanClose {
	color: #C00418;
	font-size: 12px;
	font-weight: bold;
	text-align: right;
	text-decoration: underline;
	cursor: pointer;
	}

.ibanAccountNumber,
.ibanBankCode,
.ibanAgency,
.ibanCheckDigit,
.ibanAccountType,
.ibanRegionCode,
.ibanField {
	height: 20px;
	border-bottom: 1px dotted #E3E3E3;
	padding: 6px 4px;
	}

.clear_both {
	clear: both;
	}

/* Aufklappfunktion für die Zusatzinformationen */
.accordion a.acc_header,
.ibanConverter .subheadline {
	cursor: pointer;
	display: block;
	color: #C00418;
	padding: 7px 0px 7px 0px;
	margin-top: 0;
	text-decoration: none;
	border-top: 1px dotted #E3E3E3;
	}

.accordion a.acc_header_1 {
	border-top: none;
	}

.accordion div.acc_body {
	padding: 10px 10px 20px 0px;
	}

The layer has a fixed width of 715 and a fixed height of 420 pixels. On narrow screens, it extends past the edge, and for a country with many additional fields, the height is not sufficient. Replace the width with max-width and omit the height before you adopt the template.

Which classes are styled here

Class	Element
`ibanConverter`	the layer as a whole
`ibanConverterOpen`	the element that opens the layer
`ibanClose`	the element that closes it
`ibanBuild`	the button for calculating
`ibanAssume`	the button for applying
`ibanAccountNumber`	the field for the account number
`ibanBankCode`	the field for the bank code
`ibanAgency`	the field for the branch
`ibanCheckDigit`	the field for the check digit
`ibanAccountType`	the field for the account type
`ibanRegionCode`	the field for the region code
`ibanField`	the field with the result

These names are the tool’s defaults. Each of them can be renamed via a parameter, in which case the stylesheet must be updated as well. The list of parameters is on the guide page.

The template also styles column_left, column_right, subheadline, and clear_both. These four classes do not belong to the tool, but to the sample markup the template was originally written for: a two-column layer with subheadings.The markup on the guide page is single-column and does not need them. If you adopt it as is, these four rules have no effect. This note has been added here.

The template contains no rules for the three areas ibanStep1, ibanStep2, and ibanStep3, or for ibanCountry and ibanResult. The tool itself shows and hides these areas. If you want to give them spacing or borders, add the rules.

The expand/collapse function

For countries with many additional fields, the explanations for the individual fields can be expanded and collapsed. The previous documentation supplies a JavaScript file named jquery.accordion.js for this purpose. This is the jQuery plugin Accordion 1.6 by Jörn Zaefferer from 2007, MIT and GPL. It does not come from WEBSALE, is no longer maintained by its author, and has long since been merged into jQuery UI.


File name in the shop	`jquery.accordion.js`
What it is	jQuery Accordion 1.6, Jörn Zaefferer, 2007
License	MIT and GPL
Successor	the Accordion widget in jQuery UI

For a new integration, use the Accordion widget from jQuery UI, which your shop already includes, instead of this file from 2007. You assign the class names in the stylesheet above, acc_header, acc_header_1, and acc_body, yourself.If your shop already includes jQuery UI and you load this file in addition, the two overwrite each other.

The stylesheet above already contains the three rules for the expand/collapse function. You only need them if you actually make the additional fields expandable. Reference: WEBSALE JavaScript library

Compared to the previous documentation, three issues in the template have been corrected: a missing closing semicolon after width: 48%, the inconsistent indentation from mixed tabs and spaces, and the typo “Acordionfunktion” in the comment.

​The style template

​Which classes are styled here

​The expand/collapse function

The style template

Which classes are styled here

The expand/collapse function