Styles für Kunde und Adressen

WEBSALE V8s erzeugt zu vielen Funktionen und Tags automatisch HTML-Code. Dessen Aussehen bestimmen Sie über CSS-Klassen, die der Shop fest vergibt. Diese Seite listet die Klassen rund um das Kundenkonto und die Adresseingabe. Zwei Mechanismen treten dabei immer wieder auf: feste Klassennamen für erzeugte Tabellen und Auswahllisten, und Fehler-Klassen, die der Shop erst im Fehlerfall anhängt. Wegweiser: CSS-Styles

Anmeldung

Auf dem Template ws_login.htm arbeiten Sie nicht mit festen Klassen, sondern mit Error-Klassen-Tags. Jedes Eingabefeld lässt sich damit versehen. Im Fehlerfall erzeugt das Tag die Zeichenfolge _error, sonst nichts. Aus diesem Feld:

<input type="password" name="~WS-NewPW_input~" value="" class="input~WS-NewPW_error~">

wird im Fehlerfall:

<input type="password" name="~WS-NewPW_input~" value="" class="input_error">

Welches Error-Klassen-Tag Sie verwenden, hängt vom Feld ab. Die rechte Spalte nennt die Abschnitte, in denen das jeweilige Tag gilt.

Error-Klassen-Tag	Gilt in den Abschnitten
`WS-UserID_error`	`KnownUser`
`WS-Email_error`	`KnownUser`, `RequestPW`, `SetPassword`
`WS-NewEmail_error`	`NewUser`, `ChangeEmail`, `ForceSet`
`WS-EmailAgain_error`	`ChangeEmail`, `ForceSet`
`WS-PW_error`	`KnownUser`, `ChangeEmail`, `ForceSet`, `ChangePW`
`WS-NewPW_error`	`NewUser`, `ChangePW`, `SetPassword`
`WS-PWAgain_error`	`NewUser`, `ChangePW`, `SetPassword`

Der Vorteil dieser Schreibweise liegt darin, dass Sie eine Grundklasse und eine Fehlerklasse in einem Attribut unterbringen. Im Beispiel entsteht entweder input oder input_error, und Sie definieren beide in Ihrem Stylesheet.

Rechnungs- und abweichende Lieferadresse

Eingabe

Klasse	Steuert das Aussehen von
`addr_table`	die gesamte Adress-Tabelle
`addr_tr_1`	erste alternierende Zeile
`addr_tr_2`	zweite alternierende Zeile
`addr_td_1`	erste Spalte
`addr_td_2`	zweite Spalte
`addr_td_3`	dritte Spalte
`addr_text_input`	Text-Eingabefelder
`select_salutation`	Auswahlliste für die Anrede
`select_title`	Auswahlliste für den Titel
`select_country`	Auswahlliste für das Land
`select_date_of_birth`	Auswahllisten für das Geburtsdatum
`select_user_def_list`	Auswahlliste für die benutzerdefinierten Felder
`addr_error_table`	Tabelle mit der Auflistung der fehlenden Felder
`addr_error_ul`	Überschrift der Fehlerliste, also das `ul`-Element
`addr_error_li`	der einzelne Fehler, also das `li`-Element

Benutzerdefinierte UserDefList-Auswahllisten sind veraltet und werden nicht mehr unterstützt. Die Klasse select_user_def_list brauchen Sie für neue Shops nicht.

Klasse	Steuert das Aussehen von
`show_addr_table`	die Tabelle
`show_addr_tr_1`	erste alternierende Zeile
`show_addr_tr_2`	zweite alternierende Zeile
`show_addr_td_1`	erste Spalte
`show_addr_td_2`	zweite Spalte

Bankverbindung

Klasse	Steuert das Aussehen von
`bank_info_table`	die Tabelle
`bank_info_text_header`	Überschrift beziehungsweise Kopfzeile
`bank_info_text`	normaler Text

Wegweiser: Lastschrift, Bankverbindungen abfragen

Kreditkartendaten

Klasse	Steuert das Aussehen von
`ccard_table`	Tabelle der Kreditkartendaten
`ccard_tr_1`	erste alternierende Zeile
`ccard_tr_2`	zweite alternierende Zeile
`ccard_td_1`	erste Spalte
`ccard_td_2`	zweite Spalte
`ccard_td_3`	dritte Spalte

Die folgenden Klassen gehören zur direkten Erfassung von Kreditkartendaten im Shop und sind veraltet: ccard_text_input_holder, ccard_text_input_number, ccard_text_input_cvcode, select_ccard, select_ccard_validity, ccard_error_table, ccard_error_ul und ccard_error_li.Für neue Shops brauchen Sie sie nicht. Nehmen Sie sie nur in Ihr Stylesheet auf, wenn ein bestehender Shop sie noch verwendet.

Wegweiser: Zahlungsart “Kreditkarte”

Multiple Kundendaten

Wenn ein Kunde mehrere Lieferadressen, Kreditkarten oder Bankverbindungen hinterlegen kann, erzeugt WEBSALE V8s zusätzliche Auswahllisten. Alle folgenden Klassen setzt der Shop automatisch. Das Muster ist überall gleich: Zu jeder Klasse gibt es eine zweite mit dem Zusatz _error, die im Fehlerfall greift.

Multiple Lieferadressen

Klasse	Steuert das Aussehen von
`select_deliv_selection`	Auswahl der Lieferadresse
`select_salutation`	Eingabe der Anrede
`select_title`	Eingabe des Titels
`select_country`	Eingabe des Landes
`select_date_of_birth`	Eingabe des Geburtstags
`select_suffix_list`	Eingabe der Suffixliste
`select_usertype_list`	Eingabe des Kundentyps
`select_user_def_list`	Eingabe der benutzerdefinierten Liste, veraltet

Zu jeder dieser Klassen gibt es die zugehörige Fehlerklasse, also select_deliv_selection_error, select_salutation_error und so fort. Für select_usertype_list gibt es keine Fehlerklasse. Alle übrigen Einträge dieser Gruppe haben eine.

Multiple Kreditkartendaten

Klasse	Steuert das Aussehen von
`select_ccard2_selection`	Auswahl der hinterlegten Kreditkarte

Die Klassen ccard_select, ccard_select_error, ccard_select_validity und ccard_select_validity_error gehören zur direkten Erfassung im Shop und sind veraltet.

Multiple Bankverbindungen

Klasse	Steuert das Aussehen von
`select_bank2_selection`	Auswahlliste der gespeicherten Bankverbindungen
`bank2_select_country`	Auswahlliste für das Land
`bank2_select_bank`	Auswahlliste für den Banknamen

Auch hier gibt es die Fehlerklassen bank2_select_country_error und bank2_select_bank_error. Wegweiser: Rechnungs- und Lieferadresse bei multiplen Kundendaten abfragen

PLZ-Assistent

Der PLZ-Assistent blendet Vorschläge für Postleitzahl und Ort in einem eigenen Bereich ein. Dieser Bereich trägt zwei IDs und mehrere Klassen.

Art	Name
ID	`ws_plzhelp_suggest_zip`
ID	`ws_plzhelp_suggest_city`
Klasse	`ws_plzhelp_suggest`
Klasse	`ws_plzhelp_suggest_close`
Klasse	`ws_plzhelp_suggest_headline`
Klasse	`ws_plzhelp_suggest_description`
Klasse	`ws_plzhelp_suggest_table_div`
Klasse	`ws_plzhelp_suggest_table`
Klasse	`ws_plzhelp_suggest_tr_1`
Klasse	`ws_plzhelp_suggest_tr_2`
Klasse	`ws_plzhelp_suggest_td_1`
Klasse	`ws_plzhelp_suggest_td_2`

Anders als bei den übrigen Styles bekommen Sie für den PLZ-Assistenten eine fertige Vorlage. Kopieren Sie diese Standard-Styles in Ihre CSS-Datei und passen Sie sie an Ihr Design an:

#ws_plzhelp_suggest_zip,
#ws_plzhelp_suggest_city {
   position: absolute;
   background: #fff;
   z-index: 99;
   border: solid 1px #cccccc;
}

.ws_plzhelp_suggest_close {
   position: absolute;
   top: 0;
   right: 0;
   height: 16px;
   width: 16px;
   cursor: pointer;
}

.ws_plzhelp_suggest_close:after {
   position: relative;
   font-family: FontAwesome;
   content: "\f00d";
   font-size: 14px;
   line-height: 16px;
   font-weight: bold;
   color: #555555;
}

.ws_plzhelp_suggest_headline {
   color: #337ab7;
   font-weight: bold;
   font-size: 16px;
   padding: 10px 5px 10px 10px;
}

.ws_plzhelp_suggest_description {
   padding: 0px 10px 10px 10px;
   color: #000000;
}

.ws_plzhelp_suggest_table {
   width: 100%;
}

.ws_plzhelp_suggest_table_div {
   height: 140px;
   margin-bottom: 10px;
   overflow-y: scroll;
}

.ws_plzhelp_suggest_tr_1 {
   background-color: #f5f5f5;
}

.ws_plzhelp_suggest_td_1,
.ws_plzhelp_suggest_td_2 {
   padding-left: 10px;
   padding-right: 10px;
}

.ws_plzhelp_suggest_table tr:hover,
.ws_plzhelp_select {
   background-color: #337ab7 !important;
   color: white;
   cursor: pointer;
}

Zwei Dinge fallen an dieser Vorlage auf, die Sie beim Anpassen im Blick behalten sollten.Das Schließkreuz entsteht über content: "\f00d" in der Schriftart FontAwesome. Verwendet Ihr Shop diese Schriftart nicht, erscheint an der Stelle ein leeres Kästchen. Ersetzen Sie die Regel dann durch eine Grafik oder ein eigenes Zeichen.Die Klasse ws_plzhelp_select kommt in der Vorlage vor, steht aber nicht in der Liste der Klassen oben. Sie markiert den gerade per Tastatur oder Maus gewählten Vorschlag.

Wegweiser: PLZ-Assistent

Zustimmung zur Werbung

Klasse	Steuert das Aussehen von
`check_address_sharing`	Kontrollkästchen für die Einwilligung zur Datenweitergabe an Dritte zu Werbezwecken
`check_tele_marketing`	Kontrollkästchen für die Einwilligung zur Telefonwerbung

Wegweiser: Weitere Informationen zur Bestellung abfragen

Referenz

Anmeldung

Rechnungs- und abweichende Lieferadresse

Eingabe

Anzeige

Bankverbindung

Kreditkartendaten

Multiple Kundendaten

Multiple Lieferadressen

Multiple Kreditkartendaten

Multiple Bankverbindungen

PLZ-Assistent

Zustimmung zur Werbung

​Anmeldung

​Rechnungs- und abweichende Lieferadresse

​Eingabe

​Anzeige

​Bankverbindung

​Kreditkartendaten

​Multiple Kundendaten

​Multiple Lieferadressen

​Multiple Kreditkartendaten

​Multiple Bankverbindungen

​PLZ-Assistent

​Zustimmung zur Werbung

Anmeldung

Rechnungs- und abweichende Lieferadresse

Eingabe

Anzeige

Bankverbindung

Kreditkartendaten

Multiple Kundendaten

Multiple Lieferadressen

Multiple Kreditkartendaten

Multiple Bankverbindungen

PLZ-Assistent

Zustimmung zur Werbung