Magento 2 FancyBox Implementation for youtube videos

magento.stackexchange https://magento.stackexchange.com/questions/210280

Question

Am implementing fancybox in magento 2, which has been implemented in magento 1 but in M2.2x shows a require js implementation and I have done that so but still the issue persist.

NOTE : The issue after implementing external i.e., fancybox js there is error in console stating that require jquery. Blockquote

Guide me to implement fancybox for youtube videos

Was it helpful?

Solution 2

I have implement fancybox feature by the below way,

Try this,

First Step : Add the source files which is required for fancybox implementation.

  1. Add jquery.fancybox.js to the below path

app/design/frontend/{PackageName}/{ThemeName}/web/js/jquery.fancybox.js

  1. Add jquery.fancybox.css to the below path

app/design/frontend/{PackageName}/{ThemeName}/web/css/jquery.fancybox.css

Second Step : Implementation of fancybox feature in to your store

  1. Add requirejs-config.js to the below path.

app/design/frontend/{PackageName}/{ThemeName}/requirejs-config.js

and add the below code in it

var config = {
paths: {
    'fancybox': 'js/jquery.fancybox'
},
shim: {
    'fancybox': {
        deps: ['jquery']
    },
}
};
  1. Final step is to trigger the js wherever you want in my case, I would need it in all the pages so I triggered it in header.phtml inside the theme.

Script to trigger the external js

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

then you can play youtube video in fancybox popup by adding data-fancybox element to your tag.

Eg : 

<a class="btn btn-default2" href="https://youtu.be/7mHaxFcY4QY" data-fancybox>PLAY</a>

Hope it helps anyone, who's trying to add external js to their store. It would be any external script it may owl carousel or box slider js extension etc..,

Peace :)

OTHER TIPS

It's not possible to say what issue you are having, as you don't explain your implementation or the error you are getting. But i'll walk through a way to set this up (there are many ways to do this, other might add other solutions).

This method will use a theme to get the needed files in place, so make sure you have a theme set up and it's set in the admin (see more about that here)

In the admin, create a cms page (content->pages). You can call it anything you like, for this i'll be calling mine fancy-box. Inside this page place in the code for the content you want to display and the script that will call the fancy box js onto the page (you will be using different content here, i'm just grabbing an image to testing):

<a href="{{media url="wysiwyg/e5e9271c7b7ac02abc6c6de59c8d85e3.png"}}" data-fancybox data-caption="My caption">
<img class="" src="{{media url="wysiwyg/e5e9271c7b7ac02abc6c6de59c8d85e3.png"}}" alt="" />
</a>

<script type="text/x-magento-init">
    {
        "*": {
            "js/jquery.fancybox": {
            }
        }
    }
</script>

I'm not going to get too deep into what the script is doing (click here is get a really good explanation but just know that this script is going to call in the jquery.fancybox.js file.

Speaking of that JS file, we need to put that and the CSS file to our project. After downloading the fancy box content, place the CSS file here:

app/design/frontend/{namespace}/{theme}/web/css/jquery.fancybox.css

There are a few different ways to get CSS on a page, but here we are just going to call it with the XML file that can set CSS in the head of the whole site.

app/design/frontend/{namespace}/{theme}/Magento_Theme/layout/default_head_blocks.xml

Inside this file, call the CSS file with this code:

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

Your JS file is going to be called by the cms page, but we need to place it in the right spot and we need to declare it to Require JS. Place your JS file here:

app/design/frontend/{namespace}/{theme}/web/js/jquery.fancybox.js

And for your Require JS:

app/design/frontend/{namespace}/{theme}/requirejs-config.js

Require is very picky about it's definitions, so make sure it's correct to your file structure and naming, for us that means this:

var config = {
    map: {
        '*': {
            fancybox: 'js/jquery.fancybox'
        }
    }
};

This will set fancybox in the global namespace for us to use.

Just to recap, this is what your theme files should look like:

your theme file structure

At this point you should be able to clear your cache and hit the url of the page you set up in the cms pages (for me it's http://127.0.0.1:8888/magento_222/fancy-box since i'm using mamp). If you need to double check anything, make sure that the files are all being loaded in your network tab by searching for fancy. You should see your JS and CSS files there:

your network tab

If anything here still isn't working for you, add onto your question and i'll see what might be the issue for you.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top