Einen Layer als Ankündigung für besondere Inhalte mit TYPO3 realisieren

Mehr oder weniger flächendeckende Layer, die sich einblenden, sobald die Homepage aufgerufen wird und die über bestimmte Dinge informieren oder wichtige Ankündigungen bereit halten, sind eine schicke und nützliche Sache. Mit TYPO3 geht das relativ einfach.

Die Sache funktioniert mit einem Cookie – anders kann man nicht verhindern, dass der Layer bei jedem Neuladen der Seite oder beim Aufruf einer neuen Seite wieder erscheint.
Zunächst benötigt man ganz am Anfang oder ganz am Ende des HTML-Templates einen Marker oder, wird ein Fluidtemplate verwendet, einen ViewHelper:

###LAYER###

bzw.:

<f:format.raw>{layer}</f:format.raw>

oder:

<f:cObject typoscriptObjectPath="lib.layer" />

Das TypoScript, das den entsprechenden Inhalt generiert, sieht so aus:

lib.layer = CONTENT 
lib.layer {
    table = tt_content
    select {
       pidInList = 100
       where = colPos = 1 
       orderBy = sorting
    }
    stdWrap.required = 1
    stdWrap.wrap = <div id="page-layer"><div id="page-layer-close" class="remove-layer">x</div>|</div>
}

Die Datensätze, die im Layer angezeigt werden sollen, liegen also auf der Seite mit der id 100 in der Spalte 1. Schön ist stdWrap.required = 1. Damit ist die RedakteurIn in der Lage, den Layer zu aktivieren, indem der Datensatz freigeschaltet wird. Verwendet man das AdminPanel und stellt es so ein, dass versteckte Datensätze angezeigt werden, kann man den Layer sehr einfach testen, indem man ihn zunächst versteckt.
Der Wrap außen herum ist ein div mit einem „Schließen-Kreuz“. Beides wird über CSS gestylt, z.B. so:

#page-layer {
  position: fixed;
  overflow: scroll;
  z-index: 200;
  width: calc(100% - 60px);
  height: calc(100% - 60px);
  padding: 40px;
  box-sizing: border-box;
  background: rgba(255,255,255,0.95);
  left: 30px;
  top: 30px;
  box-shadow: -4px 3px 89px 19px rgba(0,0,0,0.75);
  /* display: none; */
}
#page-layer-close {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 46px;
  cursor: pointer;
}

Hat man das eingerichtet und den Datensatz aktiviert, wird der Layer angezeigt. Später kommentieren wir dann das display: none; ein.

Jetzt müssen wir nur noch dafür sorgen, dass, sobald der Schließen Knopf oder ein Link im Text angeklickt wurde, ein Cookie gesetzt wird, das verhindert, dass der Layer bei jedem Laden einer Seite erneut aufgerufen wird.

Dafür brauchen wir jQuery und ein Cookie Skript. Für das Cookie verwenden wir dieses: https://github.com/js-cookie/js-cookie. Dann schreiben wir in unserem eigenen JS:

$(document).ready(function(){
 
  var cookie = Cookies.get('layer');
 
   // ein Link im Text soll ebenfalls das Cookie aktivieren
  $("#page-layer").find("a").addClass("remove-layer");
 
  // beim Klick auf en Schließen Knopf oder einen Link im Text wird das Cookie aktiviert und der Layer ausgeblendet
  $(".remove-layer").on('click', function() {
    Cookies.set('layer', '1', { expires: 1 })
    $('#page-layer').fadeOut();
  });
 
  if (cookie){
     $('#page-layer').hide();
  } else {
     $('#page-layer').show();
  };
});

Für das Einbinden des Cookie Skripts habe ich mich für diese Variante entschieden:

<script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>

Genaueres zu diesem Skript und zur Einbindung findet man auf Github.

display: none; im CSS und das else in der Abfrage auf das Cookie bewirkt, dass der Layer, wenn weggeklickt, nicht kurz erscheint beim Neuladen einer Seite.

Das ehemalige jQuery Cookie Plugin, das auch hier in einer früheren Version dieses Artikels beschrieben wurde, wird nicht mehr weiter entwickelt.