Anybody using any page builders with sage?

sage
,
8

Page builder controller trait

<?php

namespace App;

trait PageBuilder
{
    public function page_builder()
    {

        // Get all page builder fields
        $page_builder = get_field('page_builder');

            // Set up array
            $data = [];

            // Loop through each block
            foreach ($page_builder as $block) {
                if ($block['acf_fc_layout'] == 'component_one') {

                    // Do any logic for this component here

                    $this_block = (object) [
                        'block_type' => $block['acf_fc_layout'],
                        'field_one' => $block['field_one'],
                        'field_two' => $block['field_two'],
                    ];
                    
                    array_push($data, $this_block);
                } elseif ($block['acf_fc_layout'] == 'component_two') {

                    // Do any logic for this component here

                    $this_block = (object) [
                        'block_type' => $block['acf_fc_layout'],
                        'field_one' => $block['field_one'],
                        'field_two' => $block['field_two'],
                    ];

                    array_push($data, $this_block);
                }
            }

            $data = (object) $data;

            return $data;
        }
    }
}

Page builder view partial

@foreach ($page_builder as $block)

    @if ($block->block_type == 'compontent_one')
        @include('partials.page-builder.component-one')
    @elseif ($block->block_type == 'compontent_two')
        @include('partials.page-builder.compontent-two')
    @endif

@endforeach

Component view partial i.e. component-one.blade.php

<section class="component-one">

    {{ $block->field_one }}
    {{ $block->field_two }}

</section>

And finally I would have a corresponding component-one.scss file.

The above is cut down to a minimum without any checking etc. to just show the basic structure. I call them blocks in the above code for no good reason (slightly shorter I guess) but block == component :man_shrugging:

Edit:

My next project is to break up the page builder trait as it can get kind of messy when there’s a lot of components with a lot of logic. The current method does lead to great tiny view partials and styles though and all the front-end code is the 100% your own :slight_smile:

12 Likes