Styles for customer and addresses - WEBSALE Dokumentation

WEBSALE V8s automatically generates HTML code for many functions and tags. You control its appearance with CSS classes that the shop assigns as fixed names. This page lists the classes related to the customer account and address entry. Two mechanisms come up again and again: fixed class names for generated tables and selection lists, and error classes that the shop only appends when an error occurs. Guide: CSS styles On the ws_login.htm template, you don’t work with fixed classes but with error class tags. You can add these to any input field. If an error occurs, the tag generates the string _error; otherwise it generates nothing. This field:

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

becomes the following when an error occurs:

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

Which error class tag you use depends on the field. The right column lists the sections in which each tag applies.

Error class tag	Applies in the sections
`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`

The advantage of this notation is that you can fit a base class and an error class into a single attribute. In the example, the result is either input or input_error, and you define both in your stylesheet.

Billing and alternative delivery address

Input

Class	Controls the appearance of
`addr_table`	The entire address table
`addr_tr_1`	First alternating row
`addr_tr_2`	Second alternating row
`addr_td_1`	First column
`addr_td_2`	Second column
`addr_td_3`	Third column
`addr_text_input`	Text input fields
`select_salutation`	Selection list for the salutation
`select_title`	Selection list for the title
`select_country`	Selection list for the country
`select_date_of_birth`	Selection lists for the date of birth
`select_user_def_list`	Selection list for the user-defined fields
`addr_error_table`	Table listing the missing fields
`addr_error_ul`	Heading of the error list, that is, the `ul` element
`addr_error_li`	The individual error, that is, the `li` element

User-defined UserDefList selection lists are deprecated and no longer supported. You don’t need the select_user_def_list class for new shops.

Display

For simply displaying an address that has already been entered, there is a second, smaller set.

Class	Controls the appearance of
`show_addr_table`	The table
`show_addr_tr_1`	First alternating row
`show_addr_tr_2`	Second alternating row
`show_addr_td_1`	First column
`show_addr_td_2`	Second column

Guide: Requesting the billing address, Requesting an alternative delivery address, Selection lists for address data

Bank details

Class	Controls the appearance of
`bank_info_table`	The table
`bank_info_text_header`	Heading or header row
`bank_info_text`	Normal text

Guide: Direct debit, requesting bank details

Credit card data

Class	Controls the appearance of
`ccard_table`	Table of credit card data
`ccard_tr_1`	First alternating row
`ccard_tr_2`	Second alternating row
`ccard_td_1`	First column
`ccard_td_2`	Second column
`ccard_td_3`	Third column

The following classes belong to the direct entry of credit card data in the shop and are deprecated: ccard_text_input_holder, ccard_text_input_number, ccard_text_input_cvcode, select_ccard, select_ccard_validity, ccard_error_table, ccard_error_ul, and ccard_error_li.You don’t need them for new shops. Only include them in your stylesheet if an existing shop still uses them.

Guide: “Credit card” payment method

Multiple customer data

If a customer can store multiple delivery addresses, credit cards, or bank details, WEBSALE V8s generates additional selection lists. The shop sets all of the following classes automatically. The pattern is the same everywhere: for each class there is a second one with the suffix _error that applies when an error occurs.

Multiple delivery addresses

Class	Controls the appearance of
`select_deliv_selection`	Selection of the delivery address
`select_salutation`	Salutation input
`select_title`	Title input
`select_country`	Country input
`select_date_of_birth`	Date of birth input
`select_suffix_list`	Suffix list input
`select_usertype_list`	Customer type input
`select_user_def_list`	User-defined list input, deprecated

Each of these classes has a corresponding error class, that is, select_deliv_selection_error, select_salutation_error, and so on.

The previous documentation does not list an error class for select_usertype_list. All other entries in this group have one.

Multiple credit card data

Class	Controls the appearance of
`select_ccard2_selection`	Selection of the stored credit card

The classes ccard_select, ccard_select_error, ccard_select_validity, and ccard_select_validity_error belong to direct entry in the shop and are deprecated.

Multiple bank details

Class	Controls the appearance of
`select_bank2_selection`	Selection list of saved bank details
`bank2_select_country`	Selection list for the country
`bank2_select_bank`	Selection list for the bank name

Here, too, there are the error classes bank2_select_country_error and bank2_select_bank_error. Guide: Requesting billing and delivery address with multiple customer data

Postal code assistant

The postal code assistant shows suggestions for postal code and city in a separate area. This area has two IDs and several classes.

Type	Name
ID	`ws_plzhelp_suggest_zip`
ID	`ws_plzhelp_suggest_city`
Class	`ws_plzhelp_suggest`
Class	`ws_plzhelp_suggest_close`
Class	`ws_plzhelp_suggest_headline`
Class	`ws_plzhelp_suggest_description`
Class	`ws_plzhelp_suggest_table_div`
Class	`ws_plzhelp_suggest_table`
Class	`ws_plzhelp_suggest_tr_1`
Class	`ws_plzhelp_suggest_tr_2`
Class	`ws_plzhelp_suggest_td_1`
Class	`ws_plzhelp_suggest_td_2`

Unlike the other styles, you get a ready-made template for the postal code assistant. Copy these default styles into your CSS file and adapt them to your design:

#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;
}

Two things stand out in this template that you should keep in mind when adapting it.The close icon is created via content: "\f00d" in the FontAwesome font. If your shop does not use this font, an empty box appears in its place. In that case, replace the rule with a graphic or a character of your own.The class ws_plzhelp_select appears in the template but is not in the list of classes above. It highlights the suggestion currently selected via keyboard or mouse.

Guide: Postal code assistant

Class	Controls the appearance of
`check_address_sharing`	Checkbox for consent to share data with third parties for advertising purposes
`check_tele_marketing`	Checkbox for consent to telephone advertising

Guide: Requesting additional order information

​Login

​Billing and alternative delivery address

​Input

​Display

​Bank details

​Credit card data

​Multiple customer data

​Multiple delivery addresses

​Multiple credit card data

​Multiple bank details

​Postal code assistant

​Advertising consent

Login

Billing and alternative delivery address

Input

Display

Bank details

Credit card data

Multiple customer data

Multiple delivery addresses

Multiple credit card data

Multiple bank details

Postal code assistant

Advertising consent