Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.


Vorhergehende Überarbeitung
typoscript_page_setup [2024.03.12 12:25] (aktuell) thomweb
Zeile 1: Zeile 1:
 +====== TypoScript PAGE Setup ======
  
 +Damit TYPO3 Inhalte aus der Tabelle tt_content rendern kann, müssen die Inhalte der Tabelle ans Frontend angebunden werden. Dies ist mit der folgenden Konfiguration zu bewerkstelligen
 +
 +===== TypoScript PAGE Konfiguration =====
 +
 +Einrichtung des Fluid Template.
 +Mehrere Elemente für den Inhalt lesen einzelne Elemente auf der Tabelle tt_content aus, um diese in einer festgelegten Konfiguration zu rendern. Dies gilt z. B. für Accordion Elemente und Boxen, aus denen sich der Slider im Kopf einer Seite generiert. Dies hat den großen Vorteil, dass sich beide Elemente mit den üblichen Mitteln des Backend von TYPO3 redaktionell pflegen lassen. Die Ausgabe erscheint unabhängig von der Formatierung des Elements immer im gewünschten Layout.
 +
 +  page.10 = FLUIDTEMPLATE
 +  page.10 {
 +    format = html
 +    file = EXT:ibkprovider/Resources/Private/Templates/Page.html
 +    partialRootPath = EXT:ibkprovider/Resources/Private/Partials/
 +    layoutRootPath = EXT:ibkprovider/Resources/Private/Layouts/  
 +    variables {
 +      page_title = TEXT
 +      page_title.field = subtitle // title
 +      
 +      page_content < styles.content.get
 +      page_content.select.where = colPos = 1
 +    
 +      blog_content < styles.content.get
 +      blog_content.select.where = colPos = 5
 +      
 +      page_bottom < styles.content.get
 +      page_bottom.select.where = colPos = 4
 +    
 +      ## Element fuer Accordion
 +      
 +      page_accordion = CONTENT
 +      page_accordion {
 +        table = tt_content
 +        select {
 +          where = colPos = 93
 +          orderBy = sorting
 +        }
 +        renderObj = COA
 +        renderObj {
 +          100 = TEXT
 +          100 {
 +            field = header
 +            required = 1
 +            wrap = <h3>|</h3>    
 +          }
 +        
 +          150 = TEXT
 +          150.wrap = <div>
 +        
 +          200 = FILES
 +          200 {
 +            references {
 +              table = tt_content
 +              uid.data = uid
 +              fieldName = assets
 +              required = 1
 +            }
 +            renderObj = IMAGE
 +            renderObj {
 +              file.import.data = file:current:originalUid
 +              titleText.data = file:current:title
 +              altText.data = file:current:alternative
 +              params = class="img-responsive"
 +              fieldRequired = header_link
 +              stdWrap.typolink.parameter.field = header_link
 +              stdWrap.wrap = <div class="div-accordion-bild">|</div>
 +            }
 +          }    
 +              
 +          300 = TEXT
 +          300.field = bodytext
 +          300.required = 1
 +          300.wrap = <p>|</p> 
 +            
 +          320 = TEXT
 +          320 {
 +            stdWrap {
 +              fieldRequired = header_link
 +              typolink {
 +                parameter.field = header_link
 +                 title.field = header
 +                 ATagParams = class="button"
 +              }
 +            }
 +            stdWrap.typolink.parameter.field = header_link // header
 +            stdWrap.wrap = <div class="button-accordion">|</div>
 +          }    
 +          
 +          350 = TEXT
 +          350.wrap = </div>
 +        }
 +      }     
 +        
 +      ## Bilder Buttons
 +          
 +      bilder_buttons = CONTENT
 +      bilder_buttons {
 +        table = tt_content
 +        select {
 +          where = colPos = 2
 +          orderBy = sorting
 +        }
 +        renderObj = COA
 +        renderObj {
 +        
 +          150 = TEXT
 +          150.wrap = <div class="col-md-6 col-sm-6 div-button">
 +      
 +          180 = TEXT
 +          180 {
 +            stdWrap.field = bodytext
 +            stdWrap {
 +              typolink {
 +              parameter.field = header_link
 +              title.field = bodytext
 +              ATagParams = class="button-layer"
 +            }
 +          }
 +          stdWrap.wrap = <div class="div-button-popup">|</div>
 +        }
 +        
 +        200 = FILES
 +        200 {
 +          references {
 +            table = tt_content
 +            uid.data = uid
 +            fieldName = assets
 +            required = 1
 +          }
 +          renderObj = IMAGE
 +          renderObj {
 +            file.import.data = file:current:originalUid
 +            titleText.field = description
 +            altText.field = description
 +            params = class="img-responsive"
 +            fieldRequired = header_link
 +            stdWrap.typolink.parameter.field = header_link
 +            stdWrap.wrap = <div class="div-button-bild">|</div>
 +          }
 +        }
 +        
 +        320 = TEXT
 +        320 {
 +          stdWrap {
 +            fieldRequired = header_link
 +            typolink {
 +              parameter.field = header_link
 +              title.field = header
 +              ATagParams = class="button button-navigation"
 +            }
 +          }
 +          stdWrap.typolink.parameter.field = header_link
 +          stdWrap.wrap = <div class="div-button-text">|</div>
 +        }
 +        350 = TEXT
 +        350.wrap = </div>
 +      }
 +    }    
 +  }
 +
 +==== Variablen per TypoScript auslesen ====
 +
 +Wenn man einzelne Datensätze in einem Fluid Template darstellen möchte, ist es notwendig, diese als Variablen im TypoScript Setup auszulesen und ihnen einen Namen zu geben. Dazu nutzt man das Objekt RECORDS, mit dem man gezielt einen Datensatz in einer bestimmten Tabelle der Datenbank auslesen kann:
 +
 +  inhalt_box = RECORDS
 +  inhalt_box {
 +    tables = tt_content
 +    source = <ID des Inhaltselementes>
 +    dontCheckPid = 1
 +  }
 +===== Page Template zuweisen =====
 +
 +Man kann einer Seite mehrere Backend Templates zuweisen. Diese müssen Seiten Template, in diesem Fall einem Fluid Template, zugeordnet sein. Die Zuordnung der Datei geschieht anhand der UID des Datensatzes in der Tabelle ''backend_layout'' in der TYPO3 Datenbank.
 +
 +  page.10.file.stdWrap.cObject = CASE
 +  page.10.file.stdWrap.cObject {
 +    key.data = levelfield:-1, backend_layout_next_level, slide
 +    key.override.field = backend_layout
 +    
 +    ## Erstes Layout - nicht notwendig da durch Fallback (Default) abgedeckt
 +    1 = TEXT
 +    1.value = EXT:ibkprovider/Resources/Private/Templates/Page.html
 +    
 +    ## Zweites Layout - Die "2" entspricht der UID in der Tabelle für Backend Layout
 +    2 = TEXT
 +    2.value = EXT:ibkprovider/Resources/Private/Templates/Startseite.html
 +    
 +    ## Fallback - wenn kein anderes Layout gefunden wurde
 +    default = TEXT
 +    default.value = EXT:ibkprovider/Resources/Private/Templates/Page.html
 +  }
 +
 +<WRAP left info 100%>
 +Das [[backend_layout|Backend Layout]] können Sie auch über die TypoScript Konfiguration der Seite anbinden, was einige Vorteile beim GIT Repository und dem Deployment eines TYPO3 Projekts bringt.
 +</WRAP>  
 +  
 +  ===== Grid Elements einbinden  =====
 + 
 +Eine sehr beliebte Extension zur Einbindung unterschiedlicher Layouts in TYPO3 Webseiten ist die Extension Gridelements. Diese wird auf dem gewohnten Weg über das [[https://extensions.typo3.org/extension/gridelements/|TYPO3 Extension Repository]] (TER) oder den Composer installiert. Die Installation ist [[https://docs.typo3.org/typo3cms/extensions/gridelements/stable/|hier ausführlich beschrieben]].
 +
 +Bei der Einbindung von Grid Elements kommt es immer wieder zu Problemen. Dabei ist diese recht einfach zu händeln.
 +
 +Sobald man ein Backend Layout für Grid Elements erzeugt und Spaltennummern vergeben hat, kann man anhand dieser Daten die Einbindung in TypoScript schreiben:
 +
 +  tt_content.gridelements_pi1.20.10.setup {
 +      
 +    ## Die 1 entspricht der UID des Grid Elements Layout
 +    1 < lib.gridelements.defaultGridSetup
 +    1 {
 +      columns {
 +        ## Die 101 entspricht der ColPos
 +        101 < .default
 +        101.wrap = <div class="col-md-4 col-xs-12">|</div>
 +     
 +        102 < .default
 +        102.wrap = <div class="col-md-4 col-xs-12">|</div>
 +  
 +        103 < .default
 +        103.wrap = <div class="col-md-4 col-xs-12">|</div>
 +      }
 +      wrap = <div class="row">|</div>
 +    }
 +  }
 +  
 +===== Inhaltselemente in jeder Seite darstellen =====
 +
 +
 +TypoScript bietet die Möglichkeit, Variablen zu definieren und diese in jeder Seite darzustellen.
 +
 +Wir können unsere Inhalte als PAGE Objekt aufbauen und einzelne Datensätze ansprechen. Hier wird ein Datensatz des Inhaltselements mit der UID 1 ausgeselen:
 +
 +  page.10 = FLUIDTEMPLATE
 +  page.10 {
 +    [...]
 +    variables {
 +      inhalt = RECORDS
 +      inhalt {
 +        source = 1
 +        tables = tt_content
 +      }
 +    }
 +  }
 + 
 +Wir können auch mehrere Inhaltselemente darstellen, in diesem Fall die Datensätze 1 bis 3:
 +
 +
 +  variables {
 +    inhalt = RECORDS
 +    inhalt {
 +      source = 1,2,3
 +      tables = tt_content
 +    }
 +  }  
 +  
 +Aber vielleicht möchten wir die Inhaltselemente gelegentlich wechseln und dann ist es natürlich ein erheblicher Aufwand, jedesmal am TypoScript Setup der Webseite zu arbeiten? Dafür gibt es eine Lösung!
 +
 +Wir können bei der Bearbeitung unseres Basis Templates **Constants** definieren, die wir einfach im Backend bearbeiten. So können wir die Datensätze vorgeben, die wir aus der Tabelle tt_content auslesen möchten:
 +
 +  content.box.sources = 1,2,3 
 +  
 +Um beim Beispiel von oben zu bleiben - Das Auslesen der Konstanten im TypoScript Setup sieht dann wie folgt aus:
 +
 +  variables {
 +    inhalt = RECORDS
 +    inhalt {
 +      source = {$content.box.sources}
 +      tables = tt_content
 +    }
 +  } 
 +  
 +<WRAP left info 100%>
 +Weitere Informationen zu diesem Thema finden Sie in der [[https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/ContentObjects/Records/Index.html|Dokumentation zum TypoSript PAGE Setup]]
 +</WRAP>
 +