Darstellungsanpassungen mit HTML5-Tags

erstellt: 1. Oktober 2015, zuletzt geändert: 1. Oktober 2015 unter Tutorials

Ab der wpShopGermany-Version 3.9 wurden HTML5-Tags verwendet. Abhängig vom Theme kann es dadruch im Checkout zu Darstellungsproblemen kommen. Betroffen sind hierbei die Eingabebereiche „Telefon“, „Fax“ und „Postleitzahl“.

Ausgangssituation

Problem analysieren

Anhand des Standardthemes Twenty Fifteen wird hier kurz die Vorgehensweise erläutert, um die Darstellungsprobleme zu lösen. Eine standartisierte Lösung von Seiten des wpShopGermany kann leider nicht angeboten werden, da die Darstellung von Theme zu Theme verschieden sein kann.

Wie zu erkennen ist, werden die Eingabebereiche „Telefon“, „Fax“ und „Postleitzahl“ wesentlich schmaler angezeigt (im Vergleich zu den restlichen Eingabebereichen).

 

Schritt 1

Input [type= „number“]

Wirft man einen Blick in die Formatierung des Themes, erkennt man, dass für jedes Eingabefeld der entsprechende Type hinterlegt ist.

Für das Eingabefeld „E-Mail Adresse:“ ist input[type=“email“] hinterlegt.

Für das Eingabefeld „Name:“ ist input[type=“text“] hinterlegt.

Nun muss für das Eingabefeld „Postleitzahl:“ händisch ein input[type=“number“] angelegt werden.

 

Schritt 2

Input[type= „tel“]

Wie in den Screenshots zu sehen ist, gleichen sich die Zeilenhöhen der Eingabebereiche automatisch an.

Nun müssen für das Eingabefeld „Tel.:“ und für das Eingabefeld „Fax:“ händisch ein input[type=“tel“] angelegt werden.

Aus dem letzten Screenshot ist erkennbar, dass nun alle Felder korrekt angezeigt werden.

Die Änderungen werden in der style.css des Themes getätigt.

 

Input[type= „email“]

Von dem hier genutzten Standardtheme Tweenty Fifteen wurde bereits das input[type=“email“] beachtet, womit die Formatierung des Eingabefeldes „E-Mail Adresse:“ ordnungsgemäß angelegt wurde. In Kooperation mit anderen Themes muss dieser Schritt unter Umständen nachgeholt werden.

Dazu muss für das Eingabefeld „E-Mail Adresse:“ händisch ein input[type=“email“] angelegt werden.

 

Ausnahmen

Die Auswahl des Landes (Selectbox) muss hierbei über die frontend.css im Shop angelegt bzw. verändert werden.

Darstellungsanpassungen mit HTML5-Tags: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
2,00 von 5 Sternen, basieren auf 1 abgegebenen Stimmen.
Loading...

Dein Kommentar (KEINE Supportanfrage):

Supportanfragen werden gelöscht oder nicht frei gegeben.

Diese beantworten wir persönlich, gern und schnell in unserem Support-Forum

Bitte respektiere das. Danke!