current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 3 down vote favorite
3

I have created banner slider module for magento 2. I have called JS file using following ways and its working fine. In block class I created following function

public function getBaseJs($fileName){

        return $this->_storeManager->getStore()->getBaseUrl(
                \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
            ).'bannerslider/js/'.$fileName;
    }

and this function is called in bannerslider.phtml file as following manner.

<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery-1.7.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery.flexslider.js') ?>"></script>

But, according to jQuery dependency mechanism of require.js How I can do it ?

share|improve this question
up vote 14 down vote accepted

Finally, I got the solution for my query. I would like to share it in details as below.

enter image description here

Step 1: Add your module js file under <Vendor>/<Module_Name>/view/<area>https://waybackassets.bk21.net/js/

e.g. <Vendor>/<Module_Name>/view/<area>https://waybackassets.bk21.net/js/flexslider.js

Step 2: Create requirejs-config.js file under <Vendor>/<Module_Name>/view/<area>/

e.g. <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

Add following code to requirejs-config.js

var config = {
    map: {
        '*': {
            bannerslider: 'VendorName_ModuleName/js/flexslider'
        }
    }
};

Note: you may set your object name as per your choice. In my case I have set as bannerslider and do not add the .js extension to file name in VendorName_ModuleName/js/flexslider

Step 3: Call the function of your module js in .phtml file as following manner.

<script type="text/javascript">
    require(['jquery','bannerslider'],function($){
        $(window).load(function() {
            $('.flexslider-8').flexslider({
                animation: "fade",
                controlNav: "thumbnails",
                slideshowSpeed: 2000,
                minItems: 2,
                maxItems: 4
            });
        });

    });
</script>

Its working fine for me.

Trace : Use Net tab to see requested URL of js file loaded or not.

enter image description here

share|improve this answer
1  
better to use 'domReady!' plugin instead of $(window).load(), for example require(['jquery','bannerslider', 'domReady!],function($) { ...code execute only after dom load}) – KAndy Oct 9 '15 at 14:54
    
Yes, it will very useful. – Praful Rajput Oct 10 '15 at 14:08
    
@KAndy it depends, if you want the script to execute last, isn't it better to use $(window) ? doesn't that makes the script to run not only when DOM is read, but when all scripts are executed ? – Lachezar Raychev Feb 23 at 10:12
    
And that way is not working for me ... says static/adminhtml/Magento/backend/en_US/gift.js 404 (Not Found) I have cleared the cache and the pub/static... bot nope.. not working – Lachezar Raychev Feb 23 at 10:42
    
scratch that, it is working... domReady! not working though... how can i tell a script to run after all other scripts have been loaded, or that is not existent in current magent2 methodology ? – Lachezar Raychev Feb 23 at 13:22
up vote 4 down vote

My way is:

Step 1

Include an extension's base javascript file using layout instructions. It is described here: https://mage2.pro/t/34

Step 2

Require the extension's other javascript files from the base file with RequireJS:

require(
    [
      'jquery', 
      '{VendorName}_{ModuleName}{path_to_js_file/relative_to/view/web/no_js_at_end}'
     // ex. Magento/Ui/view/base/web/js/grid/sticky/sticky.js
     // became Magento_Ui/js/grid/sticky/stick
    ], 
    function($, someOtherLibrary) {
        // custom code here...
    );
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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