Fluid Components in TYPO3

15.02.2023 | Erstellt von Thomas

Fluid Components bietet Dir eine klare Struktur für die Erstellung von wiederverwendbaren, präsentationsspezifischen Komponenten in TYPO3. Diese Komponenten werden in drei Hauptkategorien unterteilt: Atome, Moleküle und Organismen.

Atome: Die kleinsten und einfachsten Komponenten, bestehend aus reinem HTML- und CSS-Code.
Moleküle: Kombinationen aus mehreren Atomen, die eine spezifische Funktionalität bieten.
Organismen: Größere Einheiten, bestehend aus mehreren Molekülen und Atomen, die eine umfassendere Funktionalität bereitstellen.

Hier zeigen wir Dir, wie man ein Bootstrap-Modal mittels Fluid Components erstellt.

Schritt 1: Erstellen der Komponentenklasse

Wir erstellen eine neue Komponente namens „Modal“ im Ordner Components/Modal.

Schritt 2: Erstellen der HTML-Datei

Wir legen eine neue Datei namens Modal.html im Ordner Resources/Private/Templates/Modal an. Diese Datei enthält den HTML-Code für das Modal:

<div class="modal fade" tabindex="-1" role="dialog" id="{id}">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{title}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>{content}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Schritt 3: Erstellen der JavaScript-Datei

Wir erstellen eine Datei namens Modal.js im Ordner Resources/Private/JavaScript/Modal. Diese Datei enthält den JavaScript-Code für das Modal:

import {connect} from "../../JavaScript/Utils";

class Modal {
  constructor(element) {
    console.log(element);
    this.modal = element;
    this.modalTrigger = document.querySelector(`[data-target="#${element.id}"]`);
    this.modalClose = this.modal.querySelector(".close");
    this.modalClose.addEventListener("click", () => this.close());
    this.modalTrigger.addEventListener("click", () => this.open());
  }

  open() {
    this.modal.classList.add("show");
    document.querySelector("body").classList.add("modal-open");
  }

  close() {
    this.modal.classList.remove("show");
    document.querySelector("body").classList.remove("modal-open");
  }
}

connect("modal", Modal);

Schritt 4: Testdaten für die Komponente

Wir erstellen eine Datei namens Modal.fixture.json im Ordner Resources/Private/Fixtures/Modal. Diese Datei enthält die Testdaten für das Modal:

{
  "title": "Modal Title",
  "content": "Modal Content",
  "id": "modal1"
}

Schritt 5: Registrieren der Komponente in TYPO3

Wir erstellen eine TypoScript-Konfigurationsdatei im Ordner Configuration/TypoScript.
Um die Komponente zu registrieren, fügen wir die folgenden Zeilen ein:

component {
  modal = Component\Modal\Modal
}

Wir verbinden die Komponente mit ihren Ressourcen:

page.includeJS {
  modal = EXT:your_extension/Resources/Private/JavaScript/Modal/Modal.js
}
page.includeCSS {
  modal = EXT:your_extension/Resources/Private/CSS/Modal.css
}

Wir stellen die Verbindung zwischen der Komponente und ihrem Template her:

tt_content.modal =< lib.fluidContent
tt_content.modal {
  templateName = Modal
  templateRootPaths.10 = EXT:your_extension/Resources/Private/Templates/Modal/
  dataProcessing {
    10 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
    10 {
      table = tx_yourextension_domain_model_modal
      pidInList.data = leveluid : 0
      where.dataWrap = tx_yourextension_domain_model_modal.deleted = 0 AND tx_yourextension_domain_model_modal.hidden = 0 AND tx_yourextension_domain_model_modal.starttime < NOW() AND (tx_yourextension_domain_model_modal.endtime = 0 OR tx_yourextension_domain_model_modal.endtime > NOW())
      orderBy = tx_yourextension_domain_model_modal.sorting
      as = modal
    }
  }
}

Nach diesen Schritten sollte unsere Modal-Komponente registriert und zur Verwendung auf unserer TYPO3-Website bereit sein. Achte darauf, die Pfade anzupassen und alle Dateien hochzuladen.