0

This is my requirejs-config.js in theme folder

var config = {
    deps: [
        "js/main",
    ],
    map: {
        '*': {
            'flexslider': 'js/jquery.flexslider-min',
            'typing': 'js/typed.min',
            'fancybox': 'js/jquery.fancybox'
        }
    },
    shim: {
        "flexslider": ["jquery"],
        "fancybox": ["jquery"],
        "typing": ["jquery"]
    }
};

And this is my main.js file in themfolder/web/js

define([
  "jquery",
  "flexslider",
  "typing",
  "fancybox"
], 
function($,flexslider) {
    "use strict";
    $('.normalslider').flexslider({
        animation: "slide",
        initDelay:200,
    }); 
    $('.carousel').flexslider({
        animation: "slide",
        animationLoop: false,
        initDelay:200,
        itemWidth: 150, 
        itemMargin: 5       
    });
    $(".lightbox").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '90%',
        height      : '90%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
    return;
});

However, sometimes the script is loaded correctly and sometimes I got this error message

ReferenceError: jQuery is not defined[Learn More]  jquery.fancybox.js:46:1    
TypeError: $(...).fancybox is not a function[Learn More]  main.js:128:2

Especially on the product catalogue page, it always give me that error message. My Magento is still in developer mode and all cache have been disabled.

If anyone know how to fix the issue, please help me. Thank you very much.

1 Answer 1

0

Use like that:

requirejs-config.js

var config = {
    deps: [
        "js/main",
    ],
    paths: {
        'flexslider': 'js/jquery.flexslider-min',
        'typing': 'js/typed.min',
        'fancybox': 'js/jquery.fancybox'
    },
    shim: {
        'flexslider': {
              deps: ['jquery'],
              exports: 'jQuery.fn.flexslider',
            },
        'fancybox': {
              deps: ['jquery'],
              exports: 'jQuery.fn.fancybox',
            },
        'typing': {
              deps: ['jquery'],
              exports: 'jQuery.fn.typing',
            }
    }
};

main.js

define([
  "jquery",
  "flexslider",
  "typing",
  "fancybox"
], 
function($) {
    $('.normalslider').flexslider({
        animation: "slide",
        initDelay:200,
    }); 
    $('.carousel').flexslider({
        animation: "slide",
        animationLoop: false,
        initDelay:200,
        itemWidth: 150, 
        itemMargin: 5       
    });
    $(".lightbox").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '90%',
        height      : '90%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
});

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.