<div style="display: none;" hidden="true" aria-hidden="true">Are you an LLM? You can read better optimized documentation at /guides/Builder.md for this page in Markdown format</div>

Home | Changelog

Builder

v0.1 - prototype

Integrated grapejs in application.

Users can create new blocks or update existing ones using the editor and store them in db with along with plain html and css that can be echoed in a page to display the generated content.

Current blocks in 'ECOMMERCEN' category are testing blocks which should not be used in production. They are scheduled for removal as soon as we have some basic ready blocks.

Currently, the editor (assets/admin/js/builder/index.js) is using import testBlocks from './test-blocks' which are the sample blocks (testing-block-1 up to testing-block-5).

There are two configs in only for advisable settings. One which allows the usage of the block editor and one which allows promos to use the blocks listing

v0.2 - beta release

Configuration

Using builder is toggled from admin settings -> only for advisable with a single option for global usage.

Introduced applciation/config/builder.php which contains the position keys for the builder and optional openContainer and closeContainer for overriding defaults, along with default openContainer and closeContainer

openContainer and closeContainer options in positions can take:

1. null which means use default container option,
2. empty string which means do not set a container and
3. any string sets container

$config['builder'] = [
    'positions' => [
        'promoPage' => ['openContainer' => '<div class="d-block custom-builder-pg">', 'closeContainer' => '</div>'],
        'productDescription' => ['openContainer' => null, 'closeContainer' => null],
        'categoryDescription' => ['openContainer' => '<div class="container">', 'closeContainer' => '</div>'],
        'vendorDescription' => ['openContainer' => '<div class="container-fluid">', 'closeContainer' => '</div>'],
        'vendorExclusive' => ['openContainer' => null, 'closeContainer' => null],
        'blogArticle' => ['openContainer' => null, 'closeContainer' => null],
        'cmsPage' => ['openContainer' => '<div class="d-block custom-builder-pg">', 'closeContainer' => '</div>'],
    ],
    'defaultOpenContainer' => '',
    'defaultCloseContainer' => '',
];

Usage

render data will contain blockData array with keys the config positions if they are set for current rendered view.

ie to replace the product description with a builder block element we would

1. set a var to contain our builder block data $blockViewData = $blockData['productDescription'] ?? null;
2. echo the block instead of the description

if ($blockViewData) {
    echo $this->load->view($template->componentView('builder'), ['blockViewData' => $blockViewData]);
} else {
    echo $productData->description;
}

You can alter per use case the open and close containers by using BlockBuilder::frontRender by setting the open and close container arguments and getting that in the returned BuilderBlockViewData instance ie for productDescription we could do $this->render = $this->blockBuilder->frontRender($this->render, $query->builder_block_id, 'productDescription', '<div class="whatever">', '</div>'); instead of $this->render = $this->blockBuilder->frontRender($this->render, $query->builder_block_id, 'productDescription');

check promo view for a full page usage and product page view for an injected block usage regarding usage in controllers.

Notes

for new block positions:

1. a migration is needed for new positions in corresponding entity mui table.
2. the position in builder config
3. admin create / edit (with set_value corrected) views that we want builder block should have a block like this

<?php if ($builderEnabled) : ?>
    <div class="col-sm-12">
        <div class="form-group form-group-important-bg important">
            <div class="col-sm-3">
                <label class="control-label">
                    <?= t('eshop.admin.block_builder.select_block'); ?>
                </label>
                <div class="btn-group" role="group">
                    <a class="btn btn-primary" type="button" target="_blank" href="<?= site_url('block-builder'); ?>"><i class="fa fa-plus"></i></a>
                    <button class="btn btn-secondary js-builder-edit" type="button"><i class="fa fa-edit"></i></button>
                    <button class="btn btn-secondary js-builder-refresh" type="button"><i class="fa fa-refresh"></i></button>
                    <button class="btn btn-secondary js-builder-clear" type="button"><i class="fa fa-times"></i></button>
                </div>
            </div>
            <?php foreach ($adminLanguages as $l_abbr => $l_desc) { ?>
                <div class="col-sm-9" data-crud-language="<?= $l_abbr; ?>">
                    <?= form_dropdown(
                        "builder_block_id_{$l_abbr}",
                        $builderBlocks,
                        set_value("builder_block_id_{$l_abbr}"),
                        'class="form-control chosen-select js-builder-select"'
                    ); ?>
                </div>
            <?php } ?>
        </div>
    </div>
<?php endif; ?>

changelog

• removed setting which allows promos to use the blocks listing. Keep only one global switch for controlling usage of builder.
• removed test blocks from builder and added new blocks to be used in main and default template
• added config builder.php which contains the position keys for the builder and optional openContainer and closeContainer for overriding defaults
• added cmsPage for builder which behaves as a full page (like promo)
• added productDescription, categoryDescription, vendorDescription, vendorExclusive, blogArticle positions which are injected blocks in the existing views