2

I am trying to add elastislide, for that, I added this code in phtml file

<div class="brand_block">
 <ul id="carousel_<?php echo $chunk2->getId(); ?>" class="elastislide-list"> 
    <?php   
     print($_category->getData('brand_block'));?>
</ul>
<script type="text/javascript">
    require(['jquery','js/jquery.elastislide','js/modernizr.custom.17475'],
    function (jQuery) { 
         jQuery(document).ready(function(){
         jQuery('#carousel_<?php echo $chunk2->getId(); ?>').elastislide(); 
        });
    });

</script>

I've added modernizr.custom.17475.js and jquery.elastislide.js in /app/design/frontend/vendor_name/theme_name/web/js folder

I am getting these errors in console

Uncaught ReferenceError: jQuery is not defined at jquery.elastislide.js:820 (anonymous) @ jquery.elastislide.js:820 (index):296 Uncaught TypeError: jQuery(...).elastislide is not a function

  • try replacing jQuery with $ in your script code – Piyush Aug 6 '19 at 6:16
  • still getting same errors – Bhakti Thakkar Aug 6 '19 at 6:24
2

Your js/jquery.elastislide not recognizing jquery means you have not assigned shim that will create your js dependency to jquery in requirejs-config.js

Your code should look like in requirejs-config.js :

var config = {
    map: {
        '*': {
            'elastislide': 'js/jquery.elastislide'
        }
    },
    shim: {
        'js/jquery.elastislide': ['jquery']
    }
};

You javascript function should look like this.

<script>
require([
    "jquery",
    "elastislide",
    "js/modernizr.custom.17475",
    "domReady!"
], function($){
    $('#carousel_<?php echo $chunk2->getId(); ?>').elastislide();
});
</script>

If you running production mode make sure deploy static content and clear cache.

php bin/magento setup:static-content:deploy
php bin/magento cache:clean

If you are in development environment you can just clear cache and changes will update.

php bin/magento cache:clean

Note you should also assign js/modernizr.custom.17475 in requirejs-config.js if its depends on jquery.

| improve this answer | |
  • thank you but still getting same errors – Bhakti Thakkar Aug 6 '19 at 6:25
  • See i have updated answer – Aman Alam Aug 6 '19 at 6:25
  • Do I have to put requirejs-config.js in app/design/frontend/vendor/theme/web ? – Bhakti Thakkar Aug 6 '19 at 6:33
  • 1
    You can put requirejs-config.js in app/design/frontend/vendor/theme – Aman Alam Aug 6 '19 at 6:35
  • Thank you so much :) It worked – Bhakti Thakkar Aug 6 '19 at 6:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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