Ein Artikel von Paul Lunow, erschienen 2008 auf Interaktionsdesigner.de.

Zuletzt überarbeitet am von : .

Denkst Du darüber nach zu gründen? Eine Familie oder ein Startup oder beides? In der zweiten Staffel meines Podcasts spreche ich mit tollen Menschen genau darüber. Lass Dich inspirieren und abonniere meinen Podcast: Auf Apple Podcast, Spotify und auf www.gründerväter.net.

Vorbereitungen

jQuery und NyroModal sind eingebunden und funktionsbereit. Am besten auf einer kleinen Testseite ausprobieren damit es nicht an der grundlegenden Funktionalität scheitert.

Neue Templates

Um die Inhalte befreit vom Rahmen darstellen zu können spendieren wir dem Projekt einen neuen Typ der Darstellung. Diesen kann man ansprechen über die Variable &type=XXX, wobei XXX für eine beliebige Nummer steht. Ich nehme mal 101.

nurinhalt = PAGE
nurinhalt {
  typeNum = 101
}

# Alles kopieren
nurinhalt.10 < page.10

# Und das Template anpassen
nurinhalt.10.template.file = fileadmin/template/nurinhalt.template.html

Wir duplizieren unsere Standardausgabe und machen ihn erreichbar über die Angabe typeNum die jeweils nur ein einziges Mal benutzt werden darf. Anschließend wird ein neues Template zugewiesen welches nur noch die benötigten Teile enthält.

<div class="only">
###CONTENT###
<span class="clear"> </span>
</div>

Cache löschen und fertig. Über den Parameter &type=101 kriegen wir jetzt jeden Inhalt ohne den ganzen Kram drum herum. Unbedingt mit einer beliebigen ID testen: index.php?id=123&type=101. Wenn es nicht klappt hilft ein Blick in den Object Browser der zeigt was aus unserem Typoscript wird.

JavaScript

Das Fenster soll nur auf der Startseite erscheinen. Also ein Extensiontemplate für die Seite einrichten und ein externes JavaScript einbinden oder direkt im Template über headerData den Kopfbereich der Seite erweitern.

$(document).ready(function() {
  $.nyroModalManual({
    type: "ajax",
    url: "index.php?id=123&type=101",
    width: 500,
    height: 400
  });
});

Hier kommt NyroModal ins Spiel, welches eine konfortable Funktion mit unendlich vielen Einstellungen bietet (viel besser als die Thickbox welche mich immer nervt wenn ich sie manuell öffnen möchte). Mit der Funktion nyroModalManual öffnen wir ein neues Fenster mit unserem neuen Inhalt.

NyroModalManual und TYPO3 PageType für Links

Mit ein paar wenig mehr Zeilen haben wir eine schöne Lösung für Links die ein Nyrofenster öffnen sollen.

$("a.nyro").click(function() {
  url = $(this).attr("href");
  $.nyroModalManual({
    type: "ajax",
    url: url+"&type=101",
    width: 500,
    height: 400
  });
  return false;
});

Dieses Script öffnet die angeklickten Links mit der Klasse “nyro” in einem netten Fenster, hat der Benutzer kein JavaScript aktiviert kriegt er die Inhalte im Rahmen der Seite präsentiert. Herrlich! Jetzt mag ich TYPO3 wieder. Ein paar kleine Stolperfallen sind noch drin, z.B. macht URL Rewriting dem ein Strich durch die Rechnung; bleibt nur zu sagen, mitdenken hilft!