Guten Abend zusammen!
Die bisherigen Module waren immer sehr viel Arbeit.
Außerdem bin ich kein freund von core-änderungen und schließe das basteln an manchen Dateien sogar komplett aus
ging hier zwar "nur" um button outputs, aber nach jedem Update die Änderungen wiederherzustellen ist mir doch etwas zu aufwändig.
Meine vorrübergehende Lösung besteht ausschließlich auf
JQuery und CSS.
Würde gerne ein paar Augen drüberschauen lassen, getestet habe ich schon - es kann aber sein, dass mir evtl. weitere Button-Elemente entgangen sind. Testen bitte also vorerst nicht auf euren Live-Shops
Ausgehen werde ich hier von tpl_modified (Meine Version aktuell 2.0.2.1)
Also das ganze sieht bisher so aus: Man navigiere zur templates/tpl_modified/javascript/general_bottom.js.php und füge am ENDE der Datei folgenden Code ein:
<script type="text/javascript">
// START Ersetzen von image-buttons durch submit
$('input[type=image]').each(function (index, value){
var altAttr = $(this).attr("alt");
$(this).removeAttr('src').attr('type','submit').attr('value', altAttr).addClass('btn btn-primary');
});
// ENDE Ersetzen von image-buttons durch submit
// START Weitere Buttons (Verlinkte Bilder => werden zu input-elementen umgewandelt)
$('.button_left > a > img').each(function (index, value){
var altAttr = $(this).attr("alt");
$(this).removeAttr('src').attr('type','button').attr('value', altAttr).addClass('btn btn-primary');
// New type of the tag
var replacementTag = 'input';
var outer = this.outerHTML;
// Replace opening tag
var regex = new RegExp('<' + this.tagName, 'i');
var newTag = outer.replace(regex, '<' + replacementTag);
// Replace closing tag
regex = new RegExp('</' + this.tagName, 'i');
newTag = newTag.replace(regex, '</' + replacementTag);
$(this).replaceWith(newTag);
});
$('.button_right > a > img').each(function (index, value){
var altAttr = $(this).attr("alt");
$(this).removeAttr('src').attr('type','button').attr('value', altAttr).addClass('btn btn-success');
// New type of the tag
var replacementTag = 'input';
var outer = this.outerHTML;
// Replace opening tag
var regex = new RegExp('<' + this.tagName, 'i');
var newTag = outer.replace(regex, '<' + replacementTag);
// Replace closing tag
regex = new RegExp('</' + this.tagName, 'i');
newTag = newTag.replace(regex, '</' + replacementTag);
$(this).replaceWith(newTag);
});
$('.checkout_button_right > a > img').each(function (index, value){
var altAttr = $(this).attr("alt");
$(this).removeAttr('src').attr('type','button').attr('value', altAttr).addClass('btn btn-success');
// New type of the tag
var replacementTag = 'input';
var outer = this.outerHTML;
// Replace opening tag
var regex = new RegExp('<' + this.tagName, 'i');
var newTag = outer.replace(regex, '<' + replacementTag);
// Replace closing tag
regex = new RegExp('</' + this.tagName, 'i');
newTag = newTag.replace(regex, '</' + replacementTag);
$(this).replaceWith(newTag);
});
$('.lb_buttons > a:first-of-type > img').each(function (index, value){
var altAttr = $(this).attr("alt");
$(this).removeAttr('src').attr('type','button').attr('value', altAttr).addClass('btn btn-primary');
// New type of the tag
var replacementTag = 'input';
var outer = this.outerHTML;
// Replace opening tag
var regex = new RegExp('<' + this.tagName, 'i');
var newTag = outer.replace(regex, '<' + replacementTag);
// Replace closing tag
regex = new RegExp('</' + this.tagName, 'i');
newTag = newTag.replace(regex, '</' + replacementTag);
$(this).replaceWith(newTag);
});
// ENDE Weitere Buttons (Verlinkte Bilder => werden zu input-elementen umgewandelt)
</script>
Die dazuhörigen JQuery Funktionen habe ich mir zusammengesucht, weiß leider nicht genau ab welcher JQuery Version das ganze läuft - Ich persönlich habe JQuery 3.0.0 und dazu noch jquery-migrate 1.4.1 laufen. Grundsätzlich ersetze ich via JQuery die attribute (z.b. "type=image" => type="submit"), entferne einige unnötige (z.b. src="buttonbildpfad.gif"). Verlinkte <img> buttons ersetzte ich durch inputs(type button) und übernehme die vorherigen Attribute (title, alt etc.) - für die fehlende Buttonbeschriftung verwende ich das value-attribut und nehme den Wert aus dem alt-attribut. Zusätzlich werden dann natürlich die Klassen für die Buttonstyles hinzugefügt.
Als CSS-Klassen habe ich vorerst aus Faulheit die Bootstrap-Klassen verwendet, da es ohnehin bereits bei mir verbaut ist. Wer diese nicht hat - einfach folgendes CSS in eurem Stylesheet hinzufügen:
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
color: #333;
text-decoration: none;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.btn-primary:focus,
.btn-primary.focus {
color: #fff;
background-color: #286090;
border-color: #122b40;
}
.btn-primary:hover {
color: #fff;
background-color: #286090;
border-color: #204d74;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
color: #fff;
background-color: #286090;
border-color: #204d74;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
color: #fff;
background-color: #204d74;
border-color: #122b40;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-success:focus,
.btn-success.focus {
color: #fff;
background-color: #449d44;
border-color: #255625;
}
.btn-success:hover {
color: #fff;
background-color: #449d44;
border-color: #398439;
}
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
color: #fff;
background-color: #449d44;
border-color: #398439;
}
.btn-success:active:hover,
.btn-success.active:hover,
.open > .dropdown-toggle.btn-success:hover,
.btn-success:active:focus,
.btn-success.active:focus,
.open > .dropdown-toggle.btn-success:focus,
.btn-success:active.focus,
.btn-success.active.focus,
.open > .dropdown-toggle.btn-success.focus {
color: #fff;
background-color: #398439;
border-color: #255625;
}
(Habe ich mal aus bootstrap übernommen und nur die beiden bei mir verwendeten Button-styles eingefügt.) Zu gegebener Zeit kann ich hier auch nochmal passendere Buttonstyle nachreichen.
Es ist noch nicht perfekt und ich bin mir auch nicht ganz sicher ob es eine gute Lösung ist das über Jquery zu machen - aber es
erfüllt seinen Zweck bisher 
. Ich möchte aber euch aber trotzdem gerne nochmal drüber schauen lassen.
Eventuell ja auch ein guter Ansatz zur CSS-Button Lösung.
:
