Contao 4 Crashkurs
Ergebnis 1 bis 25 von 25

Thema: [Vorschlag] cookiebar ohne Erweiterung einsetzen

  1. #1
    Contao-Fan Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    814
    Partner-ID
    6122

    Standard [Vorschlag] cookiebar ohne Erweiterung einsetzen

    Hallo,
    wer in der 4.4.x eine cookiebar ohne Erweiterung einsetzen möchte (jquery muß im Theme aktiviert sein):

    - Download Script von https://github.com/carlwoodhouse/jquery.cookieBar
    - Hier wird nur das Script benötigt

    - Eine Datei cookiebar.css mit folgendem Inhalt erstellen:
    Code:
    #cookiebar {
     box-sizing: border-box;
     position: fixed;
     left: 0;
     width: 100%;
     background-color: #4b4b4b;
     padding: 8px 16px;
     text-align: center;
     font-size: 13px;
     color: #ffffff;
     line-height: 2;
      z-index: 10;
    }
    
    #cookiebar.top {
     top: 0;
    }
    
    #cookiebar.bottom {
     bottom: 0;
    }
    
    #cookiebar-desc {
     display: inline-block;
    }
    
    #cookiebar span {
     margin-right: 1em;
    }
    
    #cookiebar .cookiebar-button,
    #cookiebar .cookiebar-info {
     margin-right: 8px;
     padding: 4px 8px;
     border: none;
     background-color: #fdfdfd;
     color: #666;
     cursor: pointer;
     display: inline-block;
    }
    
    #cookiebar a {
     color: #666;
     text-decoration: none;
    }
    
    #cookiebar a:hover {
     text-decoration: none;
    }
    - Die beiden Dateien cookiebar.js und cookiebar.css in ein Theme Ordner kopieren
    - Ein template mod_html_cookiebar.html5 mit folgendem Inhalt erstellen:

    Code:
    <?php
    
      $GLOBALS['TL_CSS'][] = 'PFAD ZUM ORDNER/cookiebar.css|static';
      $GLOBALS['TL_JAVASCRIPT'][] = 'PFAD ZUM ORDNER/cookiebar.js|static';
    
    ?>
    
    <?= $this->html ?>
    
    <script>
    jQuery(function($){
    $(document).ready(function() {
      $('#cookiebar').cookieBar({ closeButton : '.cookiebar-button', hideOnClose: false });
      $('#cookiebar').on('cookieBar-close', function() { $(this).slideUp(); });
    });
    });
    </script>
    - Im Theme ein Modul "Eigener HTML-Code" erstellen
    - Unter "Individuelles Template" das obige Template auswählen/setzen
    - Folgenden Inhalt setzen:

    Code:
    <div id="cookiebar" class="bottom" role="complementary" aria-describedby="cookiebar-desc">
      <div id="cookiebar-desc" aria-live="assertive" role="alert">
        <span>
        {{ifnlng::de}}This site uses cookies that will allow us to make your stay as pleasant as possible. If you continue the visit, you agree to this.{{ifnlng}}
        {{iflng::de}}Diese Seite verwendet Cookies, die es uns ermöglichen, Ihren Aufenthalt so angenehm wie möglich zu gestalten.Wenn Sie den Besuch fortsetzen, erklären Sie sich damit einverstanden.{{iflng}}
        </span>
      </div>
      <div class="cookiebar-button">OK</div><div class="cookiebar-info"><a href="http://LINK_EINTRAGEN" title="Details">Details</a></div>
    </div>
    - Das Modul als letzten Eintrag im Seitenlayout eintragen
    Geändert von Franko (18.05.2018 um 15:10 Uhr)
    carpe diem ...

  2. #2
    Contao-Fan Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    814
    Partner-ID
    6122

    Standard

    Eine alternative Umsetzung ohne ein extra Modul anlegen zu müssen wäre:

    Ein Template "j_cookiebar.html5" mit folgendem Inhalt erstellen:

    Code:
    <?php
    
    $GLOBALS['TL_JAVASCRIPT'][] = '[PFAD ZUM ORDNER]/jquery.cookieBar.min.js|static';
    
    $message = '';
    $Link =  Controller::replaceInsertTags('{{link_url::6}}');  
    
    if ($GLOBALS['TL_LANGUAGE'] == 'de'): 
      $message = 'Diese Seite verwendet Cookies.<div> Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu.';
    else:   
      $message = 'This site uses cookies.<div> By continuing to use the website, you agree to the use of cookies.';
    endif; 
    
    $GLOBALS['TL_BODY'][] = '
    <div id="cookiebar" class="bottom animated fadeInUp" role="complementary" aria-describedby="cookiebar-desc">
      <div id="cookiebar-desc" aria-live="assertive" role="alert">'.$message.'</div>
      <div class="cookiebar-button">Akzeptieren</div><div class="cookiebar-info"><a href="'.$Link.'" title="Zur Datenschutzerklärung">INFO</a></div>
    </div>
    ';  
    
    //$GLOBALS['TL_BODY'][] = '<script src="[PFAD ZUM ORDNER]/jquery.cookieBar.min.js"></script>'; 
    
    $GLOBALS['TL_BODY'][] = "
    <script>
    jQuery(function($){
    $(document).ready(function() {
      $('#cookiebar').cookieBar({ closeButton : '.cookiebar-button', hideOnClose: false });
      $('#cookiebar').on('cookieBar-close', function() { $(this).slideUp(); });
    });
    });
    </script>
    ";
    
    ?>
    Den Eintrag {{link_url::6}} mit der Seiten-ID der entsprechenden Datenschutzerklärung Seite ersetzen.

    Im obigen Beispiel wird "jquery.cookieBar.min.js" in den Header eingebunden. Alternativ kann man die erste Zeile entfernen/kommentieren und

    Code:
    //$GLOBALS['TL_BODY'][] = '<script src="[PFAD ZUM ORDNER]/jquery.cookieBar.min.js"></script>';
    auskommentieren. Dann wird das Script am Ende des Seitenquelltextes eingesetzt - wenn man möchte ...

    Im Seitenlayout dann lediglich dieses Template unter "jQuery-Templates" auswählen/aktivieren ...
    Geändert von Franko (18.05.2018 um 15:12 Uhr)
    carpe diem ...

  3. #3
    Contao-Fan Avatar von kischd
    Registriert seit
    25.06.2009.
    Ort
    Karlsruhe
    Beiträge
    826

    Standard

    Hallo Frank,

    ich habe die obere Variante getestet. Leider passiert beim Klick auf OK nichts.
    An was kann das liegen?
    Gruß Mark

  4. #4
    Contao-Fan Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    814
    Partner-ID
    6122

    Standard

    Hm,
    Stimmt der Pfad zum Script?
    Ist {{link_url::SEITEN-ID}} gesetzt?
    Passen die CSS Angaben zu Deiner Seite oder werden evtl. die Cookiebar Buttons von einem anderen Container überdeckt?
    Gibt es Fehlermeldungen z.B über die Chrome Developer Console?

    Frank
    carpe diem ...

  5. #5
    Contao-Fan Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    814
    Partner-ID
    6122

    Standard

    Zitat Zitat von kischd Beitrag anzeigen
    Hallo Frank,
    ich habe die obere Variante getestet. Leider passiert beim Klick auf OK nichts.
    An was kann das liegen?
    Hatte das auch gerade nach einem Update von 3.5 auf die LTS 4.4.X (mit jQuery 1.12.4).
    Ein jQuery Plugin schmiß einen Fehler und hat die weitere Script Ausführung unterbrochen. Nachdem der Fehler behoben wurde klappte es auch wieder mit dem cookiebar script...
    Also in der Browser developer console mal die Ausgabe checken ...

    Franko
    carpe diem ...

  6. #6
    Contao-Fan Avatar von kischd
    Registriert seit
    25.06.2009.
    Ort
    Karlsruhe
    Beiträge
    826

    Standard

    Ich hab das noch auf einer 3.5er Version.
    In der Konsole kommt was mit <anonym>
    hier wäre ein Link
    Geändert von kischd (17.05.2018 um 21:35 Uhr)
    Gruß Mark

  7. #7
    Contao-Fan Avatar von kischd
    Registriert seit
    25.06.2009.
    Ort
    Karlsruhe
    Beiträge
    826

    Standard

    Da wird evtl der Revolution Slider dazwischenfunken, der ist dann weg wenn ich die Cookiebar einschalte
    Gruß Mark

  8. #8
    Contao-Fan Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    814
    Partner-ID
    6122

    Standard

    Zitat Zitat von kischd Beitrag anzeigen
    Da wird evtl der Revolution Slider dazwischenfunken, der ist dann weg wenn ich die Cookiebar einschalte
    Versuchs mal mit:

    Code:
    <script>
    (function($) {
      $(document).ready(function() {
        $('#cookiebar').cookieBar({ closeButton : '.cookiebar-button', hideOnClose: false });
        $('#cookiebar').on('cookieBar-close', function() { $(this).slideUp(); });
      });
    })(jquery);
    </script>
    carpe diem ...

  9. #9
    Contao-Fan Avatar von kischd
    Registriert seit
    25.06.2009.
    Ort
    Karlsruhe
    Beiträge
    826

    Standard

    Slider ist wieder da aber ok lässt sich nicht klicken.

    Uncaught ReferenceError: jquery is not defined
    at (index):443
    Gruß Mark

  10. #10
    Contao-Fan Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    814
    Partner-ID
    6122

    Standard

    Zitat Zitat von kischd Beitrag anzeigen
    Slider ist wieder da aber ok lässt sich nicht klicken.
    Uncaught ReferenceError: jquery is not defined
    at (index):443
    Hm, ich sehe keine Änderung in dem Script wie eben beschrieben:

    Code:
    <script>
    (function($) {
    
    ...
    })(jquery);
    </script>
    carpe diem ...

  11. #11
    Contao-Fan Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    814
    Partner-ID
    6122

    Standard

    Oder mal alternativ mit:

    Code:
    <script>
    jQuery(function($){
    
    $(document).ready(function() {
      $('#cookiebar').cookieBar({ closeButton : '.cookiebar-button', hideOnClose: false });
      $('#cookiebar').on('cookieBar-close', function() { $(this).slideUp(); });
    });
    
    });
    </script>
    Hab diesen Code jetzt in den obigen Beispielen aktualisiert ...
    Geändert von Franko (18.05.2018 um 15:12 Uhr)
    carpe diem ...

  12. #12
    Contao-Fan Avatar von kischd
    Registriert seit
    25.06.2009.
    Ort
    Karlsruhe
    Beiträge
    826

    Gesicht zeigt die Zunge

    YES!!!



    Was ich noch wo gesehen hab....
    Die Cookiebar, darf ja den Impressums bzw. Datenschutzlink nicht überdecken.

    Ich hab dann sowas gesehen...

    <script type="text/javascript">
    /* <![CDATA[ */
    jQuery(document).ready(function(){

    var cookie_closed_<?php echo $this->id; ?> = jQuery.cookie('cookiebar_closed_<?php echo $this->id; ?>');

    jQuery('.cookiebar-close').click(function(){
    jQuery('.cookiebar').removeClass('open');
    jQuery('body').removeClass('cookiebar_open');
    jQuery('body').css('padding-bottom', '0px');
    jQuery.cookie('cookiebar_closed_<?php echo $this->id; ?>', 1);
    });

    if(cookie_closed_<?php echo $this->id; ?> !== '1')
    {
    jQuery('body').addClass('cookiebar_open');
    jQuery('.cookiebar').addClass('open');
    var popupHeight = jQuery('.cookiebar').outerHeight() + 'px';
    jQuery('body').css('padding-bottom', popupHeight);
    }

    });
    </script>

    Leider hatte ich in diesem script das gleiche Problem mit dem OK.

    Hier wurde aber im body die Höhe der Cookiebar eingefügt....

    Ist das bei deinem Script auch möglich...

    Da ich kein Javascript kann, konnt ich mir auch in dem anderem Problem nicht helfen
    Gruß Mark

  13. #13
    Contao-Fan Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    814
    Partner-ID
    6122

    Standard

    Zitat Zitat von kischd Beitrag anzeigen
    YES!!!
    Wo im Quelltext der cookiebar container gesetzt werden soll bleibt ja Dir überlassen. Mit der Variante über das j_cookiebar.html5 template (s. hier) wird die Ausgabe z.B. dann unter dem Contao footer gesetzt.
    Entsprechend kann man ja via CSS die weitere Ausgabe steuern.

    In Deinem Fall würde ich einfach mit

    Code:
    #bottom .inside .left {
    	float: left;
    	margin-bottom: 60px;
    }
    ein unteres margin setzen, sodaß weiter nach unten gescrollt werden kann und die Impressums Links etc. erreicht werden können ...
    carpe diem ...

  14. #14
    Contao-Fan Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    814
    Partner-ID
    6122

    Standard

    Womit hast Du Dein Portfolio Filter erstellt? Sieht gut aus ...
    carpe diem ...

  15. #15
    Contao-Nutzer Avatar von maipe
    Registriert seit
    10.07.2012.
    Ort
    München
    Beiträge
    191

    Standard Cookiebar Manuell

    Geht das auch für Versionen unter 4 z.B. 3.0, ja ich weiß das ein Update fällig ist. :-)

  16. #16
    Contao-Fan Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    814
    Partner-ID
    6122

    Standard

    Zitat Zitat von maipe Beitrag anzeigen
    Geht das auch für Versionen unter 4 z.B. 3.0, ja ich weiß das ein Update fällig ist. :-)
    Ja,
    ist ja keine spezifische Erweiterung sondern bloß jQuery u. CSS ...
    Selber hab ich es so in 3.5er und 4.4er Versionen eingesetzt.
    carpe diem ...

  17. #17
    Contao-Nutzer
    Registriert seit
    24.05.2018.
    Beiträge
    2

    Standard ok Button

    Hallo Franko, danke für den prima Beitrag.
    Ich bin totaler Laie im contao irgendwie hab ich es aber trotzdem geschafft das ganze zu implementieren.
    Leider geht aber auch bei mir der ok Button nicht. Kannst du mir sagen woran das liegt?

    www.trishop-ka.de

  18. #18
    Contao-Fan Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    814
    Partner-ID
    6122

    Standard

    Zitat Zitat von Juttawer Beitrag anzeigen
    Hallo Franko, danke für den prima Beitrag.
    Ich bin totaler Laie im contao irgendwie hab ich es aber trotzdem geschafft das ganze zu implementieren.
    Leider geht aber auch bei mir der ok Button nicht. Kannst du mir sagen woran das liegt?

    www.trishop-ka.de
    Hm,
    irgendwie sind bei Dir die cookiebar Einträge im Quelltext mehrfach vorhanden?
    Evtl. liegt es auch an den zusätzlichen Mootols Plugins obwohl der framework Konflikt eigentlich via
    jQuery(function($){
    ...
    });
    abgefangen werden sollte ...
    carpe diem ...

  19. #19
    Contao-Nutzer
    Registriert seit
    24.05.2018.
    Beiträge
    2

    Standard

    Zitat Zitat von Franko Beitrag anzeigen
    Hm,
    irgendwie sind bei Dir die cookiebar Einträge im Quelltext mehrfach vorhanden?
    Evtl. liegt es auch an den zusätzlichen Mootols Plugins obwohl der framework Konflikt eigentlich via
    jQuery(function($){
    ...
    });
    abgefangen werden sollte ...
    Hallo Franko,
    lag tatsächlich daran dass es mehrmals drin war. Ich habs gefunden und nur einmal reingesetzt. Jetzt geht es.
    Viele Dank!

  20. #20
    Contao-Nutzer
    Registriert seit
    23.09.2015.
    Beiträge
    1

    Standard

    Hallo!

    Schön das eine Lösung für die Cookiebar ohne Erweiterung angeboten wird, allerdings funktioniert der "OK-Button" zum wegklicken der Meldung bisher nicht. Leider fehlen mir die Kenntnisse in der Sriptsprache. Gibt es eine Lösung zur "Fehlerbehebung".
    Ich habe die Einbindung mittels Modul gewählt.

    Gruß Loostie

  21. #21
    Contao-Fan Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    814
    Partner-ID
    6122

    Standard

    Zitat Zitat von Loostie Beitrag anzeigen
    Hallo!

    Schön das eine Lösung für die Cookiebar ohne Erweiterung angeboten wird, allerdings funktioniert der "OK-Button" zum wegklicken der Meldung bisher nicht. Leider fehlen mir die Kenntnisse in der Sriptsprache. Gibt es eine Lösung zur "Fehlerbehebung".
    Ich habe die Einbindung mittels Modul gewählt.

    Gruß Loostie
    Dieses Verhalten hat zumeist die weiter oben beschriebenen Ursachen. Insofern solltest Du diese zunächst prüfen ...
    Frank
    carpe diem ...

  22. #22
    Contao-Nutzer Avatar von greullin
    Registriert seit
    21.08.2012.
    Ort
    Birkenwerder
    Beiträge
    5

    Standard

    Zitat Zitat von Franko Beitrag anzeigen
    Dieses Verhalten hat zumeist die weiter oben beschriebenen Ursachen. Insofern solltest Du diese zunächst prüfen ...
    Frank
    Hallo Frank,

    hier auch noch mein Dank für den Beitrag und das Script. Ich habe contao 4.4 mit einem contao theme am Laufen und der Button geht auch bei mir nicht, obwohl ich alle im thread beschriebenen Änderungen getestet habe. Da ich js auch nur recht selten anfasse, fehlt mir hier die Erfahrung. Chrome bringt die Fehlermeldung, dass eine Funktion nicht richtig sein (s. Anhang) und oft ist auch nur ein Zeichen verrückt, aber das kann ich halt nicht wirklich beurteilen. Auch ist mir aufgefallen, dass ich das Modul im Seitenlayout weiter oben oder auch weiter unten platzieren kann, die CookieBar steht immer fest unterhalb des footers. Ist das nur durch die css manifestiert und die Position im Layout ist egal, selbst wenn ich die Hauptspalte oder Kopfzeile dazugehörig auswähle?

    Wäre klasse, wenn Du noch eine Idee hättest und ich den Button funktionstüchtig bekommen könnte.


    Vielen Dank im Voraus

    P.S. Die Seite ist zurzeit noch mittels ./htaccess vor Google & Co. versteckt. Wenn Du Du reinschauen möchtest nutze bitte user: gast password: gast

    Dirk
    Angehängte Grafiken Angehängte Grafiken

  23. #23
    Contao-Fan Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    814
    Partner-ID
    6122

    Standard

    Hi,
    also wenn ich Deine Startseite aufrufe erhalte ich in der Chrome Konsole zahlreiche Script Fehler:

    Code:
    jquery.waypoints.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    fullnav.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    startseite.html:1 Refused to execute script from 'http://www.energie-fuer-bildung.org/files/594-interior/js/fullnav.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
    animate.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    jquery.waypoints.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    startseite.html:1 Refused to execute script from 'http://www.energie-fuer-bildung.org/files/594-interior/js/jquery.waypoints.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
    animate.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    startseite.html:1 Refused to execute script from 'http://www.energie-fuer-bildung.org/files/594-interior/js/animate.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
    startseite.html:655 Uncaught TypeError: $(...).cookieBar is not a function
        at HTMLDocument.<anonymous> (startseite.html:655)
        at i (c691a462cae2.js:2)
        at Object.fireWith [as resolveWith] (c691a462cae2.js:2)
        at Function.ready (c691a462cae2.js:2)
        at HTMLDocument.K (c691a462cae2.js:2)
    favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    Evtl. wird daher der Aufruf des Cookiebar Scripts beeinträchtigt ...
    carpe diem ...

  24. #24
    Contao-Nutzer Avatar von greullin
    Registriert seit
    21.08.2012.
    Ort
    Birkenwerder
    Beiträge
    5

    Standard

    Zitat Zitat von Franko Beitrag anzeigen
    Hi,
    also wenn ich Deine Startseite aufrufe erhalte ich in der Chrome Konsole zahlreiche Script Fehler:

    Code:
    jquery.waypoints.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    fullnav.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    startseite.html:1 Refused to execute script from 'http://www.energie-fuer-bildung.org/files/594-interior/js/fullnav.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
    animate.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    jquery.waypoints.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    startseite.html:1 Refused to execute script from 'http://www.energie-fuer-bildung.org/files/594-interior/js/jquery.waypoints.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
    animate.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    startseite.html:1 Refused to execute script from 'http://www.energie-fuer-bildung.org/files/594-interior/js/animate.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
    startseite.html:655 Uncaught TypeError: $(...).cookieBar is not a function
        at HTMLDocument.<anonymous> (startseite.html:655)
        at i (c691a462cae2.js:2)
        at Object.fireWith [as resolveWith] (c691a462cae2.js:2)
        at Function.ready (c691a462cae2.js:2)
        at HTMLDocument.K (c691a462cae2.js:2)
    favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)
    Evtl. wird daher der Aufruf des Cookiebar Scripts beeinträchtigt ...
    Hallo Franko,

    wohl war. Ich werde mich erst einmal auf die Fehler konzentrieren, vielleicht ist da wie Du schon sagst das Problem selbstgemacht.

    Danke erst einmal!
    Gruesse/Kind regards
    greullin

  25. #25
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    515

    Standard

    Finde ich eine Super Sache.
    Mein Problem ist nur, dass die ganzen third-party cookies erst losfeuern dürfen, wenn ich "OK" geklickt habe in der Cookiebar. Aktuell sind diese Scripte bei mir im analytics.html5, wie könnte ich diese Scripte erst nach dem "OK" ausführen, gibt es da schon eine Lösung?

    LG
    & Danke

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •