Skip to main content

Best Practices: Callisto und DSGVO

Hier findest du Best Practices zum Thema DSGVO und Callisto.

1. Kontaktformular DGSVO-konform in Callisto anpassen

Im Folgenden findet ihr eine Anleitung zur Erweiterung des Kontaktformulars, damit der Endkunde die Datenschutzerklärung akzeptieren muss.

1.1. Kontaktformular um zwei weitere Felder erweitern

Unter System » CMS » Formular findet man das Kontaktformular, welches im Standard-Layout in der Kategorie Kontakt aufgerufen wird.

Innerhalb des Formulars werden nun zwei weitere Felder hinzugefügt:

  1. Der erste Feldname (in meinem Beispiel Akzeptiere) bekommt den Typ Auswahlfeld (checkbox) und ist beim Pflichtfeld NEIN gestellt.

  2. Zweiter Feldname Bitte der Datenschutzerklärung zustimmen!, Typ: einzeiliges Eingabefeld und Pflichtfeld JA

CMS Formulare
Bild 1. Kontaktformular um zwei Felder erweitern

Die Zahlen auf der linken Seite des Screenshots sind die IDs der Datenfelder und werden für Schritt 2 benötigt. Beachte: Die IDs fangen bei 0 und nicht bei 1 an.

1.2. Kategorie für das Kontaktformular anpassen

Unter Artikel » Kategorien sucht man die genutzte Kategorie für das Kontaktformular, was im Standard-Layout die Kategorie Kontakt ist.

In der Kategorie öffnet man das Tab Beschreibung 1 und stellt Editor auf Syntax-Editor um.

Anschließend muss folgendes Script eingefügt werden:

<script>
$(document).ready(function(){
	var privacyTr = $('.PlentySubmitFormInput[name="FormFields[10]"]');
	var privacyHidden = $('.PlentySubmitFormInput[name="FormFields[11]"]');
	/* Checkbox auf true setzen, falls im Vorfeld schon aktiviert */
	if(privacyHidden.val() != '') privacyTr.attr('checked', true);
	/*-*/
	privacyHidden.parents('tr').first().css('display', 'none'); // Zeile mit Pflichfeld verstecken
	privacyTr.parents('tr').first().find('.PlentySubmitFormLabel').append('<br /><a href="{% Link_PrivacyPolicy() %}" target="_blank">Datenschutzerklärung</a>');
	privacyTr.parents('tr').first().find('.PlentySubmitFormLabel').css('font-weight', 'bold')
	/* Wert der Checkbox auf Pflichfeld übertragen */
	$('form[name=plenty_form]').submit(function() {
	if($(privacyTr[1]).is(':checked')){
		privacyHidden.val('true');
	}else{
		privacyHidden.val('');
	}
});
});
</script>

Dieses Script enthält zwei FormFields, wo sich in den Klammer zwei Zahlen befinden. Diese Zahlen sind die IDs von den Datenfelder aus Schritt 1, welche in dem Screenshot zu erkennen sind.

Wenn das Kontaktformular anders aufgebaut ist, dann muss man dort auch die IDs im Script entsprechend anpassen.

CMS Kategorien
Bild 2. Kategorie für das Kontaktformular anpassen

1.3. Einstellungen im Frontend gegentesten

Kontaktformular im Frontend aufrufen und dort sind nun zwei neue Datenfelder und eine Checkbox:

Frontend 1
Bild 3. Zwei neue Datenfelder und eine Checkbox im Frontend

Füllt man das Formular aus und akzeptiert die Datenschutzerklärung nicht, wird kein Formular abgeschickt. In diesem Fall erscheint eine Fehlermeldung mit dem entsprechenden Hinweis:

Fehlermeldung Frontend
Bild 4. Fehlermeldung im Frontend

Erfüllt der Endkunde alle Bedingungen, wird das Formular verschickt:

Erfolgsmeldung Frontend
Bild 5. Erfolgsmeldung im Frontend

2. Newsletter-Anmeldung auf der Startseite anpassen

Im Folgenden findet ihr eine Anleitung zur Erweiterung der Newsletter-Anmeldung auf der Startseite eures Webshops, damit eure Kunden die Datenschutzerklärung akzeptieren müssen.

Im PageDesignContent des Tabs PageDesignContentMainFrame findet in der Zeile 198 der Aufruf vom Container NavigationCategories9 statt und in diesem Container wird der Newsletter-Part definiert. Diesen Aufruf gibt es auch im PageDesignCheckout und PageDesignMyAccount.

Zur Bearbeitung öffnet man den Container NavigationCategories9 und schiebt das Tag </form> von der Zeile 26 in die Zeile 27. In der freigewordenen Zeile 26 wird folgender Code eingefügt:

 <br>
    <input type="checkbox" required name="TermsAndConditionsCheck" value="1" oninvalid="this.setCustomValidity('Bitte Akzeptieren Sie unsere Datenschutzerklärung')" oninput="this.setCustomValidity('')"> Hiermit akzeptiere ich die <a href="{% Link_PrivacyPolicy() %}" title="Datenschutzerklärung" target="_blank">Datenschutzerklärung</a>

Eingebaut sieht es am Ende so aus:

NavigationCategories9Content
Bild 6. NavigationCategories9Content

Der Part required im input-Tag sorgt dafür, dass ein Abschicken ohne den Haken gesetzt zu haben, nicht möglich ist. Sollte der Kunde trotzdem versuchen, die Anmeldung abzuschicken, erscheint ein Hinweistext, dass der Kunde die Datenschutzerklärung vorher akzeptieren muss.

Hinweistext
Bild 7. Hinweistext Newsletter-Anmeldung

Die Texte können beliebig angepasst werden und sind in dem neu eingefügten Code Snippet zu finden.

3. Checkbox zur Einwilligung der Datenübertragung an Versanddienstleister in Callisto einbinden

Im Folgenden findet ihr eine Anleitung zur Einbindung einer Checkbox, mit der der Endkunde die Weitergabe seiner Daten an Versanddienstleister akzeptieren kann.

Öffnet das Menü Artikel » Kategorien » callisto_light_3_5 » Bestellübersicht & Kaufabschluss » Beschreibung 1. Dieser Pfad kann, abhängig von eurer Kategorienstruktur, in eurem System abweichen. Der oben aufgeführte Pfad bezieht sich auf die Kategorien, die standardmäßig in plentymarkets Systemen hinterlegt sind.

Sucht im Code die Checkbox für die Altersverifikation, indem ihr nach GetGlobal("ValidateAgeRestrictionCheck") sucht und fügt unter dem folgenden {% endif %} den folgenden Code ein:

	{% if $CheckoutShippingProfileID == 10 %}
		<li class="checkbox" data-plenty-validate="{min: 1, max: 1}">
			<label>
				<input type="checkbox" name="DHLDataCheck" value="1"> Ich bin damit einverstanden, dass meine E-Mail-Adresse bzw. meine Telefonnummer an DHL, Charles-de-Gaulle-Straße 20 53113 Bonn weitergegeben wird, damit der Paketdienstleister vor der Zustellung der Ware zum Zwecke der Abstimmung eines Liefertermins per E-Mail oder Telefon Kontakt mit mir aufnehmen kann bzw. Statusinformationen zur Sendungszustellung übermitteln kann. Meine diesbezüglich erteilte Einwilligung kann ich jederzeit widerrufen.
			</label>
		</li>
    {% endif %}

Die Versandprofil ID 10 muss hierbei mit dem Versandprofil in eurem System korrespondieren, für welches ihr die Einwilligung braucht. Passt dabei den Text und die Adresse des jeweiligen Versanddienstleisters an.

Sucht nun im Code in Beschreibung 1 nach GetGlobal("ShowAgeRestrictionCheck") und fügt den den oben aufgeführten Code ein weiteres Mal unter dem darauffolgenden {% endif %} ein.

Die Checkbox erscheint nur dann im Checkout, wenn das entsprechende Versandprofil ausgewählt wurde. Für jeden Versender, für den es nötig ist, muss eine gesonderte Checkbox angelegt werden. Dabei ist zu beachten, dass im Code an der Stelle name= jeder Checkbox ein einzigartiger Name zugeteilt wird, bspw. DPDDataCheck.

Besten Dank an Forumsnutzer wdsrakoe, der diese Lösung in diesem Forumsbeitrag vorgestellt hat.

4. Google Analytics Opt-out Cookie setzen

In diesem HowTo wird beschrieben, wie man auf der Seite Datenschutzerklärung einen Link einfügt, über den das gesamte Tracking für Google Analytics deaktiviert werden kann.

Hierfür wird folgendes Script in den Containern PageDesginContent, PageDesingMyAccount, und PageDesignCheckout direkt nach dem Tag <head> eingefügt:

<script>

var gaProperty = 'UA-XXXXXXXXX-X';
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
  window[disableStr] = true;
}
function gaOptout() {
  document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
  window[disableStr] = true;
}

</script>

Hierbei muss darauf geachtet werden, dass der Part UA-XXXXXXXXX-X durch deine Daten angepasst wird.

In der verknüpften Kategorie für die Datenschutzerklärung wird noch folgenden Part eingefügt:

<a
onclick="alert('Google Analytics wurde deaktiviert');"
href="javascript:gaOptout()">Google Analytics deaktivieren</a>

Wenn der Kunde den eingefügten Link drückt, wird das Tracking für den weiteren Besuch des Kunden deaktiviert.

Zum Seitenanfang