How to realize one page template in TYPO3 with custom elements for sections?

Question

This is the template I want to use with TYPO3: http://www.shegy.nazwa.pl/themeforest/hype/ios/solid/

I want to give the user the possibility to add or remove sections like you see on the screenshots as many as they want. My first idea to solve this, is to create content elements.

I think tt_content is not enough for this. It would be neccessary to create an own table for each sections. Is there another way?

It would be very great to give the user the possibility to add content elments inside of the "section content element". Is this possible? Nested Content Elements? So the user could add a third features on the second screenshot.

Answer 1

You can create this with Gridelements. Check this link https://typo3.org/extensions/repository/view/gridelements

CREATING GRIDELEMENT:

1. install the extension Gridelements.
2. create sysfolder where to store gridelement templates
3. go with list on gridelements sys folder and click on + sign (create new record)
4. Choose from the list Gridelements->CE backend layout
5. Go to configuration tab and configure your gridelement (grid configuration field, in the right of it you'll see a icon - click on it for dynamic configuration)
6. Choose a related name for gridelement and save it.

ASSIGN GRIDELEMENT TO A PAGE:

Go on page where you want to put gridelement section

1. Click on "Create new content element" button, on the page you get go to Gridelements tab and choose gridelement.
2. Save content element and add content to your gridelements fields.

CREATING TEMPLATE FOR GRIDELEMENT:

Open your template typoscript file and add syntax for every gridelement.

# typoscript.ts
tt_content.gridelements_pi1.20.10.setup{ 
   # 1 is the gridelement id
   1 < lib.gridelements.defaultGridSetup
   1{
       columns{
         # 0 is the column id
         0 < .default
         0.wrap(
            <div class="column-div">|</div>
         )
      }
   }
}

FLUID TEMPLATES

# typoscript.ts
tt_content.gridelements_pi1.20.10.setup {
   1 < lib.gridelements.defaultGridSetup
   1{
      cObject = FLUIDTEMPLATE
      cObject {
         file = gridtemplate.html #here source of fluid template
      }
   }
}

Creating html template for our gridelement:

<!-- gridtemplate.html -->

<div class="{data.flexform_yourfield}">
   <!-- data.tx_gridelements_view_column_{column id} -->
   {data.tx_gridelements_view_column_1->f:format.raw()}
</div>

DYNAMIC CUSTOMIZING WITH FLEXFORM:

We go back to the backend with list on gridelements sysfolder, choose a gridelement and go to configuration tab and on Flexform configuration file - field - add your flexform file.

Above of Flexform configuration file you'll see Flexform configuration -textarea, my suggestion is to create flexform configuration in file, not directly fill in typo3 backend.

FLEXFORM CONFIGURATION EXAMPLE:

 <!-- flexform.xml -->
    <?xml version="1.0" encoding="UTF-8"?>
    <T3DataStructure>
      <ROOT type="array">
        <type>array</type>
        <el type="array">
          <yourfield>
            <TCEforms type="array">
                <label>Label of your input</label>
                <config>
                    <type>input</type>
                </config>
            </TCEforms>
          </yourfield>
        </el>
      </ROOT>
    </T3DataStructure>

Go up on gridtemplate.html code section and see how flexform is handled in template file.

And that's it all for gridelements.