Sitepage-Builder benutzen mit TYPO3 v11

Der Sitepage-Builder ist ein tolles Tool um ein Sitepackage für eine Seite zu starten. Leider ist es zu Zeit nur ausgerichtet für die TYPO3-Version v8-v10, das wird sich bestimmt demnächst ändern, aber bis dahin hier mein kleines Tutorial.

Das Tutorial geht bis zur Ausgabe von Content Elementen aus dem Backend im Frontend. D.h. evtl. müssen noch weitere Anpassungen vorgenommen werden für andere Element, aber das wird im diesem Tutorial nicht behandelt.

TYPO3 v11

Als Grundlage nehme ich ein leere TYPO3-Installation, die ich über den Composer installiert habe. Bei der Installation, über das Web-Interface, habe ich bei der Frage ob eine Seite erstellt werden soll oder ob direkt zu Backend weitergeleitet werden soll, gesagt das ich direkt zum Backend will.

Ich habe keine weitere Sprache installiert, deswegen werde ich weiter unten, bei allen Backend Elementen die englische Bezeichnungen benutzten.

Sitepackage-Builder

Der erste Schritt ist, das ich mir über Sitepackage-Builder-Webseite das Zip für ein neues Sitepackage erstellen lasse.

Dazu wähle ich die TYPO3 Version 10.4 und fülle die folgenden Felder mit diesen Informationen aus

Base Package
Fluid Styled Content

Title
Test V11 Sitepackage

Nicht der tollste Titel, aber euch fällt bestimmt was besseres ein

Description
Der Versuch ein v10 Package auf v11 zum laufen zu bringen.

Repository URL
hab ich leer gelassen

Name
Just Bunch of

Email
info@ahbece.xyz

Company (hier ist zu beachten das dieser Eintrag als Vendor-Name im erzeugten Code benutzt wird)
Justabunchof

Homepage
https://blog.ahbece.xyz

Und dann „Create Sitepackage“ klicken, worauf ein Zip herunterladen wird.

Vorbereitung auf dem Server

Der nächste Schritt, ist das Sitepackage über den Composer in meine Installation zu integrieren. Dabei hat mir dieses Tutorial geholfen.

Ich erstelle, auf der File-Ebene, z.B. über eine SSH-Konsole, in meinem Home-Verzeichnis (das gleiche Verzeichnis indem auch die composer.json der TYPO3-Installation liegt) zwei Verzeichnisse:

mkdir packages

Für alle meine eigenen Extensions und das Sitepackage und

mkdir packages/test_v11_sitepackage

für mein Sitepackage. Der Name ergibt sich aus dem Zip, das ich vom Sitepackage-Builder herunter geladen habe.

Nun muss ich meiner TYPO3-Installation sagen, wo die zusätzlichen Extensions zu finden sind. Dafür öffne ich die composer.json der Installation, die Ungefähr so aussieht

{
   "name": "typo3/cms-base-distribution",
   "description" : "TYPO3 CMS Base Distribution",
   "license": "GPL-2.0-or-later",
   "config": {
      "platform": {
         "php": "7.4.1"
      },
      "sort-packages": true
   },
   "require": {
      "helhum/typo3-console": "^7.0.2",
      "typo3/cms-backend": "^11.5.0",
      "typo3/cms-belog": "^11.5.0",
      "typo3/cms-beuser": "^11.5.0",
      "typo3/cms-core": "^11.5.0",
      "typo3/cms-dashboard": "^11.5.0",
      "typo3/cms-extbase": "^11.5.0",
      "typo3/cms-extensionmanager": "^11.5.0",
      "typo3/cms-felogin": "^11.5.0",
      "typo3/cms-filelist": "^11.5.0",
      "typo3/cms-fluid": "^11.5.0",
      "typo3/cms-fluid-styled-content": "^11.5.0",
      "typo3/cms-form": "^11.5.0",
      "typo3/cms-frontend": "^11.5.0",
      "typo3/cms-impexp": "^11.5.0",
      "typo3/cms-info": "^11.5.0",
      "typo3/cms-install": "^11.5.0",
      "typo3/cms-recordlist": "^11.5.0",
      "typo3/cms-rte-ckeditor": "^11.5.0",
      "typo3/cms-seo": "^11.5.0",
      "typo3/cms-setup": "^11.5.0",
      "typo3/cms-sys-note": "^11.5.0",
      "typo3/cms-t3editor": "^11.5.0",
      "typo3/cms-tstemplate": "^11.5.0",
      "typo3/cms-viewpage": "^11.5.0"
   },
   "scripts":{
      "typo3-cms-scripts": [
         "typo3cms install:fixfolderstructure"
      ],
      "post-autoload-dump": [
         "@typo3-cms-scripts"
      ]
   }
}

Und füge nach dem Punkt ‚license‘ folgenden Code ein:

   "repositories": [
      { "type": "path", "url": "packages/*" }
   ],

Sitepackage über Composer installieren

Nun übertrage ich über SFTP oder ähnliches das Zip in das Verzeichniss ‚ packages/test_v11_sitepackage ‚ und entpacke es mit

unzip test_v11_sitepackage.zip

Auch am Sitepackage müssen jetzt noch Änderungen durchgeführt werden. In der composer.json des Packages die bisher so aussieht

{
    "name": "justabunchof/test-v11-sitepackage",
    "type": "typo3-cms-extension",
    "description": "Der Versuch ein v10 Package auf v11 zum laufen zu bringen.",
    "homepage": "https://blog.ahbece.xyz",
    "license": ["GPL-2.0-or-later"],
    "keywords": ["TYPO3 CMS"],
    "require": {
        "typo3/cms-core": "^10.2",
        "typo3/cms-rte-ckeditor": "^10.2",
        "typo3/cms-fluid-styled-content": "^10.2"
    },
    "autoload": {
        "psr-4": {
            "Justabunchof\\TestV11Sitepackage\\": "Classes/"
        }
    }
}

Hier muss unter „require“ die TYPO3-Version auf v11 angepasst werden und am Ende des Files fügen wir noch den Extentsion-Key des Sitepackage ein. Der Extension-Key leitet sich ab aus dem Names des Zips. So das unsere composer.json so aussieht:

{
    "name": "justabunchof/test-v11-sitepackage",
    "type": "typo3-cms-extension",
    "description": "Der Versuch ein v10 Package auf v11 zum laufen zu bringen.",
    "homepage": "https://blog.ahbece.xyz",
    "license": ["GPL-2.0-or-later"],
    "keywords": ["TYPO3 CMS"],
    "require": {
        "typo3/cms-core": "^11.5",
        "typo3/cms-rte-ckeditor": "^11.5",
        "typo3/cms-fluid-styled-content": "^11.5"
    },
    "autoload": {
        "psr-4": {
            "Justabunchof\\TestV11Sitepackage\\": "Classes/"
        }
    },
    "extra": {
       "typo3/cms": {
          "extension-key": "test_v11_sitepackage"
       }
    }
}

Nun kann, über den Composer, die Extension installiert werden. Ausgeführt wird dieser Befehl im Homeverzeichnis der Installation.

composer require justabunchof/test-v11-sitepackage @dev

Vorbereitung für die Ausgabe im von Inhalten im Frontend

Nun muss noch eine Änderung vorgenommen werden im Code des Sitepackages und zwar muss in der der Datei ‚ext_emconf.php‘ noch die Abhängigkeit zur TYPO3 v11 hinzugefügt werden, so das das der ‚contraints‘-Teil der Datei ändert von

    'constraints' => [
        'depends' => [
            'typo3' => '10.2.0-10.4.99',
            'fluid_styled_content' => '10.2.0-10.4.99',
            'rte_ckeditor' => '10.2.0-10.4.99',
        ],
        'conflicts' => [
        ],
    ],

Auf

	'constraints' => [
        'depends' => [
            'typo3' => '10.2.0-11.5.99',
            'fluid_styled_content' => '10.2.0-11.5.99',
            'rte_ckeditor' => '10.2.0-11.5.99',
        ],
        'conflicts' => [
        ],
    ],

so, das TYPO3 v11 erlaubt wird bis zur Version 11.5.99.

Nun muss man ins Backend der TYPO3-Installation wechseln und eine Seite „Home“ erstellen. Unter den Backend-Menüpunkt „Template“ erklärt man jetzt das dieses Seite der Startpunkt für einen neue Seite ist.

Als letztes bearbeite man den Template Record. Unter „General“ löscht man aus dem Feld „Setup“ alle Inhalte. Und im Reiter „Includes“ fügt man „Fluid Content Elements“, “ Fluid Content Elements CSS“ und „Test V11 Sitepackage“ ein, wobei „Test V11 Sitepackage“ ganz unten eingefügt sein muss.

Fertig

Speichern, Cache löschen und nun können auf der „Home“-Seite Inhalte eingefügt werden.

Was man weiter mit dem Sitepackage machen kann kann man in diesem Tutorial oder in diesem Tutorial.