Important

You are browsing documentation for version 5.0 of OroCommerce, supported until January 2025. Read the documentation for version 6.0 (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.

Component Shortcuts

Component Shortcuts provide ability to use simple widgets/modules without complicated data-page-component-* attributes. ComponentManager handle initialization of all registered shortcuts.

You can define component options in three different ways:

Empty Value

Example:

<div data-page-component-collapse>
    Some content to collapse
</div>

// register shortcuts in ComponentShortcutsManager
var ComponentShortcutsManager = require('oroui/js/component-shortcuts-manager');

ComponentShortcutsManager.add('collapse', {
    moduleName: 'oroui/js/app/components/jquery-widget-component',
    options: {
        widgetModule: 'oroui/js/widget/collapse-widget'
    }
});

Object Value

Example:

<div data-page-component-collapse="{{ {storageKey: 'entityWorkflow' ~ entityId}|json_encode }}">
    Some content to collapse
</div>

// register shortcuts in ComponentShortcutsManager
var ComponentShortcutsManager = require('oroui/js/component-shortcuts-manager');

ComponentShortcutsManager.add('collapse', {
    moduleName: 'oroui/js/app/components/jquery-widget-component',
    options: {
        widgetModule: 'oroui/js/widget/collapse-widget'
    }
});

Scalar Value

Remember to add scalarOption to the shortcut.

Example:

<div data-page-component-jquery="oroui/js/widget/collapse-widget">
    Some content to collapse
</div>

// register shortcuts in ComponentShortcutsManager
var ComponentShortcutsManager = require('oroui/js/component-shortcuts-manager');

ComponentShortcutsManager.add('jquery', {
    moduleName: 'oroui/js/app/components/jquery-widget-component',
    scalarOption: 'widgetModule'
});

ComponentShortcutsManager

ComponentShortcutsManager is used to register shortcuts. Also containing helper method getComponentData to generate data for component initialization by element attributes and shortcut config.

References:

• ComponentShortcutManager

• ComponentShortcutsModule