How to use 2 third party jquery plugins in one custom module Magento 2

Question

Slick for slider. Fancybox for Custom HTml forms ( SignIn,signUp ...)

In /var/www/html/magento2/app/code/Custommodule/ReviewRating/view/frontend/requirejs-config.js var config = {

deps: [
    "Custommodule_ReviewRating/js/main",
],


 map: {
    '*': {
        'slickjs': 'Custommodule_ReviewRating/js/slick/slick',
        'fancyboxhb': 'Custommodule_ReviewRating/js/fancybox/fancybox'

    }
},

shim: {
    "slickjs": ["jquery"],
    "fancyboxhb": ["jquery"]
}

};

IN /var/www/html/magento2/app/code/Custommodule/ReviewRating/view/frontend/templates/homehorizontalwidget.phtml

// I want to show popup form when user clicks on below link.

........
<a class="modalbox" href="#inline">click to open</a></p> 
...........

UPDATE I created below main.js and moved all js to this file

IN /var/www/html/magento2/app/code/Custommodule/ReviewRating/view/frontend/web/js/main.js

define([
  "jquery",
  "slickjs",
  "fancyboxhb"
], 
function($) {
  "use strict";

    $(document).ready(function(){
        console.log("DID IT! jQuery log complete.");
    // $(".modalbox").fancybox(); // to trigger pop up currently it's not worling

    jQuery('.horizontal-center-home').slick({
                          vertical: false,
                          verticalSwiping: false,
                  dots: false,
                  infinite: true,
                  speed: 300,
                  slidesToShow: 3,
                  slidesToScroll: 1,
                  mobileFirst:true,

                   responsive: [
                        {
                          breakpoint: 1024,
                          settings: {
                            slidesToShow: 4,
                            slidesToScroll: 4,
                            infinite: true,
                            dots: true
                          }
                        },
                        {
                          breakpoint: 600,
                          settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                          }
                        },
                        {
                          breakpoint: 480,
                          settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                          }
                        }
                  ]
            });


    });

  jQuery('.vertical-homePage').slick({
                  vertical: true,
                  verticalSwiping: false,
                  dots: false,
                  infinite: true,
                  speed: 300,
                  slidesToShow: 3,
                  slidesToScroll: 1,
                  mobileFirst:true,

                   responsive: [
                        {
                          breakpoint: 1024,
                          settings: {
                            slidesToShow: 4,
                            slidesToScroll: 4,
                            infinite: true,
                            dots: true
                          }
                        },
                        {
                          breakpoint: 600,
                          settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                          }
                        },
                        {
                          breakpoint: 480,
                          settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                          }
                        }
                  ]
            });


    });

    return;
});

IN console i have error after using fancybox in requirejs-config.js

fancybox.js:1463 Uncaught ReferenceError: jQuery is not defined at fancybox.js:1463

Answer 1

You will need to pass jQuery instance as parameter when using requirejs. Also you can require them both at once.

require([
        'jquery',
        'slickjs',
        'fancyboxhb'
        ], function (jQuery) {
...