<button> statt <input> für Warenkorb-Button

[MKJ]

Hat schon jemand den <input> Warenkorb-Button gegen <button> ausgetauscht? Der <button> Tag bietet an sich viel mehr Möglicheiten und müsste genau so funktionieren. Falls das jemand aber schon erfolglos versucht hätte, könnte ich mir die Arbeit sparen.

Für die Entwickler: Falls das klappt, wäre das eine durchaus sinnvolle Änderung, weil ein einheitliches Styling der Buttons beim Shop und dem Rest der Seite natürlich ein echtes Plus wäre.

Gruß, Mike

[daschmi]

Hi MKJ,

Was sind denn die zusätzlichen Möglichkeiten von <button> ?

Bei <button> gibt es soweit ich weiß Unterschiede zwischen den Browsern was und wie abgesendet wird. Wir wollten auch, das der Bestellablauf möglichst noch ohne Javascript auskommt.

Du kannst es aber gern versuchen umzubauen und bei Erfolg hier posten.

Viele Grüße

Daschmi

[MKJ]

Hi MKJ,

Was sind denn die zusätzlichen Möglichkeiten von <button> ?

Bei <button> gibt es soweit ich weiß Unterschiede zwischen den Browsern was und wie abgesendet wird. Wir wollten auch, das der Bestellablauf möglichst noch ohne Javascript auskommt.

Du kannst es aber gern versuchen umzubauen und bei Erfolg hier posten.

Viele Grüße

Daschmi

Hallo Daschmi,

ein wichtiger Unterschied ist, dass der <button> Tag von den Browsern nicht so rigide gestaltet wird. Mit anderen Worten: Man kann damit den Button sehr leicht und flexibel an das sonstige Design anpassen. Das ist beim <input> Tag äußerst mühsam. Hier ist ein sehr guter Artikel dazu. Javascript dürfte für die Funktionalität eigentlich nicht nötig sein. Bin mir allerdings wegen IE unsicher. Werde ich bei Gelegenheit mal testen.

Gruß,

Mike

[MKJ]

Ich habe jetzt auf einer Testseite mal das <input> Element für "Zum Warenkorb hinzufügen" mit <button> ersetzt. Das sieht vielversprechend aus. Zunächst muss man im Template

Code: Alles auswählen

 <input class="wpshopgermany_submit_basket" type="submit" name="submit_basket" title="Zum Warenkorb hinzufügen" value="Zum Warenkorb hinzufügen"/>

mit

Code: Alles auswählen

<button type="submit" class="sbutton ImgLink" onclick="this.blur();" name="submit_basket"><span>Zum Warenkorb hinzufügen</span></button>

ersetzen. Die Class kann natürlich jeder selbst bestimmen. Der onclick ist nur für den Internet Explorer und hat nichts mit der Shop-Funktion zu tun. Alles Weitere ist reines CSS. Das kann man halten und gestalten wie man will. Ich habe Sliding Doors verwendet, um für alle Buttons der Seite ein einheitliches Design zu bekommen. Gleichzeitig muss ich nicht für jeden Text eine neue Graphik machen, weil der Hintergrund dynamisch an den Text angepasst wird. Grundlage war dieser Artikel.

Hier ist mein CSS für alle Sliding-Doors-Buttons der Seite:

Code: Alles auswählen

button { 
border:0; 
cursor:pointer; 
text-align:center; 
}

a.sbutton, 
button.sbutton {
background:transparent url(/wp-content/themes/twentyten/images/bg_button_a.gif) no-repeat scroll top right;
color:#444;
display:block;
float:right;
font:normal 12px arial, sans-serif;
height:24px;
margin-right:0px;
margin-bottom:24px;
padding-right:10px;
text-decoration:none;
}

a.sbutton:hover, 
button.sbutton:hover {
color:#b40009;
}

a.sbutton span, 
button.sbutton span {
background:transparent url(/wp-content/themes/twentyten/images/bg_button_span.gif) no-repeat;
display:block;
line-height:14px;
padding:5px 0 5px 12px;
} 

a.sbutton:active, 
button.sbutton:active {
background-position:bottom right;
color:#000;
outline:none;
}

a.sbutton:active span, 
button.sbutton:active span {
background-position:bottom left;
padding:6px 0 4px 10px;
}

button.sbutton {
position:absolute;
right:10px;
bottom:0px;
} 

Hier der Vergleich von alt und neu:



Das Design kann natürlich auch ganz anders aussehen. Entscheidend ist die Homogenität und die völlig Unabhängigkeit vom Browser. Der Internet Explorer muckt zwar noch rum und setzt das CSS falsch um, aber das kennt man ja und hat nichts mit der Methode selbst zu tun. Natürlich kann man auch nach Belieben Icons im Button verwenden. Dann muss man das CSS allerdings erweitern.

Hier ist übrigens der geänderte Paypal Button:



Gruß, Mike

[MKJ]

Ich habe jetzt die meisten <input> Tags auf <button> umgestellt. Funktioniert problemlos. Das CSS ist vereinfacht und funktioniert mit sehr geringen Unterschieden in allen gängigen Browsern. Nur Opera <9.5 macht Zicken, aber damit mus man halt leben.

Hier ein Beispiel:




Das Ganze kommt mit nur einem Bild aus:



Beim CSS Stylesheet sind natürlich einige Anpassungen nötig. Hat man das aber einmal gemacht, können alle Buttons mit einem Schlag geändert werden. Und zwar unabhängig vom Browser.

Code: Alles auswählen

button,
a.submitBtn { 
position:relative;
border:0; 
padding:0;
cursor:pointer;
overflow:visible;
}

button::-moz-focus-inner {
border:none;
}

button span,
a.submitBtn span { 
position:relative;
display:block; 
white-space:nowrap;	
}

button.submitBtn,
a.submitBtn { 
padding:0 13px 0 0; 
font-size:13px;
text-align:center; 
background:transparent url(/wp-content/themes/twentyten/images/btn_blue_sprite6.gif) no-repeat right -60px; 
position:absolute;
right:10px;
bottom:10px;
}

button.submitBtn span,
a.submitBtn span {
padding:1px 0 2px 15px; 
height:22px; 
background:transparent url(/wp-content/themes/twentyten/images/btn_blue_sprite6.gif) no-repeat left top; 
color:#fff; 
}

/* nur fuer Firefox */
@-moz-document url-prefix() {
button.submitBtn span {padding:4px 0 2px 15px;}
}

/* nur fuer Chrome und Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
button.submitBtn span {padding:4px 0 2px 15px;}
}

button.submitBtn:hover,
a.submitBtn:hover {
background-position:right -90px; 
}

button.submitBtn:hover span, 
button.submitBtnHover span,
a.submitBtn:hover span {
background-position:0 -30px;
color:#e0e0e0;
}

a.linktokasse {
position:relative;
float:right;
margin:20px -10px 0 0;
}

button.basket_back,
button.basket_next {
position:relative;
}

button.basket_back,
button.basket_next {
position:relative;
}

button.basket_back {
margin-left:8px;
float:left;
}

button.basket_next {
float:right;
margin-right:-10px;
}

Ich fand die orignalen Buttons des Plugin übrigens nicht schlecht, aber auf diese Weise hat man völlige Freiheit und bekommt ein einheitliches Design. Insbesondere bei Seiten, wo Look & Feel wichtig sind, finde ich persönlich Abweichungen im Shop störend, sobald man den Shop betritt.

Mike

[emitremmus]

Hallo,

könntest du mir deine angepasste .css Datei zu kommen lassen.
Ich bin mit CSS nicht ganz so bewandert, aber dein Design gefällt mir sehr und ich würde dann zumindest die Farben noch ändern.

Viele Grüße
emitremmus

[MKJ]

Hallo,

ganz ohne Kenntnisse in CSS sind solche Anpassungen immer etwas heikel. Aber versuchs einfach mal. Hier ist der Code für den Button:

Code: Alles auswählen

<button type="submit" class="submitBtn" name="submit_basket"><span><span>Zum Warenkorb hinzufügen</span></span></button>
<div class="clear"></div>

Hier sind alle CSS Definitionen für meine Sliding Doors Buttons. Ich habe einiges ändern müssen, weil die oben genannte Lösung nicht mit allen Browsern kompatibel war. Auch jetzt gibt es noch geringe Unterschiede in der Interpretation, mit denen ich aber leben kann. Der CSS Code ist noch nicht aufgeräumt, funktioniert aber.

Code: Alles auswählen

a.sbutton {
background:transparent url(/wp-content/themes/twentyten/images/bg_button_a.gif) no-repeat scroll top right;
color:#444;
display:block;
float:right;
font:normal 12px arial, sans-serif;
height:24px;
margin-right:0px;
margin-bottom:24px;
padding-right:10px;
text-decoration:none;
}

a.sbutton:hover {
color:#b40009;
}

a.sbutton span {
background:transparent url(/wp-content/themes/twentyten/images/bg_button_span.gif) no-repeat;
display:block;
line-height:14px;
padding:5px 0 5px 12px;
} 

a.sbutton:active {
background-position:bottom right;
color:#000;
outline:none;
}
button,
a.button,
a.button:link,
a.button:visited {
padding:0 0 0 0;
border:none;
display:block;
cursor:pointer;
text-decoration:none;
outline:none;
white-space:nowrap;
overflow:visible;
}

a.button {
float:right;
margin-top:20px;
}

* html a.button,
* html a.button:link,
* html a.button:visited {
width:1%;
}

button, x:-moz-any-link {
margin:0 0 0 0;
}

*:first-child+html button {
margin:0 3px 0 3px;
}

button span,
a.button span,
a.button:link span,
a.button:visited span,
button2 span,
a.button2 span,
a.button2:link span,
a.button2:visited span {
display:block;
}

button,
a.button,
a.button:link,
a.button:visited,
button2,
a.button2,
a.button2:link,
a.button2:visited {
height:26px;
font-family:"Helvetica Neue", Helvetica, clean, sans-serif;
font-size:13px;
color:#FFFFFF;
background-color:#ffffff;
}

button span,
a.button span,
a.button:link span,
a.button:visited span,
button2 span,
a.button2 span,
a.button2:link span,
a.button2:visited span {
padding:0 10px 0 0;
height:24px;
background:url(/wp-content/themes/twentyten/images/bg_button_right_red.gif) top right;
}

button2 span,
a.button2 span,
a.button2:link span,
a.button2:visited span {
background:url(/wp-content/themes/twentyten/images/bg_button_right_grey.gif) top right;
}

button span span,
a.button span span,
a.button:link span span,
a.button:visited span span,
button2 span span,
a.button2 span span,
a.button2:link span span,
a.button2:visited span span {
padding:0 0 0 12px;
height:24px;
line-height:24px;
background:url(/wp-content/themes/twentyten/images/bg_button_left_red.gif) top left;
}

button2 span span,
a.button2 span span,
a.button2:link span span,
a.button2:visited span span {
background:url(/wp-content/themes/twentyten/images/bg_button_left_grey.gif) top left;
}

button:hover,
a.button:hover,
button2:hover,
a.button2:hover {
color:#d4d4d4;
}

button:active span,
a:active:active span,
button.button_active span,
a.button_active:active span,
button2:active span {
background-position:bottom right;
}

button:active span span,
button2:active span span,
a:active:active span span,
button.button_active span span,
a.button_active:active span span {
background-position:bottom left;
}

button.submitBtn { 
position:absolute;
right:5px;
bottom:10px;
}

button.basket_back,
button.basket_next {
position:relative;
}

button.basket_back {
margin-left:10px;
float:left;
}

button.basket_next {
float:right;
margin-right:-10px;
}

a.button2 {
color:#383838;
display:block;
float:right;
margin-right:0px;
margin-bottom:24px;
padding-right:10px;
text-decoration:none;
cursor:pointer;
}

a.button2:link {
color:#383838;
}

a.button2:visited {
color:#383838;
}

a.button2:hover {
color:#b40009;
}

button:active {
-ms-background-position-x:1px;
}

Im Anhang ist die Graphik, die Du farblich anpassen kannst.
Ich habe bei mir allerdings noch eine PHP-Browserweiche, mit der ich zusätzliche Klassen automatisch erzeuge, um das Feintuning für verschiede Browser zu machen. Das sieht unter Firefox dann z.B. so aus:

Code: Alles auswählen

<html class="gecko ff3 win" dir="ltr" lang="de-DE">

Der Code dafür:

Code: Alles auswählen

<?php
function css_browser_selector($ua=null) {
		$ua = ($ua) ? strtolower($ua) : strtolower($_SERVER['HTTP_USER_AGENT']);		

		$g = 'gecko';
		$w = 'webkit';
		$s = 'safari';
		$b = array();
		
		// browser
		if(!preg_match('/opera|webtv/i', $ua) && preg_match('/msie\s(\d)/', $ua, $array)) {
				$b[] = 'ie ie' . $array[1];
		}	else if(strstr($ua, 'firefox/2')) {
				$b[] = $g . ' ff2';		
		}	else if(strstr($ua, 'firefox/3.5')) {
				$b[] = $g . ' ff3 ff3_5';
		}	else if(strstr($ua, 'firefox/3')) {
				$b[] = $g . ' ff3';
		} else if(strstr($ua, 'gecko/')) {
				$b[] = $g;
		} else if(preg_match('/opera(\s|\/)(\d+)/', $ua, $array)) {
				$b[] = 'opera opera' . $array[2];
		} else if(strstr($ua, 'konqueror')) {
				$b[] = 'konqueror';
		} else if(strstr($ua, 'chrome')) {
				$b[] = $w . ' ' . $s . ' chrome';
		} else if(strstr($ua, 'iron')) {
				$b[] = $w . ' ' . $s . ' iron';
		} else if(strstr($ua, 'applewebkit/')) {
				$b[] = (preg_match('/version\/(\d+)/i', $ua, $array)) ? $w . ' ' . $s . ' ' . $s . $array[1] : $w . ' ' . $s;
		} else if(strstr($ua, 'mozilla/')) {
				$b[] = $g;
		}

		// platform				
		if(strstr($ua, 'j2me')) {
				$b[] = 'mobile';
		} else if(strstr($ua, 'iphone')) {
				$b[] = 'iphone';		
		} else if(strstr($ua, 'ipod')) {
				$b[] = 'ipod';		
		} else if(strstr($ua, 'mac')) {
				$b[] = 'mac';		
		} else if(strstr($ua, 'darwin')) {
				$b[] = 'mac';		
		} else if(strstr($ua, 'webtv')) {
				$b[] = 'webtv';		
		} else if(strstr($ua, 'win')) {
				$b[] = 'win';		
		} else if(strstr($ua, 'freebsd')) {
				$b[] = 'freebsd';		
		} else if(strstr($ua, 'x11') || strstr($ua, 'linux')) {
				$b[] = 'linux';		
		}
				
		return join(' ', $b);
		
}

?>

Das Ganze basiert auf: http://bastian-allgeier.de/css_browser_selector/ Der Code muss ganz oben in die header.php.

Gruß, Mike

[emitremmus]

Hallo,

ah es scheint zu funktionieren, allerdings fehlen mir noch die Buttons im Warenkorb und dann auch im späteren Bestellprozess. In welcher Datei, muss ich dort das <input> ersetzen?

Wo genau werden die letzten beiden von dir geposteten Codes eingefügt?

Wie änder ich die Farbe? Die Graphik ist doch mittig etwas dunkler, als am Rand.

[MKJ]

Die Templates für den Bestellvorgang findest Du in views/Warenkorb. Am besten den Ordner in user_views kopieren und dort die Änderungen vornehmen. Die Graphik kannst Du in Photoshop o.ä. ändern.

Die beiden letzten Snippets nutzen so noch nichts, weil Du zusätzliche CSS-Klassen angeben musst. Ändere erstmal das Design, bis es funktioniert. Danach kannst Du immer noch die Feinheiten tunen. Für die Buttons ist die Weiche nicht unbedingt nötig.

Mike