# Container Extension Kurulumu

b13/container extension'ı, TYPO3'te esnek layout yapıları (grid, sütunlar, tablar vb.) oluşturmayı sağlar.

---

## Container Nedir?

Container, içerik elemanlarını gruplandırmak ve düzenlemek için kullanılan bir yapıdır. Geleneksel `gridelements` veya `flux` yerine modern bir alternatiftir.

**Avantajları:**
- Basit ve hafif
- TYPO3 Core ile uyumlu
- Sürükle-bırak desteği
- Backend preview desteği
- Kopyalama/yapıştırma desteği

---

## Kurulum

```bash
# Composer ile yükle (TYPO3 v13 için ^3.0)
ddev composer require b13/container

# Veritabanı şemasını güncelle
ddev exec vendor/bin/typo3 extension:setup

# Cache temizle
ddev exec vendor/bin/typo3 cache:flush
```

**Not:** TYPO3 v13 için `b13/container` ^3.0 kullanılır (^2.0 sadece TYPO3 10–12 destekler).

---

## Projede Kurulu Grid Container'lar (testproject)

| CType | Başlık | Açıklama |
|-------|--------|----------|
| `grid-2cols` | 2 Column Grid | Sol / Sağ (colPos 201, 202) |
| `grid-3cols` | 3 Column Grid | Sol / Orta / Sağ (colPos 301, 302, 303) |
| `grid-fullwidth` | Full Width | Tek sütun sarmalayıcı (colPos 100) |

- **TCA:** `packages/testproject/Configuration/TCA/Overrides/tt_content.php`
- **TypoScript:** `packages/testproject/Configuration/Sets/SitePackage/TypoScript/Container.typoscript`
- **Fluid:** `packages/testproject/Resources/Private/Templates/Container/` (TwoColumns.html, ThreeColumns.html, FullWidth.html)

Backend’de **Yeni içerik öğesi → Container** altında listelenir.

---

## Container Tanımlama

### TCA Overrides ile Kayıt (TYPO3 v13 / b13/container v3)

`packages/my_site_package/Configuration/TCA/Overrides/tt_content.php`:

```php
<?php

declare(strict_types=1);

defined('TYPO3') or die();

use B13\Container\Tca\ContainerConfiguration;
use B13\Container\Tca\Registry;
use TYPO3\CMS\Core\Utility\GeneralUtility;

$containerRegistry = GeneralUtility::makeInstance(Registry::class);

// 2 Sütunlu Layout
$containerRegistry->configureContainer(
    (new ContainerConfiguration(
        'two-columns',           // CType
        '2 Sütun',               // Başlık
        'İki sütunlu layout',   // Açıklama
        [
            [
                ['name' => 'Sol Sütun', 'colPos' => 201],
                ['name' => 'Sağ Sütun', 'colPos' => 202],
            ],
        ]
    ))
    ->setIcon('EXT:my_site_package/Resources/Public/Icons/two-columns.svg')
    ->setGroup('container')
    ->setSaveAndCloseInNewContentElementWizard(true)
);

// 3 Sütunlu Layout
$containerRegistry->configureContainer(
    (new ContainerConfiguration(
        'three-columns',
        '3 Sütun',
        'Üç sütunlu layout',
        [
            [
                ['name' => 'Sol', 'colPos' => 301],
                ['name' => 'Orta', 'colPos' => 302],
                ['name' => 'Sağ', 'colPos' => 303],
            ],
        ]
    ))
    ->setIcon('EXT:my_site_package/Resources/Public/Icons/three-columns.svg')
    ->setGroup('container')
);

// Tam Genişlik Wrapper
$containerRegistry->configureContainer(
    (new ContainerConfiguration(
        'full-width-wrapper',
        'Tam Genişlik',
        'Tam genişlikte sarmalayıcı',
        [
            [
                ['name' => 'İçerik', 'colPos' => 100],
            ],
        ]
    ))
    ->setIcon('EXT:my_site_package/Resources/Public/Icons/full-width.svg')
    ->setGroup('container')
);

// Tab Container
$containerRegistry->configureContainer(
    (new ContainerConfiguration(
        'tab-container',
        'Tab Layout',
        'Sekmeli içerik alanı',
        [
            [['name' => 'Sekme 1', 'colPos' => 401]],
            [['name' => 'Sekme 2', 'colPos' => 402]],
            [['name' => 'Sekme 3', 'colPos' => 403]],
        ]
    ))
    ->setIcon('EXT:my_site_package/Resources/Public/Icons/tabs.svg')
    ->setGroup('container')
);

// Accordion Container
$containerRegistry->configureContainer(
    (new ContainerConfiguration(
        'accordion-container',
        'Accordion',
        'Akordeon içerik alanı',
        [
            [['name' => 'Bölüm 1', 'colPos' => 501]],
            [['name' => 'Bölüm 2', 'colPos' => 502]],
            [['name' => 'Bölüm 3', 'colPos' => 503]],
        ]
    ))
    ->setGroup('container')
);
```

---

## Frontend Template (TypoScript)

`Configuration/Sets/MySitePackage/setup.typoscript`:

```typoscript
# 2 Sütun Container
tt_content.two-columns = FLUIDTEMPLATE
tt_content.two-columns {
    templateName = TwoColumns
    templateRootPaths.10 = EXT:my_site_package/Resources/Private/Templates/Container/
    dataProcessing {
        100 = B13\Container\DataProcessing\ContainerProcessor
        100 {
            colPos = 201
            as = childrenLeft
        }
        101 = B13\Container\DataProcessing\ContainerProcessor
        101 {
            colPos = 202
            as = childrenRight
        }
    }
}

# 3 Sütun Container
tt_content.three-columns = FLUIDTEMPLATE
tt_content.three-columns {
    templateName = ThreeColumns
    templateRootPaths.10 = EXT:my_site_package/Resources/Private/Templates/Container/
    dataProcessing {
        100 = B13\Container\DataProcessing\ContainerProcessor
        100 { colPos = 301 / as = childrenLeft }
        101 = B13\Container\DataProcessing\ContainerProcessor
        101 { colPos = 302 / as = childrenCenter }
        102 = B13\Container\DataProcessing\ContainerProcessor
        102 { colPos = 303 / as = childrenRight }
    }
}
```

---

## Fluid Templates

### TwoColumns.html

`Resources/Private/Templates/Container/TwoColumns.html`:

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">

<div class="container-two-columns">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div class="column-left">
            <f:for each="{childrenLeft}" as="child">
                <f:format.raw>{child.renderedContent}</f:format.raw>
            </f:for>
        </div>
        <div class="column-right">
            <f:for each="{childrenRight}" as="child">
                <f:format.raw>{child.renderedContent}</f:format.raw>
            </f:for>
        </div>
    </div>
</div>

</html>
```

### ThreeColumns.html

`Resources/Private/Templates/Container/ThreeColumns.html`:

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">

<div class="container-three-columns">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="column-left">
            <f:for each="{childrenLeft}" as="child">
                <f:format.raw>{child.renderedContent}</f:format.raw>
            </f:for>
        </div>
        <div class="column-center">
            <f:for each="{childrenCenter}" as="child">
                <f:format.raw>{child.renderedContent}</f:format.raw>
            </f:for>
        </div>
        <div class="column-right">
            <f:for each="{childrenRight}" as="child">
                <f:format.raw>{child.renderedContent}</f:format.raw>
            </f:for>
        </div>
    </div>
</div>

</html>
```

---

## Kaynaklar

- [b13/container GitHub](https://github.com/b13/container)
- [Container Dokümantasyonu](https://github.com/b13/container/blob/master/README.md)
