itplusx/headless-container

Container Content Elements (EXT:container) json output for EXT:headless

Installs: 1 496

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 2

Forks: 4

Open Issues: 0

Type:typo3-cms-extension

v2.0.0 2024-01-03 15:45 UTC

This package is auto-updated.

Last update: 2024-05-01 00:06:19 UTC


README

This TYPO3 extension makes it possible to use EXT:container together with EXT:headless.

Installation

Installation with composer (recommended)

$ composer require itplusx/headless-container

Installation with the TYPO3 Extension Manager

see: Extension Management

Requirements and compatibility

Requirement Version
PHP 8.1-8.3
TYPO3 12.4
Headless 4
Container 2

Usage

  1. Include TypoScript (as described by the TypoScript Reference)
  2. Register your custom container element (as described by EXT:container)
  3. Define TypoScript ...
    (assuming you CType is b13-2cols-with-header-container)
    • ... for simple container elements:
      tt_content.b13-2cols-with-header-container =< lib.container
      
    • ... for container elements with header TCA fields:
      tt_content.b13-2cols-with-header-container =< lib.containerWithHeader
      
    • ... for container elements with custom TCA fields:
      (see EXT:headless docs for further info)
      tt_content.b13-2cols-with-header-container =< lib.container
      tt_content.b13-2cols-with-header-container.fields.content.fields {
        myCustomField = TEXT
        myCustomField.field = myCustomTcaField
      }
      
  4. That's all! You should now see JSON output for your custom container element!

Example json output

{
  "id": 2,
  "type": "b13-2cols-with-header-container",
  "colPos": 0,
  "categories": "",
  "appearance": {
    "layout": "default",
    "frameClass": "default",
    "spaceBefore": "",
    "spaceAfter": ""
  },
  "content": {
    "header": "Container Header",
    "subheader": "Container Subheader",
    "headerLayout": 0,
    "headerPosition": "",
    "headerLink": "",
    "myCustomField": "myCustomValue",
    "items": [
      {
        "config": {
          "name": "header",
          "colPos": 200
        },
        "contentElements": [
          {
            "id": 3,
            "type": "text",
            "colPos": 200,
            "categories": "",
            "appearance": {...},
            "content": {...}
          }
        ]
      },
      {
        "config": {
          "name": "left side",
          "colPos": 201
        },
        "contentElements": [
          {
            "id": 4,
            "type": "text",
            "colPos": 201,
            "categories": "",
            "appearance": {...},
            "content": {...}
          },
          {
            "id": 9,
            "type": "text",
            "colPos": 201,
            "categories": "",
            "appearance": {...},
            "content": {...}
          }
        ]
      },
      {
        "config": {
          "name": "right side",
          "colPos": 202
        },
        "contentElements": [
          {
            "id": 5,
            "type": "text",
            "colPos": 202,
            "categories": "",
            "appearance": {...},
            "content": {...}
          }
        ]
      }
    ]
  }
}

Contribution

Any help on this project is very welcome! May it be as code contribution or just an idea for improvement. But we would like to ask you to follow some rules:

  • Issues:
    When adding issues please always describe the bug/feature/task as detailed as possible. Only providing a title is not enough. Please use issue templates.
  • Commits:
    Our team is following the Conventional Commits. We would like ask you stick to these rules whenever you want to contribute.
  • Pull Requests:
    Before you submit a PR please create an issue first and link it to the pull request or at least add a PR description with detailed information about what this PR does. Otherwise we are not able to decide if this PR is worth going into the main branch.

ITplusX - Internetagentur & Systemhaus