# AGB Bestätigung farblich hervorheben

**URL:** <https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265>\
**Category:** Shopware 3.5\
**Tags:** programming\
**Created:** [14. Mai 2014 um 02:37 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265 "2014-05-14T02:37:28Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\
**Post date:** [14. Mai 2014 um 02:37 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/1 "2014-05-14T02:37:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)\
**Post date:** [14. Mai 2014 um 08:48 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/2 "2014-05-14T08:48:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\
**Post date:** [14. Mai 2014 um 15:39 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/3 "2014-05-14T15:39:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)\
**Post date:** [14. Mai 2014 um 16:38 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/4 "2014-05-14T16:38:30Z")

</div>

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 🙂 Je Nachdem wie gut deine Kenntnisse in jQuery und Template sind. Da finden wir schon ne Lösung.

---

<div class="post-metadata">

**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\
**Post date:** [14. Mai 2014 um 17:57 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/5 "2014-05-14T17:57:12Z")

</div>

Na ja, Kenntnisse in jquery/javascript sind praktisch nicht vorhanden. Ich kann etwas html/css, aber das war es dann leider auch schon 😢 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ß

---

<div class="post-metadata">

**Author:** ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)\
**Post date:** [14. Mai 2014 um 22:12 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/6 "2014-05-14T22:12:12Z")

</div>

Hi, ja wir machen das alle neben dem Job und Familie 😛 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.

---

<div class="post-metadata">

**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\
**Post date:** [29. Mai 2014 um 11:13 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/7 "2014-05-29T11:13:35Z")

</div>

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ß

---

<div class="post-metadata">

**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\
**Post date:** [21. September 2014 um 21:38 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/8 "2014-09-21T21:38:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TeichDatensysteme](https://avatars.discourse-cdn.com/v4/letter/t/43a26b/32.png) [@TeichDatensysteme](https://forum.shopware.com/u/TeichDatensysteme)\
**Post date:** [22. September 2014 um 14:05 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/9 "2014-09-22T14:05:41Z")

</div>

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 😉 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 😉 Und: Alter und Familie zieht hier nicht, das haben glaube ich auch die meisten hier 😃 Viel Erfolg, Niklas

---

<div class="post-metadata">

**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\
**Post date:** [22. September 2014 um 14:22 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/10 "2014-09-22T14:22:08Z")

</div>

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 😉 Danke sehr und Gruß Frank

---

<div class="post-metadata">

**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\
**Post date:** [23. September 2014 um 16:44 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/11 "2014-09-23T16:44:55Z")

</div>

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ß

---

<div class="post-metadata">

**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\
**Post date:** [23. September 2014 um 16:56 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/12 "2014-09-23T16:56:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TeichDatensysteme](https://avatars.discourse-cdn.com/v4/letter/t/43a26b/32.png) [@TeichDatensysteme](https://forum.shopware.com/u/TeichDatensysteme)\
**Post date:** [24. September 2014 um 09:58 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/13 "2014-09-24T09:58:31Z")

</div>

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 😉 Schöne Grüße, Niklas

---

<div class="post-metadata">

**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\
**Post date:** [24. September 2014 um 10:28 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/14 "2014-09-24T10:28:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TeichDatensysteme](https://avatars.discourse-cdn.com/v4/letter/t/43a26b/32.png) [@TeichDatensysteme](https://forum.shopware.com/u/TeichDatensysteme)\
**Post date:** [25. September 2014 um 10:06 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/15 "2014-09-25T10:06:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\
**Post date:** [11. Februar 2015 um 17:48 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/16 "2015-02-11T17:48:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\
**Post date:** [11. Februar 2015 um 19:04 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/17 "2015-02-11T19:04:10Z")

</div>

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ß

---

<div class="post-metadata">

**Author:** ![ffinkelm](https://avatars.discourse-cdn.com/v4/letter/f/fbc32d/32.png) [@ffinkelm](https://forum.shopware.com/u/ffinkelm)\
**Post date:** [2. Juni 2015 um 00:19 UTC](https://forum.shopware.com/t/agb-bestatigung-farblich-hervorheben/20265/18 "2015-06-02T00:19:36Z")

</div>

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