Opt-In Cookie Extension

[69bruno]

Soweit (so ähnlich) war ich ja. wenn ich Chris aber richtig verstehe, möchte er das in der config.js erledigt wissen, damit die Variablen dann direkt für das klaro-script zur Verfügung stehen. In der config.js komme ich aber gerade nicht weiter. Egal was ich an java-befehlen dort eingebe, ich kriege Fehlermeldungen.

Ich habe mir also schon auf die todo-liste gesetzt, java-tutorials durchzuarbeiten.

[Mike-on-Tour]

Die config.js wird doch auch in irgendeinem HTML-Skript eingebunden, oder? Dann sollte das auch funktionieren. Und wie eine Javascript-Datei (*.js) in HTML eingebunden wird, weißt du, oder? (Falls nicht: s.u.)

Was genau funktioniert denn nicht?

Einbinden js in HTML:
Mit TWIG (muss zukünftig eh benutzt werden) geht es so: {% INCLUDEJS '@vendor_extname/file.js' %} für die Extension extname vom Autor vendor und das gleich als erste Zeile in die HTML.
In der alten (und zukünftig obsoleten) Kommentar-Syntax von phpBB geht es so: <!-- INCLUDEJS extname/file.js -->, aber das würde ich nicht mehr lernen, auch weil diese alte Form und die TWIG-Syntax nebeneinnder benutzt werden können.

[chris1278]

Mike werde deinen Vorschlag testen und berichten.

[chris1278]

Und Bruno ja so war es gedacht aber erst mal die sprach variablen. Danach die anderen.

Automatisch dem Beitrag hinzugefügt nach 15 Minuten 34 Sekunden. Bitte Regel für „Topic-Bumping“ beachten. Danke.

Eine Sprachvariable an ein JS-Skript übergeben:

In der HTML-Datei folgendes aufnehmen:

Code: Alles auswählen

<script>
    var jsVariable = "{{ lang('VARIABLE') }}";
</script>

Damit steht die Variable im JS-Skript zur Verfügung und kann beispielsweise so alert(jsVariable); ausgegeben werden.

ALso mike Ich habe in der Ext das Scrit direkt in der Overall_header geladen noch bevor ich die Scriptdateien von klaro laden lase.

Aber die Variable zur sprachausgabe funktioniert leider nicht.

Eventeull schaust du mal drüber.

pastebin/?mode=view&s=64

[Mike-on-Tour]

Momentan habe ich auch keine Idee. Vom Ablauf her bekommt der Client alle Infos vom Server, hat er diese, setzt der Browser alles zusammen und stellt es dar. Dann steht dem Client also das in der overall_header.html inkludierte Skript und alle anderen Skript-Dateien zur Verfügung. Und damit sollte in JS alles da sein, was zur Ausführung benötigt wird. Oder liege ich da irgendwo falsch?

[69bruno]

Mit dem hier

Code: Alles auswählen

<script>
let bruno;
bruno = {{ S_USER_LOGGED_IN|json_encode|raw }};
</script>

in der overall_header_head_append.html
und dem hier in der config.js

Code: Alles auswählen

alert(bruno);

bekommt jeder, der mein Testforum (testforum.cruiser-lounge.de) aufruft den Status der Anmeldung angezeigt (S_USER_LOGGED_IN).

[chris1278]

Dann poste doch mal diese config.js hier:

pastebin/

[69bruno]

erledigt

[chris1278]

ok bruno dann die frage wie hast du die variable in html deklariert. also das hier meine ich:

Code: Alles auswählen

<script>
    var jsVariable = "{{ lang('BRUNO69') }}";
</script>

den Code den du geladen hast um die Variable zu übergeben.

ich habs mal getstet in der config.js müsste das so aussehen. hab mal einen eintrag verdoppelt und den in variabeln gesetzt:

Code: Alles auswählen

// Standardmäßig lädt Klaro die Konfiguration aus einer globalen Variablen "klaroConfig".
// Sie können dies ändern, indem Sie das Attribut "data-config" auf Ihrem Computer angeben
// Skript nehmen, z.b. so was:
// <script src="klaro.js" data-config="myConfigVariableName" />
var klaroConfig = {
	// Mit der Version 0.7.0 führen wir einen 'version'-Parameter ein, 
	// der es uns einfacher macht, Konfigurationsdateien in Zukunft abwärtskompatibel zu halten.
	version: 1,

	// Sie können die ID des DIV-Elements anpassen, das Klaro erstellt
	// beim Starten. Wenn nicht definiert, verwendet Klaro 'klaro'.
	elementID: 'klaro',

	// Wenn Sie dies auf true setzen, wird Klaro nicht automatisch geladen
	// wenn die Seite geladen wird.
	noAutoLoad: false,

	// Wenn Sie dies auf true setzen, werden die Beschreibungen der Einwilligung angezeigt
	// Modal- und Zustimmungshinweis sind HTML. Vorsichtig verwenden.
	htmlTexts: true,

	// Wenn Sie 'embedded' auf true setzen, wird der Klaro modal und ohne bemerkt
	// den modalen Hintergrund, so dass Sie z.B. Betten Sie sie in ein bestimmtes Element ein
	// Ihrer Website, z. B. Ihre Datenschutzerklärung.
	embedded: false,

	// Sie können Dienste nach ihrem Zweck in einzelne Gruppen zusammenfassen. Dies ist ratsam
	// falls Sie eine große Anzahl von Diensten haben. Benutzer können diese dann aktivieren oder deaktivieren
	// in dem Sie einfach eine ganze Gruppe aktivieren bzw. deaktivieren,, anstatt jeden Dienst einzeln aktivieren oder deaktivieren zu müssen.
	groupByPurpose: true,

	// Wie Klaro die Einstellungen des Benutzers speichern soll. Es kann entweder "Cookie" sein
	// (Standardeinstellung) oder 'localStorage'.
	storageMethod: 'cookie',

	// Sie können den Namen des Cookies anpassen, das Klaro zum Speichern verwendet
	// Benutzerzustimmungsentscheidungen. Wenn nicht definiert, verwendet Klaro 'klaro'.
	cookieName: 'klaro',

	// Sie können auch eine benutzerdefinierte Ablaufzeit für das Klaro-Cookie festlegen.
	// Standardmäßig läuft es nach 120 Tagen ab.
	cookieExpiresAfterDays: 365,

	// Sie können für den Einwilligungsmanager selbst zur Cookie-Domain wechseln.
	// Verwenden Sie diese Option, wenn Sie einmal die Zustimmung für mehrere übereinstimmende Domänen erhalten möchten.
	// Wenn nicht definiert, verwendet Klaro die aktuelle Domain.
	// cookieDomain: '.localhost',

	// Definiert den Standardstatus für Dienste (true = standardmäßig aktiviert).
	default: false,

	// Wenn "mustConsent" auf true gesetzt ist, öffnet sich das Einwilligungsfenster 
	//direkt bei aufruf der Seite und der Benutzer kann die Seite erst wieder 
	//Nutzen wenn er eine auswahl trifft und diese bestätigt.
	mustConsent: false,

	// Bei wert "true" gibt es für den Benutzer die Möglichleit "Alle Cookies akzeptieren" 
	//was heist er mus nicht jeden auswählen wenn er eh alle aktivieren möchte. Ansonsten 
	//hat der Benutzer nur das feld "Ausgewählte Akzeptieren"
	acceptAll: true,

	// Bei auswahl "true" wird der Button "Ablehnen" ausgeblendet
	hideDeclineAll: false,

	// In dem Ersten Fenster den link zu den Einzelnen Cookie-Einstellungen ein- bzw. ausblenden
	// empfohlen: "false"
	hideLearnMore: false,

	// Cookie-Hinweis mittig auf der Webseite anzeigen
	// empfohlen: "false"
	noticeAsModal: false,

	// Du kannst auch das 'Realized with Klaro!' Text in der Cookie-Box ausblenden.
	// Bitte tu das nicht! Wir bieten Klaro als kostenloses Open Source Tool an.
	// Das Platzieren eines Links zu unserer Website hilft uns, das Wort darüber zu verbreiten.
	// was es uns letztendlich ermöglicht, Klaro zu machen! besser für alle.
	// Also sei bitte fair und lass den Link aktiviert. Vielen Dank :)
	// disablePoweredBy: true,

	// Sie können eine zusätzliche Klasse (oder Klassen) angeben, die dem Klaro `div` hinzugefügt wird
	// zusätzliche Klasse: 'my-klaro',

	// Hier können Sie die UI-Sprache direkt definieren. Wenn nicht definiert, wird Klaro
	// benutze den in der globalen Variablen "lang" angegebenen Wert. Wenn das so ist
	// nicht vorhanden, es wird der Wert verwendet, der im Attribut "lang" von angegeben ist
	// HTML-Tag. Wenn das auch nicht existiert, wird 'en' verwendet.
	// lang: 'en',

	// Sie können vorhandene Übersetzungen überschreiben und Übersetzungen für Ihre hinzufügen
	// Servicebeschreibungen und -zwecke. Siehe `src / translations /` für eine vollständige
	// Liste der Übersetzungen, die überschrieben werden können:
	// https://github.com/KIProtect/klaro/tree/master/src/translations

	// Beispielkonfiguration, die zeigt, wie Übersetzungen überschrieben werden:
	// https: // github.com/KIProtect/klaro/blob/master/src/configs/i18n.js
	translations: {
		// translationsed defined under the 'zz' language code act as default
		// translations.
		zz: {
		    //privacyPolicyUrl: 'hier der link für die Datenschutzerklärung',
		},
		// If you erase the "consentModal" translations, Klaro will use the
		// bundled translations.
		de: {
			consentNotice: {
				description: "Um bestimmte Funktionen nutzen zu können sind ein paar Einstellungen nötig. Damit wird gesteuert ob ein Dienst Cookies setzen darf oder nicht. <br><br>Es werden Cookies gesetzt für folgende Dienste:<br><br>{purposes}. <br><br>Die Einstellungen können später zu jedem Zeitpunkt geändert werden.<br><br>",
				learnMore: "Zu den Cookie-Einstellungen",
			},
			acceptAll: "Alle akzeptieren",
			acceptSelected: "Ausgewählte akzeptieren",
			decline: "Ablehnen",
			ok: "Akzeptieren",
			poweredBy: "Realisiert mit Klaro!",
			service: {
				disableAll: {
					description: "Mit diesem Schalter können Sie alle Dienste aktivieren oder deaktivieren.",
					title: "Alle Dienste aktivieren oder deaktivieren"
				},
				optOut: {
					description: "Diese Dienste werden standardmäßig geladen (Sie können sich jedoch abmelden)",
					title: "(Opt-out)"
				},
				purpose: "Zweck",
				purposes: "Zwecke",
				required: {
					description: "Dieser Service ist immer erforderlich",
					title: "(immer erforderlich)"
				}
			},
			purposeItem: {
				service: "Dienst",
				services: "Dienste"
			},
			consentModal: {
				title: 'Einstellungen für unsere Cookie´s',
				description:
					'Hier können die Einstellungen für Cookies vorgenommen werden die evtl. gesetzt werden. Es sind viele Einstellungen da, das heist aber nicht das auch alle Dienste verwendet werden. Es handelt sich bei diesem Script um ein Vordefiniertes universelles Script zum Auswählen von Cookies.<br><br> Allgemeine Hinweise und Informationen entnehmen Sie bitte unserer <strong>Datenschutzerklärung</strong> bzw. <strong>Nutzungsbedingungen</strong> die wir im Fussbereich der Seite verlinkt haben.',
			},
			inlineTracker: {
				description: 'Beispiel für ein Inline-Tracking Skript',
			},
			externalTracker: {
				description: 'Beispiel für ein externes Tracking Skript',
			},
			purposes: {
				essential: {
					description: "Diese Cookies sind voreingestellte Werte und müssen akzeptiert werden, da diese für den Betrieb der Webseite erforderlich sind. \n",
					title: "Technisch notwendige Cookies"
				},
				extern: {
					description: "Hier können Cookies eingestellt werden die durch externe Medien wie z.B. Youtube, Facebook etc. erstellt werden",
					title: "Externe Medien"
				},
			},
		},
		en: {
			consentNotice: {
				description: "A few settings are required to be able to use certain functions. This controls whether a service is allowed to set cookies or not.<br><br>Cookies are set for the following services: <br><br>{purposes}. <br><br>The settings can be changed later at any time.<br><br>",
				learnMore: "To the cookie settings",
			},
			acceptAll: "Accept all",
			acceptSelected: "Accept selected",
			decline: "Decline",
			ok: "Accept",
			poweredBy: "Realized with Klaro!",
			service: {
				disableAll: {
					description: "Use this switch to enable or disable all services.",
					title: "Enable or disable all services"
				},
				optOut: {
					description: "This services is loaded by default (but you can opt out)",
					title: "(opt-out)"
				},
				purpose: "purpose",
				purposes: "purposes",
				required: {
					description: "This services is always required",
					title: "(always required)"
				}
			},
			purposeItem: {
				service: "service",
				services: "services"
			},
			consentModal: {
				title: 'Settings for our Cookie´s',
				description:
					'The settings for cookies can be made here, which may be set. There are many settings, but that does not mean that all services are used. This script is a predefined universal script for selecting cookies. <br> <br> For general notes and information, please refer to our <strong> Privacy Policy </strong> or <strong> Terms of Use </strong> which we have linked in the footer of the page.',
			},
			inlineTracker: {
				description: 'Example of an inline tracking script',
			},
			externalTracker: {
				description: 'Example of an external tracking script',
			},
			purposes: {
			essential: {
					description: "These cookies are preset values and must be accepted as they are required for the website to operate. \n",
					title: "Technically necessary cookies"
				},
			extern: {
					description: "Cookies can be set here that are sent through external media such as Youtube, Facebook etc. can be created",
					title: "External media"
				},
			},
		},
	},

	// This is a list of third-party services that Klaro will manage for you.
	services: [
		{
			name: 'essentials',
			default: true,
			optOut: false,
			required: true,
			title: 'Login, Session Cookies',
			purposes: ['essential'],
			cookies: [],
		},
		alert(jsV1);
		{
			name: 'essentials',
			default: true,
			optOut: false,
			required: true,
			title: 'Login, Session Cookies',
			purposes: ['essential'],
			cookies: [],
		}
		alert(jsV2);
		,
		{
			name: 'youtube',
			default: false,
			title: 'Youtube',
			purposes: ['extern'],
			callback : function(consent, app){
			  if (typeof hideAllYoutubeContainer === "function") {
				if (!consent) {
				  hideAllYoutubeContainer();
				} else {
				  showAllYoutubeContainer();
				}
			}
			},
			required: false,
			optOut: false,
			onlyOnce: true,
	},
	],
};

[69bruno]

Mit dem hier

Code: Alles auswählen

<script>
let bruno;
bruno = {{ S_USER_LOGGED_IN|json_encode|raw }};
</script>

Definition der jsvariable: let bruno;
bei dir wäre das dann: let jsv1;
es geht auch mit var bruno; ist aber fehleranfälliger, Doppeldefinitionen wären möglich. "let" lässt das nicht zu.
dann nur befüllen mit der nächsten Zeile. fertig.

das "alert" in der config.js ist nur zum testen. Du kannst die Variable auch ohne das nutzen.
Ich schätze aber, dass da ein Fehler auftauchen wird. Als ich das "alert" zwischen den [] Klammern hatte, hat die Entwicklerlonsole jedesmal gemeckert.