Support: `dlh_googlemap` about contao-cookiebar HOT 14 CLOSED

In einer der dlh-Erweiterungen wird im Template die API über folgende Zeile im HEAD platziert:

$GLOBALS['TL_JAVASCRIPT'][] = 'https://maps.googleapis.com/maps/api/js?key=' . $this->map['key'] . '&language=' . $this->map['language'];

Diese müsste aus kommentiert und erst geladen werden, sofern der Cookie akzeptiert wurde:

- $GLOBALS['TL_JAVASCRIPT'][] = 'https://maps.googleapis.com/maps/api/js?key=' . $this->map['key'] . '&language=' . $this->map['language'];

Initialisieren der Karte mit Berücksichtigung der akzeptierten Services:

- if(cookiebar.issetCookie(cookieId)){
-    if(window.addEvent) {
-        window.addEvent('domready', function() {
-            gmap<?= $this->map['id']; ?>_initialize();
-        });
-    } else if(typeof jQuery == "function") {
-        jQuery(document).ready(function(){
-            gmap<?= $this->map['id']; ?>_initialize();
-        });
-    } else {
-        window.setTimeout("gmap<?= $this->map['id']; ?>_initialize()", 500);
-    }
- }

+ document.addEventListener("DOMContentLoaded", function() {
+    cookiebar.addModule(YOUR_GOOGLE_MAPS_COOKIE_TOKEN_ID, function(){
+   	
+    	let script = document.createElement('script');
+            script.type = 'text/javascript';
+             
+        script.onload = function() {
+	    gmap<?= $this->map['id']; ?>_initialize();
+	};
+             
+        script.src = 'https://maps.googleapis.com/maps/api/js?key=<?=$this->map['key']?>&language=<?=$this->map['language']?>';
+    	document.head.append(script);
+    }, {
+        selector: '#dlh_googlemap_<?= $this->map['id']; ?>',
+        message: 'YOUT_TEXT',
+        button: {
+            show: true,
+            text: 'YOUR_BUTTON_TEXT',
+            type: 'button',
+            classes: 'my-btn'
+        }
+    });
+ });

Vielen Dank für den Hinweis @operatorone. 😊

from contao-cookiebar.

Führt leider zum Fehler er verhaspelt sich mit PHP und jQuery.

Wie genau hast du die Abfrage integriert / versucht auf den Cookie zu prüfen?
Könntest du das einmal ausprobieren?

if(cookiebar.issetCookie(cookieId)){
    if(window.addEvent) {
        window.addEvent('domready', function() {
            gmap<?= $this->map['id']; ?>_initialize();
        });
    } else if(typeof jQuery == "function") {
        jQuery(document).ready(function(){
            gmap<?= $this->map['id']; ?>_initialize();
        });
    } else {
        window.setTimeout("gmap<?= $this->map['id']; ?>_initialize()", 500);
    }
}

Ich denke du wirst es bereits geändert haben aber zur Sicherheit, cookieId muss gegen die ID des definierten Cookie-Typen ausgetauscht werden.

Über eigene Skripte könnte man die Initialisierung abbilden, jedoch scheint die Erweiterung die Karte mittels $this->map['id']; zu initialisieren um mehr als eine Map auf einer Seite darstellen zu können. An diese ID kommen wir in dem Context ohne weiteres nicht dran. Eine Möglichkeit wäre jedoch den Part der Initialisierung in eine Funktion zu packen und diese über ein eigenes Skript aufzurufen wenn der Cookie akzeptiert wurde.

Das Skript könnte in etwa so aussehen:

if (typeof meineNeueFunktion === "function") { 
    meineNeueFunktion();
}

Anpassungen im Template:

function meineNeueFunktion(){
     if(window.addEvent) {
        window.addEvent('domready', function() {
            gmap<?= $this->map['id']; ?>_initialize();
        });
    } else if(typeof jQuery == "function") {
        jQuery(document).ready(function(){
            gmap<?= $this->map['id']; ?>_initialize();
        });
    } else {
        window.setTimeout("gmap<?= $this->map['id']; ?>_initialize()", 500);
    }
}

Grundsätzlich soll dieses Verhalten zukünftig die oben erwähnte Methode abbilden, aber vielleicht hilft es bis ich diese implementiert habe.

Code ist ungetestet ;)

from contao-cookiebar.

Super, ja die Möglichkeit möchte ich mit der oben genannten Methode realisieren. So wird der Aufruf / die Initialisierung an die Methode geknüpft und automatisch ohne Reload geladen/ausgeführt. Ich schaue mal ob ich noch etwas Zeit finde um die Methode im Laufe der Woche nachzureichen.

from contao-cookiebar.

Hi dishub,
danke für die schnelle Antwort.

Ein Kollege hat mir geholfen, es lag daran, dass ich an der Stelle mit der ID bei YOUR_GOOGLE_MAPS_COOKIE_TOKEN_ID den Cookie-Token mit einfachen Anführungszeichen aus dem Backend eingetragen habe (also bspw. 'ga_map') und nicht die interne Contao ID, die man aus der Adresszeile des Browsers kopieren muss, in meinem Fall einfach eine 5.
Da wäre ich nie darauf gekommen, dass das damit gemeint ist. Das hat Stunden gedauert darauf zu kommen und ich bin jetzt kein Dummi, da ich selbst einige Contao-Erweiterungen programmiert habe ;)

P.S. Ich hatte Iframe gewählt. Es geht aber beides, habe es ausprobiert.

from contao-cookiebar.

Hallo @githuppi,

wie genau findet hier die Initialisierung der Map statt?
Sollte das in einem Template passieren, könnte man vor der Initialisierung abfragen ob der Cookie bereits akzeptiert wurde:

if(cookiebar.issetCookie(cookieId)){
  // Initialisierung
}

Grundsätzlich wollen wir mit unseren JS-Methoden so gut wie alles Kompatibel machen können. Sollte hier noch etwas benötigt werden, würde wir versuchen dies nachzureichen. Geplant ist auf jedenfall, dass wir eine weitere Methode bereitstellen, welche quasi eine Callback-Methode triggert um Skripte erst zu initialisieren, wenn die entsprechenden Cookies akzeptiert wurden.

Der Knackpunkt ist, dass die dlh_googlemap eigene Cookies zur Einwilligung mit sich bringt.

Was genau für Cookies sind das? Von Google oder verwendet die Erweiterung Cookies?

from contao-cookiebar.

Habe gerade mal rein geschaut. Schau mal ob du diese Zeilen entsprechend anpassen kannst.

from contao-cookiebar.

@doishub besten Dank für die schnelle Rückmeldung ich schaue mir das an.

from contao-cookiebar.

if(window.addEvent) { window.addEvent('domready', function() { gmap<?php $this->map['id']; ?>_initialize(); }); } else if(typeof jQuery == "function") { jQuery(document).ready(function(){ gmap<?= $this->map['id']; ?>_initialize(); }); } else { window.setTimeout("gmap<?= $this->map['id']; ?>_initialize()", 500); }
Führt leider zum Fehler er verhaspelt sich mit PHP und jQuery.

Prinzipiell müsste der Cookie von der Erweiterung dlh_googlemap gesetzt werden:
Name: dlh_googlemaps
Wert: ok

Ist das mittels Befehl über eigene Scripte möglich?

from contao-cookiebar.

if(cookiebar.issetCookie(cookieId)){
    if(window.addEvent) {
        window.addEvent('domready', function() {
            gmap<?= $this->map['id']; ?>_initialize();
        });
    } else if(typeof jQuery == "function") {
        jQuery(document).ready(function(){
            gmap<?= $this->map['id']; ?>_initialize();
        });
    } else {
        window.setTimeout("gmap<?= $this->map['id']; ?>_initialize()", 500);
    }
}

Okay ich habe das so in das Template dlh_googlemap gesetzt. Und ja, es funktioniert. Ist der Cookie gesetzt wird nach einem neuen Laden der Seite die Karte angezeigt.

Besteht die Möglichkeit, dass der Aufruf der Karte direkt nach der Bestätigung klappt?

from contao-cookiebar.

Die Methode steht nun ab Version 1.4.0 zur Verfügung.

In deinem Fall müsste die Initialisierung in etwa so aussehen:

-if(cookiebar.issetCookie(cookieId)){
-    if(window.addEvent) {
-        window.addEvent('domready', function() {
-            gmap<?= $this->map['id']; ?>_initialize();
-        });
-    } else if(typeof jQuery == "function") {
-        jQuery(document).ready(function(){
-            gmap<?= $this->map['id']; ?>_initialize();
-        });
-    } else {
-        window.setTimeout("gmap<?= $this->map['id']; ?>_initialize()", 500);
-    }
-}

document.addEventListener("DOMContentLoaded", function() {
    cookiebar.addModule(cookieIdOfGoogleMaps, gmap<?= $this->map['id']; ?>_initialize);
});

Bei Bedarf kannst du auch hier eine Nachricht + Button zum akzeptieren ausgeben lassen, siehe Dokumentation.

Code ist ungetestet ;)

from contao-cookiebar.

Hey, danke für die hilfreichen Tipps, vor allem im letzten Beitrag. Allerdings funktioniert das scheinbar nicht mehr zu 100% mit Contao 4.13.35 und der Cookiebar Version 1.13.1 oder ich mache irgendetwas falsch.

Die Karte an sich lädt und auch das Akzeptieren über die Cookiebar funktioniert. Aber es funktioniert nicht das nachträgliche Akzeptieren über den Button, wenn zuvor über die Cookiebar abgelehnt wurde.

Es kommt folgende Fehlermeldung in der DevTool Console von Chrome:

jquery.min.js,cookiebar.min.js-79b294e9.js:180 Uncaught TypeError: Cannot set properties of undefined (setting 'confirmed') at push (jquery.min.js,cookiebar.min.js-79b294e9.js:180:55) at HTMLButtonElement.<anonymous> (jquery.min.js,cookiebar.min.js-79b294e9.js:910:14)

Wenn ich dann in der JavaScript-Datei die Zeile 177 auskommentiere, dann funktioniert es (aber das kann ja nicht Sinn der Sache sein):
cookiebar.settings.cookies[cookieId].confirmed = true;

Hat zufällig noch jemand einen Tipp?

from contao-cookiebar.

Was für einen CookieType verwendest du um mit der addModule-Methode zu arbeiten? Sollte es ein einfacher "Hinweis" sein, versuche diesen mal auf "Benutzerdefiniert (Skript)" umzustellen.

from contao-cookiebar.

Hey,

ich hatte es schon mal korrekt eingerichtet, nur bin ich gerade zu blöd, um zwei Karten mit der Erweiterung dlh_googlemap und Cookiebar anzeigen zu lassen. Es wird immer nur eine ausgegeben.
Ich habe in der Cookibar ein Element vom Cookie-Typ "iframe" und iFrame-Typ "Google Maps" eingerichtet (id=8).
Danach das Template bearbeitet "ce_dlh_googlemaps_default_de" und im Inhaltselement für die beiden Google Maps zugewiesen. Es wird aber nur eine Map ausgegeben. Was mache ich falsch?

document.addEventListener("DOMContentLoaded", function() {
	cookiebar.addModule(8, function() {
	    let script = document.createElement('script');
	   	script.type = 'text/javascript';
	             
	   	script.onload = function() {
	   		gmap<?= $this->map['id']; ?>_initialize();
		};
	             
			script.src = 'https://maps.googleapis.com/maps/api/js?key=<?=$this->map['key']?>&language=<?=$this->map['language']?>';
	    	document.head.append(script);
	}, {
    selector: '#dlh_googlemap_<?= $this->map['id']; ?>',           // [required] Defines the element selector in which the message is output
    message: 'Um die Karte anzuzeigen, akzeptieren Sie bitte die Google Maps Cookies.',           // [required] The text to be displayed
        button: {                       
            show: true,                 // Extends the output by a confirmation button,
            text: 'Google Maps Cookies akzeptieren', // Button text
            type: 'button',             // Button type
            classes: 'first second'     // Own CSS classes for the button separated by spaces
        }
    });
});

from contao-cookiebar.

Mit den Templates hat das erstmal nichts zu tun, da du die addModule-Methode verwendest. Ich schätze. Dein Problem liegt am Inhalt Deiner anonymen Funktion. Hier fügst du das Skript nun zweimal in den Head ein. Möglicherweise erreicht das zweite Skript niemals den onload Status, sodass deine zweite Karte nicht initialisiert wird.

from contao-cookiebar.