Important

You are browsing the documentation for version 3.1 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. Read version 5.1 (the latest LTS version) of the Oro documentation to get up-to-date information.

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

JavaScript

Javascript in OroCommerce has a modular architecture based on RequireJS, Chaplin, and Backbone.

See also

JavaScript Frontend Architecture covers the client-side architecture of OroPlatform-based applications including OroCommerce.

This section provides configuration reference for the RequireJS library to enable a modular structure of JavaScript components in Oro applications.

RequireJS Definition

RequireJS configuration file should be placed in the Resources/views/layouts/{theme_name}/config folder and named requirejs.yml, for example DemoBundle/Resources/views/layouts/base/config/requirejs.yml.

Storefront themes build Javascript dependencies with RequireJSBundle, and you can use the configuration reference described in Require.js config generation article with the additional RequireJS configuration:

Option

Description

Required

build_path

Relative path from theme scripts folder (public/js/layouts/{theme_n ame}/)

no

Example:

 1# src/Acme/Bundle/DemoBundle/Resources/views/layouts/base/config/requirejs.yml
 2config:
 3   build_path: 'scripts.min.js'
 4   shim:
 5       'jquery-ui':
 6           deps:
 7               - 'jquery'
 8   map:
 9       '*':
10           'jquery': 'oroui/js/jquery-extend'
11       'oroui/js/jquery-extend':
12           'jquery': 'jquery'
13   paths:
14       'jquery': 'bundles/oroui/lib/jquery-1.10.2.js'
15       'jquery-ui': 'bundles/oroui/lib/jquery-ui.min.js'
16       'oroui/js/jquery-extend': 'bundles/oroui/js/jquery-extend.js'

When you execute the following command in the console:

php bin/console oro:requirejs:build

The result should be public/js/layouts/base/scripts.min.js.

RequireJS Config Provider

RequireJSBundle has its own config provider oro_requirejs.provider.requirejs_config and is used in the theme by default (public/js/oro.min.js minimized scripts by default). If you want to use your own minimized scripts in the theme, define the requires block type with provider_alias: { ‘@value’: ‘oro_layout_requirejs_config_provider’ }.

Example:

1# src/Acme/Bundle/DemoBundle/Resources/views/layouts/base/layout.yml
2...
3requirejs_scripts:
4   blockType: requires
5   options:
6      provider_alias: oro_layout_requirejs_config_provider
7...

oro_layout_requirejs_config_provider is alias of oro_layout.provider.requirejs_config.