Onepage-Microsite mit TYPO3

Wie in meinem vorherigen Artikel diskutiert, eignet sich TYPO3 sehr gut für die Erstellung von Onepage-Layouts. Auch wenn bereits eine TYPO3-Extension hierzu vorliegt, kommt man mit ein wenig TypoScript, JavaScript und CSS ebenfalls zu tollen Ergebnissen. Aber natürlich könnt ihr auch die Extension ausprobieren.

Beispiel: Eine Onepage-Microsite

Bei anfangs wenig Inhalten oder wenn der Kunde ohnehin "nur" eine Online-Visitenkarte möchte, ist eine Microsite in Form eines Onepagers meine erste Wahl. Als kleines Beispiel soll uns die Microsite der Kartografin Stefanie Plattner dienen.

www.kartografie-plattner.de

Unsere Aufgabenstellung:

Insgesamt gibt es vier Unterseiten und einen Home-Link der als "Back to top" Button dient. Impressum und Datenschutz finden sich im Footer wieder und werden als einzelne Seite angezeigt.
Der jeweilige Seitenname soll als Hash in der URL stehen. Umlaute, Sonderzeichen etc. müssen dazu natürlich entfernt bzw. ersetzt werden.

Die Navigation soll fixiert sein, damit sie beim Scrollen immer erreichbar ist.

Die jeweilige Scrollposition soll durch einen aktiven Navigationslink angezeigt werden.

Ein Formular schließt die Seite ab. Damit nach Absenden des Formulars die Seite nicht neu lädt, werden die Daten und ggf. Fehlermeldungen asynchron geladen (mit Formhandler leicht zu erstellen - wird hier nicht näher behandelt).

So, das wäre dann schon alles.

Was wird gebraucht?

• Ein aktuelles TYPO3 (aktuell  ist die Version 6.1.7 - Stand 03.03.2014)
• jQuery (entweder als Extension t3jquery oder selbst eingebunden)
• jQuery-Plugin Smooth-Scroll (oder euer bevorzugtes Plugin)
• Bootstrap

Außerdem sind folgende Extensions grundsätzlich zu empfehlen (alle über das Repository zu beziehen):

• realURL (bei weiteren allein stehenden Unterseiten für hübsche URLs)
• phpMyAdmin (zur Sicherheit und wenn man keinen Webspace-Zugang hat)
• t3colorbox (nette Lightbox, die dazu noch responsiv ist)
• Formhandler (bietet eine Vielzahl an Konfigurationsmöglichkeiten, u.a. auch Ajax-Formulare)

Ich setze voraus, dass ihr wisst wie die einzelnen Dateien und Extensions integriert bzw. installiert, sowie Seiten in TYPO3 angelegt werden und widme mich nun dem TypoScript.

Navigation mit Ankerpunkten statt Links

Navigiert wird über eine Seitennavigation durch Ankerpunkte. Das bedeutet, dass die ursprüngliche Funktionsweise des typischen TMENUs von TYPO3 angepasst werden muss. 

Damit ich im weiteren Verlauf Umlaute und Sonderzeichen nicht immer neu anpassen muss, speichere ich diese Funktionalität in meiner temp.titleSectionId. Mittels der wunderbaren Funktion "replacement" kann ich sogar mit regulären Ausdrücken arbeiten und so sehr spezifisch meine Seitentitel anpassen. Zusätzlich sollen alle Buchstaben als Kleinbuchstaben angezeigt werden: "case = lower".  

//---------------------

// Umlaute und Sonderzeichen werden ersetzt bzw. angepasst

temp.titleSectionId = TEXT

temp.titleSectionId {

  field = title

  trim = 1

  case = lower

  replacement {

    10 {

      search.char = 32

      replace = -

    }

    20 {

      search = /(ä|Ä)/

      useRegExp = 1

      replace = ae

    }

    30 {

      search = /(ö|Ö)/

      useRegExp = 1

      replace = oe

    }

    40 {

      search = /(ü|Ü)/

      useRegExp = 1

      replace = ue

    }

    50 {

      search = ß

      replace = ss

    }

    60 {

      search = /\/\\\.\:\;\,\&/

      useRegExp = 1

      replace =

    }

  }

}

//---------------------

Die eigentliche Navigation

//---------------------

lib.scrollSpyNavi = HMENU

lib.scrollSpyNavi {

  wrap = <div id="topNavi">|</div>

  1 = TMENU

  1 {

    wrap = <ul class="nav">|</ul>

    NO = 1

    NO {

      doNotLinkIt = 1

      linkWrap = <li class="link">|</li>

      stdWrap >

      stdWrap {

        cObject = TEXT

        cObject {

          field = nav_title // title

          typolink {

            parameter = 1

            section.cObject < temp.titleSectionId

          }

        }

      }

    }

  }

}

//---------------------

Bei der Navigation fällt auf, dass ich:

1. den Seitentitel nicht verlinke: doNotLinkIt = 1
2. den stdWrap lösche. Dadurch wird erstmal gar kein Seitentitel in der Navigation angezeigt
3. den stdWrap mit einem cObject vom Typ TEXT neu aufbaue
4. den Typolink-Parameter immer auf die Rootseite setze:
   typolink.parameter = 1
5. dem Typolink einen Ankerpunkt anhänge (durch section)

Da ich gerne "sprechende" Ankerpunkte haben möchte, kommt hier nun unsere temp.sectionTitleId zum Einsatz. Diese wandelt nun unsere Titel in Kleinbuchstaben ohne Sonderzeichen und Umlaute um.

Beim Footer gehe ich davon aus, dass ihr wisst wie man eine klassische Navigation mit HMENU/TMENU erstellt.

Inhalte holen

Jetzt fehlen noch unsere Inhalte. Diese holen wir ebenfalls mit dem HMENU-Objekt. Warum? Wir wollen nur den Content, der sich auf die Navigation bezieht.

//---------------------

lib.sectionContent = HMENU
lib.sectionContent {
  1 = TMENU
  1 {
    NO = 1
    NO {
      doNotLinkIt = 1
      stdWrap >
      stdWrap {
        cObject = COA
        cObject {
          if.value = 4
          if.equals.field = doktype
          if.negate = 1
          10 < temp.titleSectionId
          10.wrap = <section id="|">
          20 = CONTENT
          20 {
            table = tt_content
            select {
              pidInList.field = uid
            }
            wrap = <div class="container">|</div>
            renderObj < tt_content
          }
          30 = TEXT
          30 {
            wrap = </section>
          }
        }
      }
    }
  }
}

//---------------------

Der erste Teil ist bereits aus der Hauptnavigation bekannt. Diesmal machen wir jedoch aus dem stdWrap ein Content Object Array (COA). 

Die IF-Anweisung bewirkt, dass kein überflüssiges Section-Tag durch den Home-Shortcut gesetzt wird.

Der erste Teil des Arrays ist unser öffnendes Section-Tag, dem wir als ID die gleiche Bezeichnung geben, wie dem jeweiligen Ankerpunkt der Navigation.

Teil zwei (20) des Arrays holt uns die Inhalte aus der Datenbank. Dazu rufen wir das CONTENT-Objekt auf und übergeben darin die benötigte Tabelle (tt_content für die Inhalte). In der Select-Anweisung können wir uns direkt mittels pidInList auf die dazugehörige Seiten-ID beziehen. Da pidInList vom Typ stdWrap ist, können wir einfach die Anweisung field = uid (Seiten-ID) dahintersetzen. 

Jetzt braucht es noch ein renderObj und weil ich nicht jedes einzelne Element aus tt_content selber gestalten will, sondern TYPO3 die Arbeit machen lassen möchte, schreibe ich renderObj < tt_content. Damit rendert TYPO3 alle gefunden Elemente so, als ob man die Inhalte über styles.content.get zöge.

Zu guter letzt schließen wir das Section-Tag und sind fertig.

Jetzt kann man schon sämtlichen Content seiner Seite auf der Startseite bewundern und die Navigation verweist auch schon auf die jeweilige Section. Nun sollen die Links entsprechend noch markiert werden, wenn man entsprechend weit scrollt.

Scrollspy initialisieren

Damit unsere Navigation merkt, wo wir uns auf der Seite gerade befinden, nutze ich die Funktion Scollspy aus der JS-Bibliothek von Bootstrap. Initialisiert wird die Funktion direkt im Body-Tag der Seite:

//---------------------

bodyTag = <body id="singlepage" data-spy="scroll" data-target="#topNavi">

//---------------------

Hierbei sind die data-Angaben wichtig: 

data-spy="scroll": für welchen Event (eben unser scrollen) soll die Funktion ausgeführt werden. 

data-target="#topNavi": die ID eurer Navigation, auf die sich die Funktion beziehen soll.

Ein wenig JavaScript

Sofern ihr noch keine Custom JavaScript-Datei habt, ist es nun Zeit eine zu erstellen und über TypoScript einzubinden. Ich nenne diese Datei für gewöhnlich main.js und gebe es meist zuletzt oder im Footer der Seite aus. Aber das sei euch überlassen. Wichtig ist nur, dass die jQuery-Bibliothek und Smoth-Scroll vor eurem Haupt-JS im Quelltext steht.

Darin befindet sich nun Folgendes:

//---------------------

$( function () {

  $('#topNavi a').on('click', function(e) {

    $.smoothScroll({

      scrollElement: null,

      scrollTarget: this.hash

    });

    window.history.pushState({}, '', this.hash);

    e.preventDefault();

  });

});

//---------------------

Am Anfang wird das Script geladen. Klicke ich nun auf einen meiner Links wird Smoth-Scroll ausgeführt. Damit die URL sich entsprechend ändert und ggf. die Seite nicht "ruckelt" sende ich das Ziel des geklickten Links in meine Browserleiste und verhindere mittels e.preventDefault(), dass der Link an sich ausgeführt wird.

Eure Seite scrollt nun schön langsam von Anker zu Anker.

Nun seid ihr frei eure Seite mit CSS zu gestalten. Natürlich könnt ihr auch die Wraps etc. anpassen oder bei mehr Know-How als ich es besitze, das TypoScript/JavaScript verbessern.

Fazit:

Es ist nicht viel Aufwand von Nöten um eine minimalistische Onepage-Microsite zu erstellen. Aber auch umfangreichere Onepage-Layouts sind mit diesem Grundgerüst möglich: z.B. mit parallax scrollenden Hintergrundbildern.

Habt ihr Fragen, einen Fehler entdeckt, allgemeine Kritik oder sonstige Anliegen, schreibt mir einfach einen Kommentar oder eine Nachricht über Google+.

Viel Spaß beim Ausprobieren.