4

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?

Improve this question

2 Answers 2

Reset to default
5

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();
});
Improve this answer
3
  • Thanks for your reply, unfortunately didn't have no luck :(
    – lky
    Jun 13, 2017 at 10:37
  • @heady12 I've updated my answer after seeing your code.
    – Ben Crook
    Jun 13, 2017 at 11:41
  • Ben Sir I'm getting the same issue can you please look at my issue as well magento.stackexchange.com/questions/293270/…
    – Asad Khan
    Oct 21, 2019 at 10:04
1

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.

Improve this answer
2
  • When I used domReady and $(window).load in Checkout page, my custom script didn't execute..
    – Gediminas
    Jun 6, 2018 at 8:49
  • Can I see the full js script if you're still facing the issue?
    – Muhammad Saeed Khan
    Jul 27, 2018 at 2:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.