Montag, 3. März 2014

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.

Kartografie Plattner
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.

Kommentare:

  1. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
    Antworten
    1. Guten Morgen Jonathan,

      Tut mir Leid, ich glaube versehentlich Deinen Kommentar gelöscht zu haben.
      Hier nochmals Dein Kommentar:

      "
      Vielen Dank für dieses tolle Tutorial. Klappt wunderbar. Nur eine Frage habe ich noch: Wie kann ich die Inhalte einer Seite ausklammern?
      Mit lib.sectionContent werden ja alle Inhalte der aktuellen Seite und aller Unterseiten geholt. Nun möchte ich aber, dass die Inhalte der aktuellen Seite nicht eingebunden wird. Denn der Inhalt der aktuellen Seite soll vor der Navigation eingebunden werden.
      Vielen Dank für einen Hinweis.
      "

      Da es sich bei dem Aufruf der Inhalt um ein modifiziertes HMENU/TMENU handelt, kannst Du normal über excludeUidList = xxx Seiten ausklammern. Gleiches gilt für bestimmte doktypes etc.

      Viele Grüße,
      Andreas

      Löschen
  2. Hallo Andreas,
    danke vür diesen TOLLEN und HILFREICHEN Artikel.

    Eine Frage hätte ich noch, kann man da auch irgendwie mit Backendlayouts arbeiten?

    AntwortenLöschen
    Antworten
    1. Hallo Christian,

      vielen Dank erstmal für das Lob :)

      Bzgl. Deiner Frage: An sich sollte das kein Problem darstellen mittels Backend-Layouts einen Onepager zu erstellen. Die Navigation wäre dann eine reine Ankernavigation die sich auf die Content-Elemente der Seite bezieht. Dafür gibt's dann das Content-Element "Menu" (oder special Menus, je nach Version) mit der Einstellung "Section index". Das Ganze dann entsprechend mit CSS gestyled und per TypoScript angepasst und dann sollte das kein großes Problem sein.

      Viele Grüße,
      Andreas

      P.S.: Gerne gebe ich Dir weitere Hilfestellung hierzu, wenn Du das benötigst.

      Löschen
    2. Kurzer Nachtrag: Mit BE-Layouts kannst Du dann per TypoScript auch pro Layout-Part entsprechende Ankerpunkte erstellen, die dann dorthin zur jeweiligen ID scrollen. Dadurch kannst Du mehr strukturierten Inhalt ausliefern. Oben genannter Ansatz bezog sich eher auf eine Kombination von BE-Layout und Inhaltsstruktur, hat aber den Nachteil, dass Dein TypoScript ein wenig umfänglicher werden würde, da Du zusätzlich auf BE-Layout-Parts prüfen müsstest (also z.B. colPos).

      Löschen
    3. Hi Andreas, danke für deine ausführliche Erklärung! Leider bin ich noch nicht so Fitt mit Typoscript . Würde gerne deine Hilfestellung in Anspruch nehmen.

      Löschen
    4. Hallo Christian,
      kein Problem. Wir können dazu gerne mal einen Google-Hangout starten. Ich versuche das dann zeitnah zu beantworten und ggf. können wir das dann gemeinsam durchgehen. Im Impressum findest Du meine Mail-Adresse.
      Bis dann!
      Viele Grüße,
      Andreas

      Löschen
    5. Hallo Andreas

      Ich wäre auch an der Lösung interessiert. Wir versuchen das bootstrap_package zu einem Onepager zu bringen. Aus deinem Teil würde ich gerne die Layout-Information haben.

      Aus dem Package:
      lib.dynamicContent = COA
      lib.dynamicContent {
      5 = LOAD_REGISTER
      5 {
      colPos.cObject = TEXT
      colPos.cObject {
      value.current = 1
      ifEmpty = 0
      }
      }
      20 < styles.content.get
      20.select.where = colPos={register:colPos}
      20.select.where.insertData = 1
      }
      lib.dynamicContentSlide < lib.dynamicContent
      lib.dynamicContentSlide.20.slide = -1

      Hast du grad einen Tipp parat?

      Danke und viele Grüsse
      Jacques

      Löschen
  3. "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."

    Hallo Andreas,
    tolles Beispiel das ich gerade probiere nachzubauen. Ich bin aus der "alten" Typo3 Zeit und etwas stehen geblieben. Ich habe zwar meine HTML aber ich weiss ehlich gesagt nicht wie ich nenau anfangen soll. Wohin mit meinem MARK #Content usw.
    Über eine Hilfestellung würde ich mich sehr freuen...

    Gruss Nicole

    AntwortenLöschen
    Antworten
    1. Hallo Nicole,
      da ich ja das Ganze über lib aufbaue, kannst Du entsprechend Deines Templates die lib.sectionContent an Stelle Deines Content-Markers setzen.

      z.B.: page.10.marks.CONTENT < lib.sectionContent

      Gleiches gilt natürlich für die Navigation (da natürlich an die Stelle des entsprechenden Markers oder subparts). Des Weiteren kannst Du dann einzelne Teile Deines Templates im Content-Rendering der lib.sectionContent an der Stelle renderObj hinterlegen und so Teile Deines HTML- oder Fluidtemplates ansprechen und gestalten.

      Gerne kann ich Dir auch per Hangout oder Mail weiterhelfen (im Impressum).

      Viele Grüße,
      Andreas

      P.S.: Hat Dir der Artikel gefallen und/oder auch weitergeholfen, freue ich mich über ein "+1" :-)

      Löschen
  4. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  5. Hallo Andreas,

    zunächst einmal: 1000 Dank für diesen Beitrag - Umsetzung klappte auf Anhieb.
    Ich habe jetzt nur eine Herausforderung, die mir den letzten Nerv raubt:

    Bei einer Verlinkung aus dem RTE werden die Standard-Links generiert.
    Wie kann ich das Rendering so anpassen, dass die Links nicht die (im OnePager nicht vorhandenen) Seiten aufrufen, sondern Anker-Links zu den jeweiligen Sections produzieren?

    Danke für Deine Hilfe!
    Uwe

    AntwortenLöschen
    Antworten
    1. Hallo Uwe,

      vielen Dank für das Lob :) das hört man gerne.

      Dein Problem ist gar nicht so banal. Und um ehrlich zu sein, das hatte ich insofern nicht bei meinen Onepagern berücksichtigt, da dieser Fall auf gleicher Ebene bei meinen Projekten bislang nicht auftrat.
      Aber: Der einfachste Weg wäre hier vermutlich eine Verlinkung als externe URL (auf die "Startsteite") mit entsprechenendem Anker anzulegen.

      Aber Danke für Deinen Einwand. Ich werde diesbezgl. recherchieren und demnächst (hoffe ich) eine Lösung präsentieren können. Aber wie gesagt, Du solltest Dein PRoblem zumindest übergangsweise mit Ankern in über externe URLs lösen können. GGf. brauchst Du noch eine Klasse für diese Links und musst das JS anpassen, damit es auch hierüber scrollt und nicht springt.

      Ich melde mich Kürze wieder :)

      Viele Grüße,
      Adreas

      Löschen
  6. Hallo, ich habe Ihre Lösung für das Bootstrap Menu auf eine Onepage Site benutzt und finde diese sehr sehr gelungen! Nun habe ich eine kleine Frage. Wie kann ich den aktiven Link mit einer class="active" belegen. Leider geht das nicht über ACT. Haben Sie eine Idee, warum es so nicht geht und wie es gehen könnte?

    Liebe Grüße
    Andreas Krüger

    AntwortenLöschen
    Antworten
    1. Hallo Herr Krüger,

      Sie können mittels JavaScript/jQuery den entsprechend geklickten Link mit einer Klassen versehen. Dazu können Sie entweder mein JS-Script erweitern oder Ihr eigenes entsprechend anpassen:

      // XXX Code drüber
      $('#topNavi a').on('click', function(e) {
      // ... bisheriger Code ...

      $('#topNavi a').removeClass('active'); // entfernt alle Klassen "active" aus Links der Top-Navi
      $(this).addClass('active'); // gibt dem aktuell angeklickten Link die Klasse "active"

      // ... bisheriger Code
      });
      // XXX Code drunter

      ACT wie CUR gehen deswegen nicht, da Sie die Ebene ja nicht verlassen und immer auf Ihrer Root-Page bleiben.

      Ich hoffe, dass ich Ihre Frage beantworten konnte. Ansonsten können Sie sich gerne bei mir melden.

      Viele Grüße,
      Andreas Hoffmeyer

      Löschen
    2. Kurzer Nachtrag: Scrollspy (von bootstrap.js) bringt solch eine Funktionalität bereits mit. Schauen Sie doch einfach mal in die Docu. Aktive Links dürfte man entsprechend auch bennenen können.

      Löschen
    3. ... und wie funktioniert das "active"-setzen, wenn ich auf der Seite scrolle?

      Löschen
    4. Das übernimmt die JS-Lib von Bootstrap (bootstrap.js). Das jeweilige Elternelement des Links (z.B. ein li) bekommt die Klasse "active". Und dann einfach mit CSS aufhübschen.

      Löschen
  7. // Umlaute und Sonderzeichen werden ersetzt bzw. angepasst
    Script "temp.titleSectionId" ... sollte, wenn Ihr es extern editiert, im UTF8-Format abgespeichert werden, sonst klappt das mit den Umlauten leider NICHT! ;-)

    AntwortenLöschen
    Antworten
    1. Guter Hinweis! Danke! :)
      Da ich grundsätzlich in UTF-8 arbeite habe ich das nicht mit anderen Zeichensätzen getestet.

      Löschen
  8. Hallo Andreas,
    wenn ich z.B. eine Seite wie Impressum, also NICHT aus dem one-pager aufrufe, dann steht im Menü immer als Teil der Url. das: impressum.html#leistungen.
    So sieht mein Link aus:
    Leistungen
    Wie bekomme ich das "impressum.html" aus dem Link raus bzw. welche Funktion übernimmt das? Sonst komme ich ja nie wieder auf den One-Pager!?

    AntwortenLöschen
  9. Jetzt hat der den Link dargestellt - mmh
    Also so
    < a data-target="#" href="impressum.html#leistungen">Leistungen< /a>

    AntwortenLöschen
    Antworten
    1. Hallo Kurt,

      um ehrlich zu sein, ich verstehe die Frage nicht recht:
      Du bist auf der Seite Impressum und er hängt einen Anker dran (wie Leistungen) und kommst daher nicht mehr zurück zur Startseite? Oder seht in der Navi immer der Link auf die jeweilige Unterseite auf der Du gerade bist + hash also impressum.html#leistungen?
      Bei Letzterem Fall: Hast Du bei Parameter beim Aufbau der Navi auch die ID der Startseite drin, damit alle Links der Hauptnavi auf die Startseite verweisen (und dadurch nur den hash setzen)?
      Sofern Du vom Imrpessum nicht mehr wegkommst reicht es die Body-Tag Id der Startseite mit ins JS aufzunehmen $('#singlepage #topNavi a').on('click', .....

      Du kannst mir auch gerne per PM über Google+ oder Facebook nähere Infos schicken, dann schau ich mir das Problem gerne näher an (sobald ich ein wenig Luft habe).

      Viele Grüße

      Löschen
  10. Hallo und vielen Dank für diese Anleitung!

    Basieren hierauf habe ich eine Seite mit "meheren Onepagern" realisiert und nur die Realisierung der Sitemap gestaltet sich schwierig für mich.

    Wie erstelle ich im 2. Level der Sitemap die Ankerlinks mit Bezug auf das 1. Level und nicht mit Link auf die Page-ID?

    Mein Submenü habe ich wie folgt aufgebaut, bekomme das aber nicht mit der Sitemap-Navigation verknüpft:

    lib.nav-sub = HMENU
    lib.nav-sub {
    entryLevel = 1
    wrap = bla
    1 = TMENU
    1 {
    wrap = bla
    NO = 1
    NO {
    doNotLinkIt = 1
    linkWrap = bla
    stdWrap >
    stdWrap {
    cObject = TEXT
    cObject {
    field = nav_title // title
    typolink {
    parameter = #
    #parameter < temp.titleSectionId
    section.cObject < temp.titleSectionId
    }
    }
    }
    }
    }
    }

    PS: div, ul, li musste ich rauslöschen um posten zu können

    AntwortenLöschen
  11. Danke für das Tutorial! Sehr gut erklärt! Ich hätte eine Frage. Wir sagen, dass jede Unterseite (also sektion vom onepager) ein Backend Layout und bestimmtes Template hat. Wie nehmen an auch dass mehrere Layouts zur verfügung stehen. Wie könnte man das im Typoscript eingeben? Also für jede Unterseite, ein Template durch Fluid?

    AntwortenLöschen
    Antworten
    1. Hallo,

      Danke für Ihr Feedback.

      Sie sollten das Problem relativ leicht mittels CASE-Object innerhalb des TMENUS/NO -> stdWrap lösen können.

      ICh werde das mal testen und ggf. in einem neuen Beitrag behandeln.

      Viele Grüße,
      Andreas

      Löschen
    2. Dieser Kommentar wurde vom Autor entfernt.

      Löschen
    3. Danke für die Antwort. Ich bin gespannt wie es gelöst werden kann! Danke für den Tipp!!

      Löschen
    4. Ich denke, ich kann es kaum erwarten bis die Lösung kommt :-) Ich bin ja sehr neu zu Typoscript und Typo3, deshalb die folgende Frage:

      Wenn ich das richtig verstanden habe, dann müssen wir, genau wie wir oder ich die Page eingestellt haben (page.10 = FLUIDTEMPLATE), unser Sektion-Inhalt ‘einstellen’. Also wenn für die Unterseite1 das Backend Layout 1 verwendet wird, dann koppeln wir den Inhalt mit dem Template 1 zum Beispiel. Ist das die richtige Logik? Oder irre ich mich?

      Löschen
    5. Guten Morgen,

      tut mir Leid, dass ich mich jetzt erst bei Ihnen melde, aber bei mir war reichlich viel zu tun.

      Ihre Logik ist richtig. Sie würden, ausgehend von meiner Config, beispielsweise so vorgehen (innerhalb des NO-Objekts in der Content Erzeugung):

      ....
      stdWrap.cObject = FLUIDTEMPLATE
      stdWrap.cObject {
      file.cObject = CASE
      file.cObject {
      key.field = backend_layout
      default = TEXT
      default.value = ihr/pfad/zum/default/template.html

      1 = TEXT
      1.value = ihr/pfad/zum/1/template.html

      // ... usw
      }
      }

      Das setzt allerdings voraus, dass Sie Ihre Partials/Layouts alle in jeweils einem entsprechendem Verzeichnis haben.

      Sofern Sie keine Partials/Layouts-Ordner oben verwenden wird die TYPO3-interne Logik verwendet.

      Viel Spaß beim Ausprobieren :) und bei Problemen können Sie sich gerne wieder melden.

      Viele Grüße,
      Andreas

      Löschen
    6. Vielen vielen Dank für die Antwort und die Erklärung!
      ich habe es gerade ausprobiert. Also so in meinem TS bei Template:

      lib.sectionContent = HMENU
      lib.sectionContent {

      1 = TMENU

      1 {
      NO = 1

      NO {
      doNotLinkIt = 1
      stdWrap >
      stdWrap.cObject = FLUIDTEMPLATE
      stdWrap.cObject {
      partialRootPath = fileadmin/fluid/partials
      layoutRootPath = fileadmin/fluid/layouts
      variables{
      content_main < styles.content.get
      }
      file.cObject = CASE
      file.cObject {
      key.field = backend_layout

      default = TEXT
      default.value = fileadmin/fluid/default.html

      1 = TEXT
      1.value = fileadmin/fluid/template1.html
      }

      }
      }
      }
      }

      page = PAGE
      page.typeNum = 0


      page.10 < lib.sectionContent

      Ich bekomme die folgende Fehlermeldung:

      Template could not be found at "My/Pfad/typo3-website/

      Habe ich irgendetwas verpasst? Warum findet typo3 mein Pfad nicht? Ich habe es geprüft und Pfad ist definitiv richtig.

      Danke für die Hilfe und noch mal für die Antwort!

      Löschen
  12. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  13. Vielen Dank für das wirklich tolle Tutorial.
    Ich habe dennoch eine Frage, es geht um folgendes, ich möchte den Scroll-Effect gerne mit Bootstrap machen, das Problem ist, dass im Link nicht nur die eigentliche ID vorhanden ist, sondern vor der ID noch der Titel der ersten Seite der Website.
    Bei mir sieht das jeweils so aus: a href="home/#about"

    Wie bekomme ich dieses, in meinem Fall, "home/" aus der URL?
    Denn Bootstrap funktioniert nur ohne dieses "home/".

    Vielen Dank für eure Inputs.

    Grüsse
    Martin

    AntwortenLöschen
    Antworten
    1. JQuery ist eine Lösung:
      $('a').each(function() {
      $(this).attr("href", function(index, old) {
      return old.replace("home/", "");
      });
      });

      Löschen
  14. Hallo, ich finde die lösung super habe nun aber ein problem wenn ich eine Zweite sprache anlege. Das Menü wird übersetzt aber der Text nicht... habe languageField = sys_language_field eingbaut aber ohne erfolg.. hast du eine Idee? Sorry fürs dutzen :)

    AntwortenLöschen
  15. Hi Andreas,

    erst einmal vielen Dank für die ausführliche Beschreibung.

    Kannst du mir einen Tipp geben, an welcher Stelle dein TS für das Menü angepasst werden muss wenn ich die Referenzbereiche auch im Backend auf einer Seite vorhalten möchte?

    So ganz erschließt sich mir das als Newbie noch nicht. :|
    Grüße Steffen

    AntwortenLöschen
  16. Servus Andreas,

    ein wirklich guter Beitrag, vorallem kommt man schnell zum Ziel.
    Mein Problem ist nur, dass ich deine Lösung im Zusammenhang mit Grid-Elements oder sofern einfacher umsetzbar auch mit Backendlayouts umsetzen möchte.

    In der Contentausgabe wird ja einfach aus der Datenbank gelesen, ohne das man z.B. auf die Spalten der Backendlayouts im fertig gerenderten Code zugreifen kann. Was also kann ich machen?

    Ein Wrap oder die Spaltennummer wäre gut im Frontend.

    Hast Du vielleicht ein Tip für mich?

    Grüße
    Michael

    AntwortenLöschen
  17. Wenn du die select Abfrage um ein where ergänzt könnte es klappen

    select {
    pidInList.field = uid
    where = tx_gridelements_container = 0
    }

    AntwortenLöschen
    Antworten
    1. Hi Andreas,
      jepp passt. Danke dir für die Info. :)

      Grüße Steffen

      Löschen
  18. Das mit "where = tx_gridelements_container = 0" ist ja okay, es nützt nur nichts, wenn die Gridelemente mit Fluid-Templates erstellt wurden.

    Wie macht man es dann?

    AntwortenLöschen
  19. Hallo Andreas, ich wäre auch an einer Hilfestellung interessiert, schaffe es irgendwie nicht das Typoscript für den Inhaltsbereich einzubauen (in Verbindung mit Fluidtemplates + Backendlayouts), ich bin was Typoscript angeht, leider auch noch nicht so fit, also biete ich um Nachsicht. ;-) Wäre super wenn du mir da helfen könntest, die Anker im Menü hab ich dank deinem Script schon gesetzt.
    Lg Bettina

    AntwortenLöschen
  20. I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in Typo3, kindly contact us http://www.maxmunus.com/contact
    MaxMunus Offer World Class Virtual Instructor led training on Typo3. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
    For Demo Contact us:
    Name : Arunkumar U
    Email : arun@maxmunus.com
    Skype id: training_maxmunus
    Contact No.-+91-9738507310
    Company Website –http://www.maxmunus.com


    AntwortenLöschen
  21. I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in Typo3, kindly contact us http://www.maxmunus.com/contact
    MaxMunus Offer World Class Virtual Instructor led training on Typo3. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
    For Demo Contact us:
    Name : Arunkumar U
    Email : arun@maxmunus.com
    Skype id: training_maxmunus
    Contact No.-+91-9738507310
    Company Website –http://www.maxmunus.com


    AntwortenLöschen