Tutorial: Cookie Meldung in OXID eShop aktivieren und anpassen

15.02.2016 (letztes Update 17.08.2021)

Websites und Shops verwenden Cookies. Das sind kleine Textdateien, in denen besucherbezogene Daten gespeichert werden. Damit erkennt der Shop oder die Website den Besucher wieder. Und zwar nicht nur nach zwei Tagen, sondern bei jedem Aufruf einer einzelnen Seite.

Schon seit vielen Jahren gibt es eine EU-Richtlinie, die den Einsatz von nicht unbedingt notwendigen Cookies nur nach ausdrücklicher Zustimmung erlaubt. In der Praxis wurde dies durch die Cookie-Meldung so gelöst, dass mit dem Besuch einer Website quasi dieses Einverständnis stillschweigend erteilt wird. Dazu wird beim ersten Besuch eine entsprechende Meldung angezeigt – auch Cookie Note genannt.

In Deutschland ist diese Meldung zwar nicht gesetzlich vorgeschrieben, aber Google hat sie im Sommer 2015 für mehrere seiner Dienste zur Pflicht erklärt, und außerdem setzt sie sich immer mehr durch.

Auch wenn sich bei Besuchern inzwischen herumgesprochen haben sollte, dass Websites – insbesondere Shops – Cookies verwenden, ist man mit einer Cookie Note, die beim ersten Aufruf der Website erscheint – rechtlich auf sichererer Seite.

OXID bringt Cookie Note Funktion bereits mit, und zwar schon lange. Ich möchte aber nicht nur zeigen, wie Sie sie aktivieren (denn das ist nur ein Klick), sondern auch wie Sie sie anpassen können. Ich sage auch, warum man es tun sollte.

Cookie Meldung in OXID eShop aktivieren

Das ist einfach: Gehen Sie im Backend auf Stammdaten → Grundeinstellungen, dort auf den Tab "Einstellungen" und aktivieren Sie unter "Weitere Einstellungen" ganz unten die Checkbox „Kunden müssen der Verwendung von Cookies zustimmen“. Ab sofort wird die Meldung jedem Besucher beim ersten Besuch im Shop angezeigt.

Nun wird die Optik der Meldung nicht jedermans Sache sein. Ich finde auch den Text zu lang. Und den Link soll man klicken, wenn man nicht einverstanden ist. Auf den meisten anderen Websites gibt es hier aber erst noch "weitere Informationen" - ich finde, das klingt viel besucherfreundlicher. Ich habe also drei Änderungswünsche:

• Optik anpassen,
• Text der Meldung ändern,
• Link ändern auf eine Seite mit weiteren Informationen.

Layout des OXID Cookie Notes ändern

Der Text zieht sich aktuell über die komplette Breite. Auf großen Monitoren finde ich den Text schwer lesbar, weil er sehr breit läuft, breiter als der Shop ist. Das möchte ich ändern. Ich will, dass die Box zwar weiterhin über die gesamte Breite läuft, der Text aber maximal die Breite der Shopansicht hat.

Öffnen Sie die Datei

/out/mein-theme/src/css/oxid.css

(ersetzen Sie mein-theme durch den Verzeichnisnamen zu Ihrem Theme). Suchen Sie dort den Eintrag #cookieNote .notify und ergänzen Sie ihn wie folgt:

#cookieNote .notify {
    /* die anderen Einstellungen bestehen lassen */
    margin: auto;
    width: 940px;
    line-height: 1.3em;
}

margin: auto sorgt dabei dafür, dass der Eintrag automatisch zentriert wird. line-height: 1.3em sorgt dafür, dass die Textzeilen nicht so eng aneinander kleben.

Standardmäßig kommt die Cookie-Note Box im OXID Azure Theme mit orangem Hintergrund. Das möchten Sie vielleicht auch ändern - in unserem Shop passt es jedenfalls ganz und gar nicht.

Suchen Sie in der oben genannten oxid.css den Eintrag #cookieNote. Dort gibt es eine Eigenschaft background-color, dahinter ist eine sechsstellige Zeichenkette mit # Zeichen davor angegeben. Das ist der Farb-Hexcode. Wenn Sie Ihren gewünschten Farbcode kennen, setzen Sie ihn dort ein. Sicher weiß Ihr Grafiker den Farbcode der gewünschten Farbe, oder Sie ermitteln ihn mit einem Browser-Plugin, wie z. B. ColorZilla für den Firefox.

Prüfen Sie nach der Änderung auf jeden Fall die Darstellung. Wenn Sie eine hellere Hintergrundfarbe wählen, macht es wahrscheinlich Sinn, die Schriftfarbe von weiß auf grau oder schwarz umzustellen, damit der Text weiterhin gut lesbar bleibt. Ändern Sie hierzu analog den Farbcode hinter der Eigenschaft color für den Eintrag #cookieNote und auch für den Eintrag #cookieNote a - denn das ist die Farbe für die Links.

Da die Meldung im Shop nur einmalig angezeigt wird, müssen Sie zum nochmaligen Testen das Cookie für Ihren Shop löschen. Im Firefox machen Sie das unter Einstellungen → Datenschutz → einzelne Cookies löschen. Geben Sie hier die Adresse zu Ihrem Shop an und löschen Sie die Cookies.

Oder Sie deaktivieren Cookies für den Moment ganz, aber nicht vergessen, sie anschließend wieder zu aktivieren!

Wichtig - wenn Sie ein mobiles Theme einsetzen, prüfen Sie auch dort die Darstellung und passen Sie sie falls nötig an. Sie ändern dazu die Einstellungen in der oxid.css des mobilen Themes. Achtung, hier ist #cookieNote durch .cookie-note zu ersetzen!

Text der Meldung ändern

Der Text in der Standard-Meldung ist sehr lang und klingt echt stelzig. Kürzer und knackiger geht es auch.

Öffnen Sie die Datei

/application/views/mein-theme/de/cust_lang.php

(mein-theme ersetzen Sie wieder durch den Verzeichnisnamen Ihres Themes). Falls die Datei noch nicht da ist, kopieren Sie sie am besten aus

/application/views/azure/de.

Ergänzen Sie nun unten vor der schließenden Klammer folgenden Eintrag:

'COOKIE_NOTE' => 'Durch die fortgesetzte Nutzung des Online-Shops erklären Sie sich mit der Verwendung von Cookies einverstanden.',

Achten Sie unbedingt darauf, dass die Zeile über Ihrem neuen Eintrag auf ein Komma endet. Sie können den Text natürlich beliebig abändern.

Außerdem können Sie den Linktext ändern:

'COOKIE_NOTE_DISAGREE' => 'Mehr Informationen'

Hier verlinken wir gleich im nächsten Schritt auf eine andere Seite, die mehr Informationen zum Thema Cookies bietet.

Änderungen an den Übersetzungsdateien werden erst übernommen, nachdem der tmp-Ordner geleert wurde - also bitte gleich noch machen (oder im nächsten Schritt, da müssen wir es ohnehin nochmal tun). Wichtig: die Datei .htaccess muss bleiben, falls sie da ist.

Infoseite anlegen und verlinken

Gehen Sie nun im Backend auf Kundeninformationen → CMS. Legen Sie dort eine neue Seite an. Geben Sie der Seite eine beliebige ID, z. B. dwacookies. Diese ID benötigen Sie gleich nochmal.

Erstellen Sie dann den Seitentext. Sie können dort z. B. folgenden Inhalt einfügen:

Titel: "Infos zu Cookies"

In diesem Online-Shop setzen wir sogenannte „Cookies“ ein.

Hierbei handelt es sich um kleine Textdateien, die von unserem Webserver an Ihren Computer gesendet werden, um diesen für die Dauer des Besuchs zu identifizieren.

Über diese Cookies erfassen wir keine personenbezogenen Daten.

Die Darstellung des Shops ist auch ohne die Speicherung von Cookies möglich. Sie können das Speichern von Cookies in den Einstellungen Ihres Browser deaktivieren oder diesen so einstellen, dass er Sie über die beabsichtigte Speicherung durch eine Internetseite informiert. In diesem Fall entscheiden Sie über die Annahme des Cookies.

Allerdings empfehlen wir, für den Shop Cookies zuzulassen, da diese aus technischen Gründen für den vollen Funktionsumfang erforderlich sind.

Möchten Sie Ihre Cookies löschen, die für diesen Shop gesetzt wurden, klicken Sie bitte hier.

Legen Sie hinter den letzten Satz den Link auf die dafür von OXID vorgesehene Seite (/cookies). Übrigens können Sie diese Seite ebenfalls im CMS anpassen, das ist die Seite mit der ID oxcookiesexplanation.

Legen Sie auf dem Tab "SEO" eine eindeutige URL für die Seite fest, z. B. cookie-infos. Aktivieren Sie dann Ihre neue CMS-Seite.

Nun kommt der schwierigste Teil - die Verlinkung. Wenn Sie keinen ordentlichen Editor haben, seien Sie besonders sorgsam bei der Durchführung der Änderungen! Öffnen Sie dazu die Datei /application/views/mein-theme/tpl/widget/header/cookienote.tpl.

Ist sie nicht da, kopieren Sie sie aus dem entsprechenden Unterverzeichnis von azure.

Suchen Sie folgenden Eintrag:

  getSelfLink()|cat:"cl=clearcookies" }]" title="[{oxmultilang ident='COOKIE_NOTE_DISAGREE'}]">
    [{oxmultilang ident='COOKIE_NOTE_DISAGREE'}]
  

Setzen Sie vor diesen Bereich folgende Zeile:

[{oxifcontent ident="dwacookies" object="oCont"}]

Ersetzen Sie dwacookies ggf. durch die ID, die Sie oben für die Seite gesetzt haben.

Setzen Sie nun hinter den Bereich folgende Zeile:

[{/oxifcontent}]

Nun noch ein letzter Schritt. Ersetzen Sie in dem Bereich den Text

[{ oxgetseourl ident=$oViewConf->getSelfLink()|cat:"cl=clearcookies" }]

durch

[{$oCont->getLink()}]

Laden Sie die Datei in das Verzeichnis Ihres Themes hoch. Nun ist nochmal das tmp-Verzeichnis zu leeren, damit die Änderungen übernommen werden.

Zu kompliziert? Wenig Zeit? Wir helfen.

Ich weiß, das kann frustig sein, wenn ich hier schreibe, "ganz leicht" - und man dann die Datei oder die Zeile nicht findet, oder wenn man keine Zeit hat.

Ich habe versucht, es so genau wie möglich zu erklären, aber ich so geschriebene Anleitungen sind trotzdem manchmal schwierig, wenn sie mehrere Schritte beinhalten. Vor allem, wenn Dinge dabei sind, die man noch nie gemacht hat. Ich wollte die Anleitung trotzdem schreiben - aber ehe sie verzweifeln: Wir helfen auch!

Im Zweifel geht das dann auch noch viel schneller und Sie haben den Kopf frei. Daher: Nicht lang verzagen, fragen Sie uns einfach.

[Update 17.02.2016] - In Shops, die in Unterverzeichnissen laufen, wie beispielsweise unserer, funktioniert die Verlinkung nicht so, wie ich ursprünglich vorgeschlagen habe, daher habe ich diesen Abschnitt nochmal etwas angepasst.

Sharing is caring - teile den Beitrag

Ähnliche Beiträge

24.01.2014 | Umsatz ankurbeln

Newsletter-Guide für Einsteiger (IV) - Verteiler einrichten

28.05.2024 | Marketing: SEO & Co.

Blogbeiträge für SEO schreiben - Schritt für Schritt

10.08.2016 | Recht & Sicher

Schütze deinen Shop vor Hacking-Angriffen

17.10.2022 | Recht & Sicher

Achtung Abmahnfalle: Google Fonts im OXID Theme

Beitrag kommentieren