1

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

0

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) {
...

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.