Adding Custom JS to Magento 2 Theme

Question 1

Im following the answer provide by Andrea on How To add JS file in frontend for all pages

However I am recieving the follow error and unsure how to resolve?

require.js:1895 GET http://domain.dev/products/pub/static/version1497347169/frontend/aa/aa-theme/en_US/js/main.js

require.js:166 Uncaught Error: Script error for: js/main http://requirejs.org/docs/errors.html#scripterror at makeError (require.js:166) at HTMLScriptElement.onScriptError (require.js:1681)

Could anyone please help with getting a custom script added?

Update:

I've tried to include libraries into my require_config.js like:

var config = {
paths: { 
 'accessible-menu': "Magento_Theme/js/accessible-menu/accessible-menu",
 'slick': "Magento_Theme/js/slick/slick.min"
 }, 
shim: {
 'slick': {
 deps: ['jquery']
 },
 'accessible-menu': {
 deps: ['jquery']
 }
}
};

And have added my main scripts file into my default.xml like:

<referenceContainer name="before.body.end">
 <block class="Magento\Framework\View\Element\Text" name="scripts.min.js">
 <arguments>
 <argument name="text" xsi:type="string"><![CDATA[<script type="text/javascript" src="http://domain.dev/app/design/frontend/aa/aa-theme/Magento_Theme/web/js/scripts.min.js"></script>]]></argument>
 </arguments>
 </block>
 </referenceContainer>

Just doesn't seem to be loading the libraries but my scripts.min.js is included?

Question 2

Have you done the following?

Clear Magento cache
Clear browser cache
Delete the following directory
- var/pre_processed
- pub/static/frontend
- pub/static/_requirejs
Reload the page

The majority of the time I see errors like this it's because of caching and/or symlinks.

Update

Thanks for including your code, I think this is happening because you are adding JS via XML. This is no longer the best way to add JS in Magento, you should take a look at Require JS.

The require_config.js does not load JS file, all you've done there is add aliases and dependencies for your scripts.

To load an actual script you need to use either x-magento-init or data-mage-init. Read here for the full info.

I think you need to do something along these lines:

In your PHTML template:

Replace * with your element ID/Class.

<script type="text/x-magento-init">
{
 "*": {
 "slick": {}
 }
}
</script>

Initialise Slick Initialise Slick in here.

define(['jquery', 'slick', 'domReady!'], function(,ドル slick) {
 'use strict';
 $('.your-element').slick();
});

Question 3

Thanks for your reply, unfortunately didn't have no luck :(

Question 4

@heady12 I've updated my answer after seeing your code.

Question 5

Ben Sir I'm getting the same issue can you please look at my issue as well magento.stackexchange.com/questions/293270/…

Question 6

This is how I add dotdotdot library in my magento2 custom theme.

1. Download and add Js Library in your theme following the path:

// app/design/frontend/Namespace/themename/web/js/jquery.dotdotdot.min.js

2. Create a theme's requirejs file as follow and let the requirejs know newly added library.

// app/design/frontend/Namespace/themename/requirejs-config.js
var config = {
 map: {
 '*': {
 dotdotdot: 'js/jquery.dotdotdot.min',
 }
 }
};

3. Use the added library in your theme's main js file as follow:

// app/design/frontend/Namespace/themename/web/js/main.js
require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
 $(window).load(function() {
 //custom js code
 /* $(".product-item-name").each(function(){
 $(this).dotdotdot(); 
 }); */
 });
});

4. and include your theme's js file in your site's head as follow:

// app/design/frontend/Namespace/themename/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <head>
 <link src="js/main.js"/> 
 </head>
</page>

You can add any external JS library and custom file on every page in magento2.

Question 7

When I used domReady and $(window).load in Checkout page, my custom script didn't execute..

Question 8

Can I see the full js script if you're still facing the issue?

Ben Crook Ben Crook 15.8k4 gold badges53 silver badges105 bronze badges · Accepted Answer · 2017-06-13 10:05:42Z

Have you done the following?

Clear Magento cache
Clear browser cache
Delete the following directory
- var/pre_processed
- pub/static/frontend
- pub/static/_requirejs
Reload the page

The majority of the time I see errors like this it's because of caching and/or symlinks.

Update

Thanks for including your code, I think this is happening because you are adding JS via XML. This is no longer the best way to add JS in Magento, you should take a look at Require JS.

The require_config.js does not load JS file, all you've done there is add aliases and dependencies for your scripts.

To load an actual script you need to use either x-magento-init or data-mage-init. Read here for the full info.

I think you need to do something along these lines:

In your PHTML template:

Replace * with your element ID/Class.

<script type="text/x-magento-init">
{
 "*": {
 "slick": {}
 }
}
</script>

Initialise Slick Initialise Slick in here.

define(['jquery', 'slick', 'domReady!'], function(,ドル slick) {
 'use strict';
 $('.your-element').slick();
});

Ben Sir I'm getting the same issue can you please look at my issue as well magento.stackexchange.com/questions/293270/…

Stack Exchange Network

Adding Custom JS to Magento 2 Theme

2 Answers 2

Update

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

Adding Custom JS to Magento 2 Theme

2 Answers 2

Update

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related

Hot Network Questions