Zurück zur Übersicht

Tutorial: Cookie Meldung in OXID eShop aktivieren und anpassen

15.02.2016 (letztes Update 17.08.2021)

Weihnachtsplätzchen ohne BackenWebsites 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 StammdatenGrundeinstellungen, 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 EinstellungenDatenschutzeinzelne 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 KundeninformationenCMS. 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.

Kategorien: Zeit, Geld & Nerven | Schlagworte: Cookies, oxidforge, Recht für Shops, Tutorial

Sharing is caring - teile den Beitrag

Tipps + News für deinen Online-Shop

Abonniere den Grips-Letter, und erhalte Ideen und Impulse für deinen Shopware oder OXID Shop, die dir helfen, sichtbarer zu werden, deinen Umsatz zu steigern und Zeit, Geld und Nerven zu sparen. Für 0 Euro direkt in dein Postfach!

Du kannst dich jederzeit wieder abmelden. Mehr dazu findest du in unserer Datenschutzerklärung.

Kommentare

Carlo sagt:

07.11.2016 um 09:46 Uhr

Hallo, ich habe mal eine kleine Frage, und zwar, so bald der Kunde die Seite wechselt, ist die Cookiemeldung nicht mehr da, egal ob er auf einverstanden geklickt hat oder nicht. Müsste die Meldung aber nicht so lang da sein, bis der Kunde auf einverstanden klickt ?

Antworten

Bettina Ramm sagt:

07.11.2016 um 12:17 Uhr

Ja, im OXID ist es so voreingestellt, dass es einmal angezeigt wird, und dann verschwindet. Der Besucher erklärt sich sozusagen einverstanden mit der Verwendung von Cookies, wenn er weiter surft. Da er weiter surft, wird sein Einverständnis vorausgesetzt. Mittlerweile sind viele Websites tatsächlich dazu übergegangen, die Meldung so lange anzuzeigen, bis man sich ausdrücklich einverstanden erklärt. Zur Frage, ob das nötig ist, möchte ich mich lieber nicht äußern :) Das erfordert dann aber doch nochmal etwas Anpassungen an OXID, um das so zu realisieren. Wenn Interesse besteht, nehme ich das mal auf meine Tutorial-Themen-Liste mit auf.

Carlo sagt:

07.11.2016 um 20:59 Uhr

Also bei mir würde ein Interesse daran bestehen. Danke :)

Thomas sagt:

17.10.2016 um 17:07 Uhr

Hi Bettina, vielen Dank! Hat geklappt! Thx, Thomas

Antworten

Thomas sagt:

17.10.2016 um 06:58 Uhr

Endlich mal eine super verständliche Beschreibung! So gefällt mir das, weiter so. Weißt du zufällig, wo man ändern kann, dass die Meldung nicht am Seitenanfang, sondern stattdessen am Seitenende erscheint??? Thx!

Antworten

Bettina Ramm sagt:

17.10.2016 um 09:19 Uhr

Hallo Thomas, ja, das ist mit CSS recht einfach machbar. Das Element mit der ID #cookieNote ist ja schon absolut positioniert, nur eben ganz oben. Um es unten zu positieren, suche dir den Abschnitt #cookieNote { ... } in der oxid.css und ändere top: 0; in bottom: 0; Ich habe das nicht getestet, also unbedingt prüfen, ggf. ist noch Feinschliff nötig. LG, Bettina

Gunar Wünsch von http://www.dasfolienkartell.de sagt:

03.03.2016 um 14:29 Uhr

Danke für diese Beschreibung, einfacher (LOL) geht es wirklich nicht. Oxid ist halt so aufgebaut wie es eben ist. Gruß Gunar

Antworten

Beitrag kommentieren

Wie alle anderen Websites verwendet auch unsere Cookies. Wenn du unsere Website verwendest, stimmst du dem zu.

Folgende Cookies zulassen:

Alle akzeptieren

Mehr Infos


Welche Cookies werden gesetzt?

Marketing
_fbp Dieses Cookie verwendet Facebook, um Werbeprodukte anzuzeigen.
Notwendig
PHPSESSID Behält die Einstellungen der Seite des Benutzers bei allen Seitenanfragen bei.
robin_marketing_popup Sorgt dafür, dass das Marketing-Popup nicht bei jedem Seitenwechsel erneut aufpoppt.
dwa_cookie_noticed Speichert die Einwilligungen zu den Cookies für ein Jahr. Dieser Cookie kann zurückgesetzt werden, wenn die Einwilligung entzogen werden soll.
Statistik
_pk_id Matomo - Cookie zum Speichern einiger Details über den Benutzer, z. B. der eindeutigen Besucher-ID (anonymisiert), notwendig zum Zählen wiederkehrender Besucher. - Speicherdauer 13 Monate
_pk_ses Matomo-Cookie zur Speicherung Sessionabhängiger Nutzerdaten - Speicherdauer 30 Minuten

Weggabelung

Lohnt sich ein Umstieg von
OXID eShop auf Shopware?