> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Materialien IBAN-Konverter

> Die Stilvorlage für die Ebene des IBAN-Konverters und die Aufklappfunktion für die Zusatzfelder, mit den Klassen, die das Werkzeug erwartet.

Der IBAN-Konverter legt sich als Ebene über das Formular, in dem der Käufer seine Bankverbindung eingibt, und errechnet die IBAN aus Kontonummer und Bankleitzahl. Diese Seite enthält die Stilvorlage für diese Ebene und erklärt die Aufklappfunktion für die Zusatzfelder.

Wie Sie den Konverter einbinden, welche Klassen das Werkzeug im Markup erwartet und welche Einstellungen es kennt, steht auf der Anleitungsseite zur Lastschrift.

Wegweiser: [Lastschrift, IBAN-Konverter für die Bankdaten-Eingabe](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/lastschrift.md)

## Die Stilvorlage

Übernehmen Sie diese Anweisungen in das Stylesheet Ihres Shops. Sie bestimmen das Aussehen der Ebene und der Felder darin.

> [accordion] Styleanweisungen für den IBAN-Konverter
>
> ```css theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
> .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;
> 	}
> ```

> [!WARNING]
>
> Die Ebene hat eine feste Breite von 715 und eine feste Höhe von 420 Pixeln. Auf schmalen Bildschirmen ragt sie über den Rand hinaus, und bei einem Land mit vielen Zusatzfeldern reicht die Höhe nicht. Ersetzen Sie beide Werte durch `max-width` beziehungsweise lassen Sie die Höhe weg, bevor Sie die Vorlage übernehmen.

### Welche Klassen hier gestaltet werden

| Klasse | Element |
| - | - |
| `ibanConverter` | die Ebene als Ganzes |
| `ibanConverterOpen` | das Element, das die Ebene öffnet |
| `ibanClose` | das Element, das sie schließt |
| `ibanBuild` | der Knopf zum Berechnen |
| `ibanAssume` | der Knopf zum Übernehmen |
| `ibanAccountNumber` | das Feld für die Kontonummer |
| `ibanBankCode` | das Feld für die Bankleitzahl |
| `ibanAgency` | das Feld für die Filiale |
| `ibanCheckDigit` | das Feld für die Prüfziffer |
| `ibanAccountType` | das Feld für den Kontotyp |
| `ibanRegionCode` | das Feld für den Regionalcode |
| `ibanField` | das Feld mit dem Ergebnis |

Die Namen sind die Vorgaben des Werkzeugs. Jeder davon lässt sich über einen Parameter umbenennen, dann muss auch das Stylesheet mitziehen. Die Liste der Parameter steht auf der Anleitungsseite.

> [!NOTE]
>
> Die Vorlage gestaltet zusätzlich `column_left`, `column_right`, `subheadline` und `clear_both`. Diese vier Klassen gehören nicht zum Werkzeug, sondern zu dem Beispiel-Markup, für das die Vorlage einmal geschrieben wurde: eine zweispaltige Ebene mit Zwischenüberschriften.
>
> Das Markup auf der Anleitungsseite ist einspaltig und kommt ohne sie aus. Wenn Sie es so übernehmen, bleiben diese vier Regeln wirkungslos.

Für die drei Bereiche `ibanStep1`, `ibanStep2` und `ibanStep3` sowie für `ibanCountry` und `ibanResult` enthält die Vorlage keine Regeln. Ein- und ausgeblendet werden die Bereiche vom Werkzeug selbst. Wenn Sie ihnen Abstände oder Rahmen geben wollen, ergänzen Sie die Regeln.

## Die Aufklappfunktion

Für Länder mit vielen Zusatzfeldern lassen sich die Erklärungen zu den einzelnen Feldern auf- und zuklappen. Dafür wird eine JavaScript-Datei unter dem Namen `jquery.accordion.js` mitgeliefert.

Dabei handelt es sich um das jQuery-Plugin **Accordion 1.6 von Jörn Zaefferer aus dem Jahr 2007**, MIT und GPL. Es stammt nicht von WEBSALE, wird vom Urheber nicht mehr gepflegt und ist längst in jQuery UI aufgegangen.

| | |
| - | - |
| Dateiname im Shop | `jquery.accordion.js` |
| Was es ist | jQuery Accordion 1.6, Jörn Zaefferer, 2007 |
| Lizenz | MIT und GPL |
| Nachfolger | das Widget Accordion in jQuery UI |

> [!WARNING]
>
> Verwenden Sie für eine neue Integration das Accordion-Widget aus dem jQuery UI, das Ihr Shop ohnehin einbindet, statt diese Datei von 2007. Die Klassennamen im Stylesheet oben, `acc_header`, `acc_header_1` und `acc_body`, vergeben Sie dabei selbst.
>
> Bindet Ihr Shop bereits jQuery UI ein und laden Sie diese Datei zusätzlich, überschreiben sich beide gegenseitig.

Das Stylesheet oben enthält die drei Regeln für die Aufklappfunktion bereits. Sie brauchen sie nur, wenn Sie die Zusatzfelder tatsächlich aufklappbar machen.

Referenz: [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)


## Related topics

- [Lastschrift](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/lastschrift.md)
- [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)
- [Materialien SEPA-Integration](https://dokumentation.websale.de/v8s/materialien/materialien-sepa-integration.md)
- [Materialien Abo-Modul](https://dokumentation.websale.de/v8s/materialien/materialien-abo-modul.md)
- [Materialien Parameterentfernung](https://dokumentation.websale.de/v8s/materialien/materialien-parameterentfernung.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.