5. Page Composer

5.1. Configure

default_template: default
templates:
    default:
        path: '@ApplicationSonataPage/demo_layout.html.twig'
        name: 'default'
        containers:
            header:
                name: Header
            content_top:
                name: Top content
            content:
                name: Main content
            content_bottom:
                name: Bottom content
            footer:
                name: Footer
        matrix:
            layout: |

                HHHHHHHH
                TTTTTTTT
                TTTTTTTT
                CCCCCCCC
                CCCCCCCC
                BBBBBBBB
                BBBBBBBB
                FFFFFFFF

            mapping:
              H: header
              T: content_top
              C: content
              B: content_bottom
              F: footer

    2columns:
        path: '@ApplicationSonataPage/demo_2columns_layout.html.twig'
        name: '2 columns layout'
        inherits_containers: default
        containers:
            left_col:
                name: Left column
                blocks:
                    - sonata.media.block.media
                    - sonata.media.block.gallery
                    - sonata.media.block.feature_media
            content:
                name: Main content
                blocks:
                    - sonata.media.block.media
            right_col:
                name: Right column
                blocks:
                    - sonata.news.block.recent_posts
                    - sonata.order.block.recent_orders
                    - sonata.product.block.recent_products
        matrix:
            layout: |

                HHHHHHHHHH
                TTTTTTTTTT
                TTTTTTTTTT
                LLLCCCCRRR
                LLLCCCCRRR
                BBBBBBBBBB
                BBBBBBBBBB
                FFFFFFFFFF

            mapping:
               H: header
               T: content_top
               L: left_col
               R: right_col
               C: content
               B: content_bottom
               F: footer

    3columns:
        path: '@ApplicationSonataPage/demo_3columns_layout.html.twig'
        name: '3 columns layout'
        containers:
            left_col:
                name: Left column
                blocks:
                    - sonata.media.block.media
                    - sonata.media.block.gallery
                    - sonata.media.block.feature_media
            mid_col:
                name: Left column
                blocks:
                    - sonata.media.block.media
                    - sonata.media.block.gallery
                    - sonata.media.block.feature_media
            right_col:
                name: Right column
                blocks:
                    - sonata.news.block.recent_posts
                    - sonata.order.block.recent_orders
                    - sonata.product.block.recent_products
        matrix:
            layout: |
                LLLMMMMRRR
                LLLMMMMRRR
                LLLMMMMRRR
                LLLMMMMRRR
                LLLMMMMRRR

            mapping:
               L: left_col
               R: right_col
               M: mid_col

5.1.1. Template inheritance

If you want your template to extend from another template so you don’t have to redeclare all your containers you can use the inherits_containers option. This is also shown in the example above.

templates:
    2columns:
        inherits_containers: default
        containers:
            content:
                name: Main content
                blocks:
                    - sonata.media.block.media

5.1.2. Template chooser

If you have added some custom templates to a block for the SonataBlockBundle you get a template chooser.

sonata_block:
       acme.demo.block.demo:
           templates:
              - { name: 'Simple', template: '@AcmeDemo/Block/demo_simple.html.twig' }
              - { name: 'Big',    template: '@AcmeDemo/Block/demo_big.html.twig' }

5.2. Javascript

The PageComposer js object trigger various events to allow customization:

containerloaded, event properties:

event.containerId // loaded container id

blockcreated, event properties:

event.$childBlock // created block jQuery element
event.parentId    // created block parent id
event.blockId     // created block id
event.blockName   // created block name
event.blockType   // created block type

blockremoved, event properties:

event.parentId // removed block parent id

blockcreateformloaded, event properties:

event.response    // the raw html response (form)
event.containerId // current container id
event.blockType   // selected block type

blockpositionsupdate, event properties:

event.disposition // a javascript object containing all child blocks position/ids…

blockeditformloaded, event properties:

event.$block // the block jQuery element

blockparentswitched, event properties:

event.previousParentId // previous parent block id
event.newParentId      // new parent block id
event.blockId          // child block id