5. Page Composer

5.1. Configure

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
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.

1
2
3
4
5
6
7
8
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.

1
2
3
4
5
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:

1
event.containerId // loaded container id

blockcreated, event properties:

1
2
3
4
5
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:

1
event.parentId // removed block parent id

blockcreateformloaded, event properties:

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

blockpositionsupdate, event properties:

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

blockeditformloaded, event properties:

1
event.$block // the block jQuery element

blockparentswitched, event properties:

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