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 Cookies – 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 Fluidtemplate verwendet, einen ViewHelper mit einer Variable oder einem cObject:

###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">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 der / 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:absolute;
  padding:10%;
  box-sizing:border-box;
  background:rgba(255,255,255,0.95);
  left:30px;
  top:30px;
  -webkit-box-shadow: -4px 3px 89px 19px rgba(0,0,0,0.75);
  -moz-box-shadow: -4px 3px 89px 19px rgba(0,0,0,0.75);
  box-shadow: -4px 3px 89px 19px rgba(0,0,0,0.75);
  z-index:100;
  display:none;
}
#page-layer-close {
  position:absolute;
  top:30px;
  right:30px;
  font-size:46px;
  cursor:pointer;
}

Jetzt brauchen wir noch JavaScript, wie immer in Form von jQuery. Wir benötigen die Bibliothek, das Cookie Plugin und ein paar Zeilen Selbstgeschriebenes:

$(document).ready(function(){
  var height = $(document).height();
  var width = $(document).width();
 
  $("#page-layer").css({"height":height-60,"width":width-60});
 
  if (typeof $.cookie("pagelayer") === "undefined"){
    $("#page-layer").show();
  } else {
    $("#page-layer").hide();
  };
 
  $("#page-layer").find("a").addClass("page-layer-link");
 
  $("#page-layer-close").on("click", function(){
    $.cookie("pagelayer","set",{ path: '/' });
    $("#page-layer").hide();
  });
  $(".page-layer-link").on("click", function(){
    $.cookie("pagelayer","set",{ path: '/' });
  });
});

Zunächst wird die Höhe und Breite des Layers ermittelt und gesetzt. Sodann wird er angezeigt (per CSS steht er ja auf display:none;), wenn kein Cookie mit dem Namen „pagelayer“ vorhanden ist. Das Cookie wird nicht nur beim Klick auf das „Schließen-Kreuz“ gesetzt, sondern auch wenn ein eventueller Link, der im Layer vorhanden ist, angeklickt wird. Der Name des Cookies "pagelayer" ist für die obige Abfrage wichtig, der Wert "set" egal. Wichtig ist allerdings noch dieses: { path: '/' }, da ansonsten das Cookie beim Einsatz von RealUrl nur die jeweilige Rubrik berücksichtigen würde, bei der es gesetzt wurde. Die Lebensdauer des Cookies ist in diesem Beispiel der default Wert: es wird gelöscht, wenn der Browser beendet wird.
Wichtig ist auch die Reihenfolge der jQuery Dateien: zunächst wird die Bibliothek eingebunden, dann das Cookie Plugin und am Ende unser eigener Code, z.B. so:

page.includeJSFooter {
  file10 = fileadmin/components/jquery/dist/jquery.min.js
  file20 = fileadmin/components/jquery-cookie/jquery.cookie.js
  file30 = fileadmin/template/js/layer.js
}

Natürlich kann man es auch so machen, dass das Cookie Plugin, sofern es sonst nicht benötigt wird, und das layer.js zusammen mit dem Layer in dem oben angegeben Wrap verlinkt wird. Das setzt allerdings voraus, dass die Bibliothek nicht erst im Footer geladen wird. Geschmacksache.