0

I am trying to use boxslider in my custom module.

NOTE: I am in developer mode

UPDATE : In network, i saw that files are loaded as

1) require.js

2) requirejs-config.js ( at top my require codes are mentioned )

3) jquery.js

Is it the normal flow of Magento 2 or I am doing something wrong in my custom module that's why it's loaded first.

At /var/www/html/magento2/app/code/NameSpace/ReviewRating/view/frontend/requirejs-config.js

 var config = {

// main.min is used for custom js where I handle some other things so I need this js file as well.
        deps: [
            "NameSpace_ReviewRating/js/main.min"
        ],

          shim: {
            "boxslider": ["jquery"]

        },


         map: {
            '*': {
                'boxslider': 'NameSpace_ReviewRating/js/boxslider/jquery.bxslider'
            }
        }

    };

At /var/www/html/magento2/app/code/NameSpace/ReviewRating/view/frontend/templates/homeverticalwidget.phtml

<script>
{
require([
        'jquery',
         "boxslider"
        ], function () {
            'use strict';
            jQuery.noConflict();
                jQuery(function () {

                     jQuery('.bxslider').bxSlider({
                        mode: 'vertical',
                        captions: true,
                        slideWidth: 600,
                        minSlides: 3,
                        maxSlides: 3,
                        moveSlides: 2,
                        slideWidth: 200

                     });        


        });

    });

}   
</script>

Isuues : IN console
1) Uncaught ReferenceError: jQuery is not defined ( in console this points to slider core js file )

I am not able to figure it out where I am wrong.

0

You are missing require function arguments which will be returning be require.js for each js you are calling. So your script should be like this:

require([ 'jquery', "boxslider" ], function (jQuery) {
 //...your code here now you can access jQuery
});

As you already have shim for jQuery for your boxslider so you don't need to specify function argument for boxslider after jQuery, that's why I have only passed jQuery as function argument.

  • i tired by updating in ` homeverticalwidget.phtml` still same issue in console – inrsaurabh Jan 30 '18 at 8:16
  • i am passing boxslider already to require i think – inrsaurabh Jan 30 '18 at 8:22
0

Try this Now

app/code/NameSpace/ReviewRating/view/frontend/templates/homeverticalwidget.phtml

<script type="text/javascript">
require(['jquery','bxsliderjs'],function($,bxSlider){
    jQuery(function () {
        jQuery('.bxslider').bxSlider({
            mode: 'vertical',
            captions: true,
            slideWidth: 600,
            minSlides: 3,
            maxSlides: 3,
            moveSlides: 2,
            slideWidth: 200
        });
    });
});
</script>
0

Try below code :

requirejs-config.js

var config = {
    "map": {
        "*": {
            "boxslider": "'NameSpace_ReviewRating/js/boxslider/jquery.bxslider'"
        }
    }
}; 

homeverticalwidget.phtml

<script type="text/javascript">

    //function for load owlcarousel slider
    require([ 'jquery', 'boxslider'], function(jQuery){

        jQuery('.bxslider').bxSlider({
                        mode: 'vertical',
                        captions: true,
                        slideWidth: 600,
                        minSlides: 3,
                        maxSlides: 3,
                        moveSlides: 2
        }); 


     });

</script>

Remove pub/static directory and run php bin/magento setup:static-content:deploy command

Also clear cache by running php bin/magento cache:clean and php bin/magento cache:flush command.

UPDATE :

Open your bxslider.js file and put below code at the beginning of the js.

define([
    'jquery'
], function () {

**your bx slider js code here**

});
  • Sir , i tried your suggestion as well and i am in developer mode , still deployed but no success – inrsaurabh Jan 30 '18 at 8:26
  • @SaurabhRanjan okay got your problem - I have updated my answer please check just update your bxslider.js file and check it works – Manthan Dave Jan 30 '18 at 8:35
  • sir i updated my question can you please see whats the issue – inrsaurabh Jan 30 '18 at 8:41
  • @SaurabhRanjan - its work fine here at my end with the code i have posted , so try with that and let me know if its works or not – Manthan Dave Jan 30 '18 at 10:25

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.