nitsan-technologies / headless-container

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

TYPO3 Extension headless_container

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	7.4, 8.0
TYPO3	11.5
Headless	3
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.

---

---