Important

You are browsing documentation for version 5.0 of OroCommerce. Support of this version ended in January 2025. Read the documentation for version 6.1 (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