TYPO3-Turtorial für AJAX-Loading
Eine TYPO3-Website so zu konfigurieren, dass Inhalte asynchron per AJAX nachgeladen werden, bringt Vorteile in puncto Ladezeiten.
Klar – denn das komplette Mark-up von Menü und Footer, Scripte und Styles können bestehen bleiben, lediglich der Content muss ersetzt werden, ohne die gesamte Seite neu zu laden. An folgenden Beispielcodes können Sie sehen, wie Sie dies einfach in TYPO3 umsetzen können.
Verwendung von PJAX
Beim ansynchronen Nachladen von Content ist die Library PJAX eine hilfreiche Lösung, die sich sehr einfach integrieren lässt. Für PJAX ist jQuery 1.8 oder höher erforderlich und lässt sich einfach installieren.
Javascript libraries per typoscript einbinden:
page.includeJSFooter.pjax = https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js page.includeJSFooter.jquery = https://code.jquery.com/jquery-1.8.0.js
Javascript:
(function(){
$(document).pjax('a:not([data-ajax="false"])', '#content', {fragment: '#content'});
})();
Typoscript Page-Setup:
page = PAGE
page {
10 < styles.content.get
10.wrap = <main id="content">|</main>
}
Konfiguration von TYPO3
Beim Klick auf einen Link wird nun mithilfe von PJAX ein GET-Parameter angehängt. Dieser kann über eine typoscript Condition abgefragt werden, worüber wir das Ergebnis manipulieren können. Dabei setzen wir noch zusätzliche Robots Anweisungen, dass diese URLs nicht in den Suchergebnissen gelistet werden.
Nachdem vom Sever lediglich die Content-Elemente der Seite ausgeliefert werden, wird das "#content" des Requests mit dem "#content" der aktuellen Seite ersetzt.
Typoscript Page-Setup für AJAX-Anfrage:
[globalVar = GP:_pjax = #content]
page >
page = PAGE
page {
config.disableAllHeaderCode = 1
meta.robots = noindex, nofollow
10 < styles.content.get
10.wrap = <main id="content">|</main>
}
[global]