Custom JS in Magento2 product page

Question 1

(This is the plugin I am trying to use) http://zurb.com/playground/twentytwenty

I have

app/design/frontend/myvendor/mytheme/requirejs-config.js

and it looks like:

var config = {
 map: {
 'eventmove': 'Magento_Theme/js/jquery.event.move',
 'twentytwenty': 'Magento_Theme/js/jquery.twentytwenty'
 },
 shim: {
 'twentytwenty': {
 deps: ['jquery']
 }
 }
};

cleared pub folder, set development mode, re-compile, deploy static files...

viewing source on front end reveals the js files are not loaded.

also, this is the code on the detail page that it needs, I dont knwo if it's formatted right or not since requirejs isnt working.

<script>
 require([
 'jquery',
 'eventmove',
 'twentytwenty'
 ], function () {
 jQuery(document).ready(function() {
 jQuery(window).load(function() {
 jQuery(".twentytwenty-container").twentytwenty();
 });
 });
</script>

EDIT description of errors

Question 2

Is there any browser console error?

Question 3

Magento2 uses RequireJS to load javascript modules, you should use this to integrate the module with the standard jQuery library. You should place a requirejs-config.js file in your custom theme. This file is used by Magento for locating JS modules, like for example twentytwenty.

Example requirejs-config.js:

var config = {
 paths: {
 'twentytwenty': 'Magento_Theme/js/twentytwenty' 
 },
 shim: {
 'twentytwenty': {
 deps: ['jquery']
 }
 }
};

paths is used by Magento2 to locate the main JS module. Shim makes sure that it is loaded after jQuery

File location: app/design/frontend/Your/CustomTheme/Magento_Theme/web/js/twentytwenty.js

In your template PHTML:

<script>
 require([
 'jquery',
 'twentytwenty'
 ], function () {
 jQuery(window).load(function() {
 jQuery("#container1").twentytwenty();
 });
 });
</script>

Do not add JS files directly to the <head> tag. You can find more documentation about RequireJS here: http://alanstorm.com/magento_2_and_requirejs/

Question 4

Thanks so Much @N-Bursma I edited the original question to reflect the new changes, I tried that, and it requirejs isn't loading the .js at all

Question 5

What kind of error does the console give you? I'm not sure that the location 'js/jquery.event.move' is correctly. Try to stick with Magento_Theme/js/twentytwenty for now, I can confirm that this locations is working.

Question 6

I've also updated the PHTML snippet, you should try that code. Make sure that you delete the requirejs file in the /pub folder. Also try to open the page with cache disabled or in incognito mode.

Question 7

thanks so much, so changing it to Magento_Theme/js/**** it still doesn't work... the console shows a: Unable to resolve the source file for 'frontend/CVP/CVPStyle1-2/en_US/twentytwenty.js'

Question 8

I've added the exact file location to the answer. Can you compare this to the location of your twentytwenty.js file? Make sure that you aren't missing the web folder in Magento_Theme, which is standard for js/css/images.

Question 9

@Tjitse:

Have you tried to wrap the 3rd party JS library (code in the jquery.twentytwenty.js) in "define", as follows:

define(["jquery"], function($){
 (function($){
 $.fn.twentytwenty = function(options) ...
 // ... the rest of library code ...
 // ...
 })(jQuery);
});

Doing this should make sure your code runs after the dependencies are loaded.

BTW, your requirejs-config.js looks just fine, but I guess the jquery.event.move.js also requires jquery?

Question 10

I'm sure jquery.event.move.js does also require jquery. so are you saying to modify the jquery.twentytwenty.js file to have the 'define' as you posted?

Question 11

Yes, basically. Define ensures requirements are loaded before

Question 12

You can also use AMD features (many recent jquery libs and jquery itself do that)

Tjitse 1,33016 silver badges28 bronze badges · Answer 1 · 2016-12-12 22:18:06Z

Magento2 uses RequireJS to load javascript modules, you should use this to integrate the module with the standard jQuery library. You should place a requirejs-config.js file in your custom theme. This file is used by Magento for locating JS modules, like for example twentytwenty.

Example requirejs-config.js:

var config = {
 paths: {
 'twentytwenty': 'Magento_Theme/js/twentytwenty' 
 },
 shim: {
 'twentytwenty': {
 deps: ['jquery']
 }
 }
};

paths is used by Magento2 to locate the main JS module. Shim makes sure that it is loaded after jQuery

File location: app/design/frontend/Your/CustomTheme/Magento_Theme/web/js/twentytwenty.js

In your template PHTML:

<script>
 require([
 'jquery',
 'twentytwenty'
 ], function () {
 jQuery(window).load(function() {
 jQuery("#container1").twentytwenty();
 });
 });
</script>

Do not add JS files directly to the <head> tag. You can find more documentation about RequireJS here: http://alanstorm.com/magento_2_and_requirejs/

Thanks so Much @N-Bursma I edited the original question to reflect the new changes, I tried that, and it requirejs isn't loading the .js at all
What kind of error does the console give you? I'm not sure that the location 'js/jquery.event.move' is correctly. Try to stick with Magento_Theme/js/twentytwenty for now, I can confirm that this locations is working.
I've also updated the PHTML snippet, you should try that code. Make sure that you delete the requirejs file in the /pub folder. Also try to open the page with cache disabled or in incognito mode.
thanks so much, so changing it to Magento_Theme/js/**** it still doesn't work... the console shows a: Unable to resolve the source file for 'frontend/CVP/CVPStyle1-2/en_US/twentytwenty.js'
I've added the exact file location to the answer. Can you compare this to the location of your twentytwenty.js file? Make sure that you aren't missing the web folder in Magento_Theme, which is standard for js/css/images.

Dmitri Sologoubenko 4805 silver badges14 bronze badges · Answer 2 · 2017-01-13 14:57:43Z

-1

@Tjitse:

Have you tried to wrap the 3rd party JS library (code in the jquery.twentytwenty.js) in "define", as follows:

define(["jquery"], function($){
 (function($){
 $.fn.twentytwenty = function(options) ...
 // ... the rest of library code ...
 // ...
 })(jQuery);
});

Doing this should make sure your code runs after the dependencies are loaded.

BTW, your requirejs-config.js looks just fine, but I guess the jquery.event.move.js also requires jquery?

Share

Improve this answer

edited Jan 13, 2017 at 15:02

answered Jan 13, 2017 at 14:57

Dmitri Sologoubenko's user avatar

Dmitri Sologoubenko

4805 silver badges14 bronze badges

3

I'm sure jquery.event.move.js does also require jquery. so are you saying to modify the jquery.twentytwenty.js file to have the 'define' as you posted?

M21
– M21

2017年01月22日 16:53:28 +00:00
Commented Jan 22, 2017 at 16:53
Yes, basically. Define ensures requirements are loaded before

Dmitri Sologoubenko
– Dmitri Sologoubenko

2017年01月23日 15:38:31 +00:00
Commented Jan 23, 2017 at 15:38
You can also use AMD features (many recent jquery libs and jquery itself do that)

Dmitri Sologoubenko
– Dmitri Sologoubenko

2017年01月23日 15:39:24 +00:00
Commented Jan 23, 2017 at 15:39

Add a comment |

Stack Exchange Network

Custom JS in Magento2 product page

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Custom JS in Magento2 product page

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions