Important

You are browsing documentation for version 6.0 of OroCommerce, supported until 2028. Read the documentation for the latest LTS version to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Layout Subtree View

The Layout Subtree View allows you to reload the content of a specific layout block via Ajax requests. This is useful for updating portions of a page dynamically without performing a full page reload.

Initialization

Layout Update

Define a layout update in your YAML configuration:

layout:
    actions:
        - '@addTree':
            ...
            tree:
                layout_block_id: ~

Adding LayoutSubtreeView in Twig Template

Include the LayoutSubtreeView in the block template to enable dynamic reloading:

{% block _layout_block_id_widget %}
    <div id="block_id"
        data-page-component-module="oroui/js/app/components/view-component"
        data-page-component-options="{{ {
            view: 'oroui/js/app/views/layout-subtree-view',
            blockId : id,
            reloadEvents: ['reload-on-event'],
            restoreFormState: true
        }|json_encode }}"
        >
        {{ block_widget(block) }}
    </div>
{% endblock %}

JavaScript Initialization

You can also initialize the view directly in JavaScript:

var LayoutSubtreeView = require('oroui/js/app/views/layout-subtree-view');
var layoutSubtree = new LayoutSubtreeView({
    el: '#block_id',
    blockId: 'layout_block_id',
    reloadEvents: ['reload-on-event'],
    restoreFormState: true
});

Reloading the Layout

After initialization, the layout can be reloaded programmatically:

//then call reload method
layoutSubtree.reloadLayout();

Or you can trigger a reload from another script using the mediator:

var mediator = require('oroui/js/mediator');
mediator.trigger('reload-on-event');