HOW TO embed custom javascript in orocommerce.

Good day. As the title says, i want to embed some custom JS files in my orocommerce app. I am reading docs and trying out things for several days now, but didn’t get it solved yet.

My requirejs.yml:

YAML

build: paths: 'tweenmax': 'empty:' config: build_path: 'testscript.min.js' shim: 'tweenmax': exports: "TweenMax" paths: 'stennotest/js/test.js': '/bundles/stennotest/js/test.js' 'tweenmax': 'https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'

1 2 3 4 5 6 7 8 9 10 11

build:     paths:         'tweenmax': 'empty:' config:     build_path: 'testscript.min.js'     shim:         'tweenmax':             exports: "TweenMax"     paths:         'stennotest/js/test.js':    '/bundles/stennotest/js/test.js'         'tweenmax':                 'https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'

My test.js reads:

JavaScript

require(["jquery", "tweenmax"], function($, TweenMax) { "use strict"; console.log("Hello require"); console.log($.fn.jquery); console.log("Hello TweenMax"); console.log(new TweenMax.TweenMax()); });

1 2 3 4 5 6 7 8

require(["jquery", "tweenmax"], function($, TweenMax) { "use strict"; console.log("Hello require"); console.log($.fn.jquery); console.log("Hello TweenMax"); console.log(new TweenMax.TweenMax()); });

My update.yml just contains a single instruction:

YAML

requirejs_scripts: blockType: requires options: provider_alias: { '@value': 'oro_layout_requirejs_config_provider' }

1 2 3 4

requirejs_scripts:     blockType: requires     options:         provider_alias: { '@value': 'oro_layout_requirejs_config_provider' }

However, it does not work. I will not get ANY console log at all. I am trying for SEVERAL DAYS now to get this working. What did I do wrong? Where do i need to add or change something. WHERE is this documented?

With kind regards,
Christian

Topic

[Hryhorii HrebiniukParticipant]

Hello.

You are in a right direction, but have a few moments that is done incorrectly:
– you don’t need here update.yml for requirejs_scripts. That item is already in layout tree.
– build_path: 'testscript.min.js' is configured in the application config/config.yml not in requirejs.yml. It is done already, and don’t think that you realy need for change it, unless you 100% sure that is has to be changed.
– 'stennotest/js/test.js': '/bundles/stennotest/js/test.js' — left part has to be without file extension, right side has to be without leading slash, e.g. 'stennotest/js/test': 'bundles/stennotest/js/test.js'
– the most important issue here is — the place where you have defined your requirejs.yml. I suppose it is defined in {{yourbundle}}/Resources/config/requirejs.yml. That config is used for back office side. For front store the correct place is {{yourbundle}}/Resources/views/layouts/{{themename}}/config/requirejs.yml

Few notes.
– after any changes in requirejs.yml application cache has to be cleaned and warmed up: bin/console cache:clear and bin/console cache:warmup
– once added directory {{yourbundle}}/Resources/public it has to be installed with command bin/console assets:install --symlink

I’ve checked your code and it works fine after fixing comments above.

Please also take a look how to design you code as components:
https://oroinc.com/b2b-ecommerce/doc/current/dev-guide/basics/frontend-architecture

[Author]

Replies