AGB Bestätigung farblich hervorheben

Hallo, in meinem noch laufenden xtc Shop habe ich die Bestätigung der AGB im checkout farblich abgesetzt. Rot für nicht bestätigt, beim Setzen des Häckchens in der Checkbox wird der Text dann grün. Ist zwar letztlich nur „Spielerei“, aber sieht toll aus. Könnte das jemand auch für Shopware umsetzen? Danke und Gruß Frank Gesendet von meinem GT-I9100 mit Tapatalk 2

Hallo, ja das wird eigentlich schon so umgesetzt, mehr oder weniger schön. Im oberen Bereich wird dann eine Fehlermeldung ausgegeben. Man könnte aber auch schon vor einem möglichen Fehler das farblich hervorheben und bei erfolgreichem anklicken der AGBs die Farbe wieder wegmachen. Ich denke mal das ist eher ein Template-Design / jQuery Thema. Gruss.

Hallo, ja, könnte man auch als Design Thema betrachten. Ich habe das im Shop mit javascript realisieren lassen. Sollte bei Shopware so auch möglich sein. Leider weiß ich nicht, wo ich da ansetzen muss. Gruß Gesendet von meinem GT-I9100 mit Tapatalk 2

in frontend/checkout/confirm.tpl bei den AGBs eine Box oder/und mit css-klasse herumbauen. Diese mit css farblich gestalten. Mit jQuery dann abhorchen (eventlistener) ob sich bei der Checkbox der AGBs was geändert hat. Voila :slight_smile: Je Nachdem wie gut deine Kenntnisse in jQuery und Template sind. Da finden wir schon ne Lösung.

Na ja, Kenntnisse in jquery/javascript sind praktisch nicht vorhanden. Ich kann etwas html/css, aber das war es dann leider auch schon :cry: Wenn es dann aber komplex wird, verstehe ich auch nur noch Bahnhof. Bin schon über 40, da ist es nicht mehr so einfach Shopprogrammierung zu lernen, besonders nicht, wenn ich das noch neben meinem Beruf und Familie mache. :oops: Ich bin da leider auf die Gutmütigkeit und Hilfsbereitschaft der Community Mitglieder angewiesen. Soweit dazu… Den Code in confirm.tpl habe ich gefunden, [code]

{if !{config name=‘IgnoreAGB’}} {/if} {* Additional hidden input for IE11 fix empty post body *} {s name=“ConfirmTerms”}{/s}
[/code] aber mit Experimentieren komme ich nicht weiter. Entweder ist die Farbe immer nur grün, oder immer nur rot, oder ich habe dann 2 Checkboxen etc. etc. Gruß

Hi, ja wir machen das alle neben dem Job und Familie :stuck_out_tongue: Die Funktion sollte ungefähr so aussehen: <script type="text/javascript"> $("#sAGB").next("label").css("background","red") //rot checkbox leer, standard $("#sAGB").change(function(){ if ($("#sAGB").prop("checked")){ $("#sAGB").next("label").css("background","green") //grün checkbox gesetzt }else{ $("#sAGB").next("label").css("background","red") //rot checkbox leer }; }); </script> Gruss.

1 „Gefällt mir“

Hallo brettvormkopp, würdest Du mir hier bitte noch mal weiter helfen? Der Code alleine reicht ja nicht um die Funktion anzustoßen, da fehlt ja noch in der confirm.tpl der “Anstoß” ? Ich wäre Dir sehr dankbar, wenn Du dir noch mal die Zeit nimmst und das komplettierst. Gruß

Kann mir hier jemand bei der Komplettierung helfen, stecke in der Umsetzung fest! :frowning: Danke und Gruß Frank

Die confirm.tpl brauchst du nicht zu bearbeiten, das hat damit ja nichts zu tun. Du willst ja nur dynamisch was am Style ändern! Um die Idee des Vorposters einmal etwas ordentlich zu machen … JavaScript $(function () { var agbCheckbox = $("#sAGB"); if (typeof agbCheckbox !== 'undefined') { var agbLabel = $(".agb\_accept label.chklabel"); if (typeof agbLabel !== 'undefined') { $(agbCheckbox).change(function(){ $(agbLabel).toggleClass("active"); }); } } }); CSS .agb\_accept label.chklabel.modal\_open { background-color: #e1540f; } .agb\_accept label.chklabel.modal\_open.active { background-color: #64CF1D; } Wie du eigene CSS-Klassen mit den normalen überschreiben kannst oder JS in dein Template bekommst ist ausführlich im Wiki beschrieben, das kopiere ich jetzt nicht :wink: Also, JS ändert nur eine Zusatzklasse des Labels, Gestaltung bleibt ordentlich in deiner CSS. Dabei änderst du z.B. die grundsätzliche Farbe des Labels, und die mit der Zusatzklasse. Funktioniert, ob das praktikabel und schön ist, ist eine andere Frage :wink: Und: Alter und Familie zieht hier nicht, das haben glaube ich auch die meisten hier :smiley: Viel Erfolg, Niklas

1 „Gefällt mir“

Vielen Dank Niklas :thumbup: Mit css komme ich klar, javascript bereitet mir da schon erhebliche Kopfschmerzen. Nun ja, neben Familie und Beruf ist sicher bei den meisten so, aber es gibt auch Leute, die so etwas tatsächlich gelernt haben :wink: Danke sehr und Gruß Frank

Ok, ist mir schon peinlich, aber das javascript wird nicht geladen. Ich habe es so in der header.tpl eigebunden: {\*{block name="frontend\_index\_header\_javascript\_jquery" append} <script type="text/javascript" src="%7Blink%20file='frontend/_resources/javascript/agb.js'%7D"></script>{/block}\*} und den css Code in meine stylesheet eingefügt. Das css funktioniert soweit, dass der Hintergrund erscheint, sonst nichts. Wie gesagt, jaascript ist leider nicht mein Ding :oops: Gruß

Toll, wie doof muss man sein, hatte es selbst ausdokumentiert, läuft!!! :quite: Allerdings nur für die Änderung der Textfarbe: .agb\_accept label.chklabel.modal\_open { color: #e1540f} .agb\_accept label.chklabel.modal\_open.active { color: #64CF1D} Gruß Frank

Ich dachte, diesen wolltest Du dabei ändern … Wenn Du den ganzen Bereich haben willst, musst Du eben den höheren Container nehmen. Benutz zukünftig am besten Chrome und den Inspector, dann kannste ganz schnell herausfinden, wie welcher Bereich heißt und verschachtelt ist. Also, zum Verständnis: Du willst jetzt nicht nur das Label farbig ändern, sondern den ganzen Block. Deswegen selektierst du im JS einen anderen Div (Zeile 7): $(function () { var agbCheckbox = $("#sAGB"); if (typeof agbCheckbox !== 'undefined') { var agbLabel = $(".agb\_accept"); if (typeof agbLabel !== 'undefined') { $(agbCheckbox).change(function(){ $(agbLabel).toggleClass("active"); }); } } }); Da jetzt .agb_accept mit der .active Klasse erweitert wird, müssen die Styles nicht mehr dem label zugewiesen werden, sondern der .agb_accept .agb\_accept { background-color: #e1540f; } .agb\_accept.active { background-color: #64CF1D; } Dann kannste der .agb_accept direkt noch padding geben (usw) damit das nicht mehr ganz so Käse aussieht, und ich glaube dann hast Du was du willst :wink: Schöne Grüße, Niklas

Hallo Niklas, vielen Dank noch mal für deine Hilfe! :thumbup: Da hatte ich mich im Post wohl nicht ganz klar ausgedrückt. Ich wollte nicht den ganzen Block ändern, nur die Textfarbe! Da ist dein erster Entwurf schon absolut richtig (bis auf die background-color, da hab ich nur color draus gemacht und fertig). Ich habe es nun so, wie es sein soll. Textfarbe rot, wenn AGB nicht gechecked, Textfarbe grün, wenn Haken drin. Chrome mit Inspektor und Firefox mit Firebug sind sowieso unabdingbar und benutze ich selbstverständlich. Viele Grüße Frank

Dann reicht ja mein erster Post und statt der background-color eben color.

Hallo, da hab ich doch noch mal eine Frage. Das javascript wird so wie es ist auf allen Seiten geladen. Dies ist aber nicht nötig. Wie wird das javascript nur auf der Seite checkout/confirm geladen? Mit meiner try & decide Technik komme ich da nicht weiter. Bisher habe ich folgendes versucht: neue Datei confirm.tpl angelegt in frontend/checkout: {extends file='parent:frontend/checkout/confirm.tpl'} {block name="frontend\_index\_header\_javascript\_jquery" append} <script type="text/javascript" src="%7Blink%20file='frontend/_resources/javascript/agb.js'%7D"></script>{/block} Der Code wird lt. Seitequelltext geladen, läuft aber nicht. Danke und Gruß Frank

Hat sich erledigt, lag am lokalen Testshop. Live funktioniert das Ganze. Datei wie vorher erwähnt angelegt und folgenden Code erstellt (css auch “ausgelagert”). {extends file='parent:frontend/checkout/confirm.tpl'} {block name="frontend\_index\_header\_javascript\_jquery" append} <script type="text/javascript" src="%7Blink%20file='frontend/_resources/javascript/agb.js'%7D"></script>{/block} {block name="frontend\_index\_header\_css\_screen" append} <link type="text/css" media="screen, projection" rel="stylesheet" href="%7Blink%20file='frontend/_resources/styles/agb.css'%7D">{/block} Nun wird agb.js nur auf der checkout Seite geladen. Gruß

Wieder komme ich hier nicht weiter, wie muss die Umsetzung für Shopware 5 aussehen? Bitte um Hilfe. Danke und Gruß Frank