1

I tried to include a Jquery lightbox script (Ekko Lightbox) in one of my Magento 2 CMS pages. But when I click on the trigger links to display a video, nothing seems to happen in the browser, but looking at the console, I see the following error: "No template was found by selector: null".

As far as I can tell, the appropriate JQuery and lightbox scripting is being loaded correctly so I think the problem is with how I'm calling the script in the CMS page:

<script>
require(["jquery","ekkolightbox","domReady!"], (function($){
    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
        event.preventDefault();
        $(this).ekkoLightbox();
    });
}));
</script>

...and then, in the content of the page, the script is called with this kind of markup:

<a class="btn btn-sm btn-outline-secondary stretched-link" href="xxxx" target="_blank" data-toggle="lightbox">View</a>

UPDATE: It was suggested that the lightbox scripts need to be added to the requirejs-config file, which I did. But I'm not sure that it's added correctly. Here's the contents of the requirejs-config file:

var config = {
    paths: {
            'bootstrap':'Magento_Theme/js/bootstrap.bundle',
            'ekkolightbox':'Magento_Theme/js/ekko-lightbox',
    } ,
     map: {
        '*': {
            'ekkolightbox': 'js/ekko-lightbox'
        }
    },
    shim: {
        'bootstrap': {
            'deps': ['jquery']
        },
        'ekkolightbox': {
            'deps': ['bootstrap']
        }
    }
};

I don't understand this error or what I might do to fix it. What is going on here and how can I troubleshoot?

Improve this question

2 Answers 2

Reset to default
1

I think you have to either map the lightbox js file in requirejs-config file or put full relative path to the js file without the extension and relative to theme/web folder

Improve this answer
8
  • Thanks, @Deggial I have it in the requires-config file... perhaps not correctly, but it's in there. I've edited the original question to include this information.
    – gnicko
    Jul 15, 2019 at 21:05
  • I think you just need the map part in the requirejs-config .... take a look here magento.stackexchange.com/questions/148985/…
    – Deggial
    Jul 16, 2019 at 15:42
  • or you can put Magento_Theme/js/ekko-lightbox in place of ekkolightbox in the original code where it is required and not mess with requirejs-config at all
    – Deggial
    Jul 16, 2019 at 15:45
  • I think last error is that your lightbox js depends on bootstrap and is loaded before bootstrap so you might want to add bootstrap into require call in between jquery and lightbox
    – Deggial
    Jul 16, 2019 at 18:11
  • OK... I seem to have fixed the problems by implementing the second suggestion and using just the "map" part of the first suggestion... I added "bootstrap" to the required call... now I see "TypeError: $.fn.modal.Constructor is undefined"...
    – gnicko
    Jul 16, 2019 at 18:21
1

Big thanks to @Deggial for assistance. I ended up switching gears and using FancyBox instead of Ekko Lightbox. I will have to do some additional work with Ekko to see what might be going on, but I don't have the luxury of taking the time to do so now.

Steps to get the lightbox working in Magento 2.3:

First, I downloaded the FancyBox distribution package from here: FancyBox Home Page

Then unpacked the files and uploaded them to the appropriate directories as follows:

  • Javascript files to /app/design/frontend/[Vendor]/[Theme]/web/js
  • CSS files to /app/design/frontend/[Vendor]/[Theme]/web/css

Then, I edited "/app/design/frontend/[Vendor]/[Theme]/requirejs-config.js" (if this file does not exist, it must be created) as such:

    var config = {
    paths: {
        'someotherjs':'js/some-other-js-file',
        'fancybox': 'js/jquery.fancybox'
    } ,
    shim: {
        'someotherjs': {'deps': ['jquery']},
        'fancybox': {'deps': ['jquery']}
    }
};

One problem I was having was all the tutorials/explanations I could find assumed that you only needed to load up one JS file and didn't really detail how to use the same requirejs-config file to load more than one. This approach, adding to the arrays, works for me.

Next, I edited the /app/design/frontend/[Vendor]/[Theme]/layout/default_head_blocks.xml file to load the CSS by default in the header of each page. 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>

        <!--Third-Party css and Theme Overrides, etc.-->
        <css src="css/irrelevant.css"/>
        <css src="css/for-context-only.css"/>
  ----> <css src="css/jquery.fancybox.css"/>
        <css src="css/not-important.css"/>

NOTE: This is kind of an inelegant move as it loads the CSS "site-wide" and isn't really the most efficient way to do it, but I have reasons for doing it this way for the time being... I'll fix it up and edit this when I get the chance.

Then, finally, in the CMS pages where I need a media light box, I use this HTML markup:

In the HTML elements that I want to open with the lightbox functionality, I include this bit, data-fancybox in an -tag as so: <a href="..." data-fancybox>...</a>

At the bottom of the CMS Page/Block, I insert this bit of javascript:

<script>
require(['jquery','fancybox'],function($) {
    $(window).load(function () {
        // alert('load from external jquery'); 
    });
});
</script>

(There are much more comprehensive instructions and so forth available on the FancyBox website.)

I'm thinking that I might be able to include this last bit of JS and the call to the CSS file in a single Magento Block and then just embed the block in CMS pages/blocks where I need the functionality, but I haven't tested it yet.

Improve this answer
1
  • Glad I could help :) FancyBox is so much nicer than anything really :)
    – Deggial
    Jul 19, 2019 at 4:14

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.