TYPO3
TYPO3, das Enterprise CMS!

TYPO3

Open-Source Content Management mit TYPO3

Das Web-CMS TYPO3 ist lizenzkostenfrei, äußerst flexibel und kann an fast allen Anforderungen angepasst werden. Mit TYPO3 sind Sie in der Lage, die Inhalte Ihrer Webseite ohne Programmierkenntnisse zu pflegen.

Magento
Magento eCommerce

Magento

Magento - Professional eCommerce-Plattform

Magento ist der neue Star am eCommerce-Himmel. Durch Magento haben Sie eine eCommerce-Plattform, die enorm flexibel ist, wenn es um den Aufbau eines- oder mehrerer Webshops geht. Durch die Multistorefähigkeit von Magento, sind Sie in der Lage, über nur eine Verwaltungsoberfläche gleich mehrere Shops zu administieren.

xt:Commerce
xt:Commerce

xt:Commerce

Mit xt:Commerce haben Sie einen echten Gewinn!

Das Open-Source Shop-System xt:Commerce ist nach wie vor die in Deutschland am meisten eingesetzte Webshop-Software.

Mit JQUERY Inhalte dynamisch nachladen (Templavoila)

Verwenden Sie noch das alte Templating in TYPO3 mit Subparts und Markern, findet Sie haufenweise Anleitungen im Netz, wie Sie die Inhalte aus der Datenbank dynamisch mit JQUERY- oder einem anderen Javascript-Framework nachladen können.

In diesem Tutorial möchte ich Ihnen zeigen, wie Sie auch die Inhalte dynamisch nachladen können, wenn Sie Templavoila als Template-Engine benutzen.

Das erste was Sie dafür benötigen, ist ein sogenanntes Sub-Template in Templavoila. Mit Sub-Templates in Templavoila ist es u.a. möglich, Ausgaben für verschiedene Ansichten zu steuern, wie es z.B. bei der Druckversion in Templavoila der Fall ist. Also benötigen wir ein Sub-Template, welches nur den Inhalt der jeweiligen Seite holt.

Um nun eine solche Ansicht erstellen zu können, wird ein neuer "type of rendering" benötigt. Hier für müssen Sie folgende Typoscript-Zeile im TSconfig (Seiteneigenschaften) der Root-Page hinzfügen.

Quelltext: Alles auswählen | Zeilennummerierung an/aus
  1. TCEFORM.tx_templavoila_tmplobj.rendertype.addItems.inhalt = Nur Inhalt

"Nur Inhalt" ist die Bezeichnung, die in "Select a  type of rendering" angezeigt wird und "inhalt" wäre die ID, die man im Typoscript-Setup ansprechen kann. Sie können hier auch eigene Bezeichnungen wählen.

Was Sie jetzt benötigen wäre noch eine HTML-Vorlage die Sie entsprechend nur für den Inhalt mappen müssen. Die Vorlage könnte wie folgt aussehen.

Quelltext: Alles auswählen | Zeilennummerierung an/aus
  1. <div>
  2.   <div>
  3. <p>Hier kommt der Inhal rein ...</p>
  4.   </div>
  5.   </div>

Wenn Sie diese Vorlage gemappt haben, müssen Sie im Templavoila-Vorlagenobjekt noch einstellen, dass dies eine Untervorlage (Sub-Template) Ihrer Hauptvorlage ist.

Jetzt müssen Sie im Haupt-Setup nur noch festlegen, wann  diese Version verwendet werden soll. Das kann man entweder über einen GET-Parameter machen, oder Sie definieren einfach einen neuen Seiten-Typ.

Ich füge einfach mal beide Möglichkeiten hier ein:

Quelltext: Alles auswählen | Zeilennummerierung an/aus
  1. page.10 =USER
  2. page.10.userFunc =tx_templavoila_pi1->main_page
  3.  
  4. ##################
  5. ## Erste Möglichkeit
  6. ##################
  7. [globalVar= GP:inhalt>0]
  8. page.10.childTemplate = inhalt
  9. [global]
  10.  
  11. ##################
  12. ## Zweite Möglichkeit
  13. ##################
  14. pageinhalt<page
  15. pageinhalt.typeNum=1
  16. pageinhalt.10.childTemplate = inhalt

Wenn Sie bis hier hin alles richtig gemacht haben, sollte nur der Inhalt angezeigt werden, wenn Sie in der URL den parameter "inhalt=1" oder "type=1" mitgeben, also z.B. index.php?id=400&type=1

Da der generierte Inhalt aber in die bereits bestehende Seite eingefügt werden muss, müssen Sie noch den ganzen Headerbereich deaktivieren, sonst wäre der Header zweimal vorhanden.

Quelltext: Alles auswählen | Zeilennummerierung an/aus
  1. pageinhalt.config {
  2.        disableAllHeaderCode =1
  3.  
  4.        disableCharsetHeader =1
  5.  
  6.        disablePrefixComment =1
  7.  }

Jetzt kommen wir zum Einsatz von JQUERY. Ich gehe mal davon aus, dass JQUERY bereits eingebunden- und funktionsbereit ist. Des weiteren sollten Sie ene weitere Javascript-Datei mit folgenden Inhalt laden.

Quelltext: Alles auswählen | Zeilennummerierung an/aus
  1.     $(document).ready(function(){
  2.             //Auf den ggf. übermittelten Anker reagieren
  3.             if(location.hash){
  4.                     x = location.hash;
  5.                     getContent(x.slice(1)+".html");
  6.             }
  7.  
  8.             //Links per Ajax nachladen
  9.             //$("a:not([href^='http://'])").click(function() {
  10.             $("#menu a").click(function(){
  11.                     url =$(this).attr("href");
  12.                     getContent(url);
  13.                     $(this).blur();
  14.                     returnfalse;
  15.             });
  16.  
  17.             //Informieren das etwas passiert
  18.             $("#content").ajaxStart(function(){
  19.                     $(this).fadeOut(function(){
  20.                             $(this)
  21.                                     .text("")
  22.                                     .addClass("loading")
  23.                                     .fadeIn();
  24.                     });
  25.             });
  26.  
  27.     });
  28.  
  29.     /*
  30.      *      Holt den Inhalt vom Server
  31.      */
  32.     function getContent(url){
  33.             $.ajax({
  34.             //erweitere aufzurufenden Link
  35.             url: url.replace(/\.html/,"/ajax.html"),
  36.             //wenn es geklappt hat
  37.             success:function(html){
  38.                     //Inhalt reinschreiben und anzeigen
  39.                     $("#content")
  40.                             .removeClass("loading")
  41.                             .css("display","none")
  42.                             .html(html)
  43.                             .fadeIn();
  44.                     //Adresszeile aktualisieren
  45.                     location.hash= url.replace(/\.html/,"");
  46.             }
  47.             });
  48.     }

Wer schon öfters mit JQUERY gearbeitet hat, sollte das Javascript ganz gut verstehen können. Vom Grunde her haben wir hier ein DIV-Container mit der ID menu (#menu), wo drin sich die Navigation befindet. Bei Klick auf einen Link innerhalb von #menu wird die Funktion getContent aufgerufen. Da ich glaube, dass in Ihrem Projekt realurl im Einsatz ist, müssen Sie die REALURL-Konnfiguration noch leicht etwas anpassen.

Quelltext: Alles auswählen | Zeilennummerierung an/aus
  1.     $TYPO3_CONF_VARS['EXTCONF']['realurl']['_DEFAULT']=array(
  2.             'pagePath'=>array (
  3.                     'type'=>'user',
  4.                     'userFunc'=>'EXT:realurl/class.tx_realurl_advanced.php:&tx_realurl_advanced->main',
  5.                     'spaceCharacter'=>'-',
  6.                     'expireDays'=>3,
  7.                     'rootpage_id'=>'1',
  8.             ),
  9.             'fileName'=>array (
  10.                     'defaultToHTMLsuffixOnPrev'=>1,
  11.                     'index'=>array(
  12.                             'ajax.html'=>array(
  13.                                     'keyValues'=>array ('type'=>1)
  14.                             ),
  15.                     ),
  16.             ),
  17.     );

Wie das dynamische nachladen von Inhalte in TYPO3 mit JQUERY und Templavoila aussehen kann, sehen Sie auf meiner eigenen Seite. Natürlich können Sie noch weitere Effekte mit einbauen.

Weitere Artikel:

Copyright by Andre Lanius, all rights reserved!