Magento 2: How to Trigger self.openFullScreen() in Custom jQuery on Product Details Page

jquerymagento2product-viewrequirejs

If we click on product image in the product details page, gallery full screen is coming to see the images in full screen.

I am trying to get the same functionality when click on my string Quick view in product details page added as an extension.

I have done so far:

I have added the below code in my template.

<span id="see_thumbnails" >Quick view</span>                      

<script type="text/javascript">
    require([
    'jquery',
    'mage/gallery/gallery'
], function ($, gallery) {
    'use strict';
        $("#see_thumbnails").on("click" ,function() {

            gallery.openFullScreen();

        });

    });
</script>

I am using openFullScreen because i found openFullScreen related code at vendor\magento\magento2-base\lib\web\mage\gallery\gallery.js

Can any one tell me where i am doing wrong.

Help would be appreciated.

Best Answer

After spending some time, i found the answer as mentioned below, hope this will help for someone.

    <script type="text/javascript">
        require([
        'jquery',
        'fotorama/fotorama'
    ], function ($, fotorama) {
        'use strict';
        
    
            $("#see_thumbnails").on("click" ,function() {       
    
                 var fotorama = $('.fotorama').fotorama({allowfullscreen: true}).data('fotorama');
                 fotorama.requestFullScreen();
                 var $fotoramaDiv = $('.fotorama').fotorama();
                 $fotoramaDiv.data('fotorama').show(0);
                 
            });
});

Links

Use custom JS in M2 - Dev Docs

Calling and initialising JS in M2 - Dev Docs

How to use Knockout JS in Magento 2 - Magento Stack Exchange

Reference the JS

The first step is to reference your JS file inside the PHTML template:

<script type="text/x-magento-init">
{
    // components initialized on the element defined by selector
    "<element_selector>": {
        "<js_component1>": ...,
        "<js_component2>": ...
    },
    // components initialized without binding to an element
    "*": {
        "<js_component3>": ...
    }
}
</script>

For example if you wanted to load vendor/magento/module-catalog/view/frontend/web/product/view/validation.js when the dom element #test has loaded you would write:

<script type="text/x-magento-init">
    {
        "#test": {
            "Magento_Catalog/product/view/validation": {
                options-can-be-passed-here
            }
        }
    }
</script>

If you don't care about making sure the node has been rendered then you can use * which will load the JS regardless of any DOM elements.

Add your JS

In your JS file you will need to use the following structure:

define ([
    'jquery',
    'other/dependencies/can/go/here',
    `domReady!` // If you require your script to run after page load
], function ($, anotherFunction, domReady) {
    // Your code here
});

Loading the new file

To load the file on the frontend you'll need to clear pub/static/frontend, pub/static/_requirejs, and var/view_preprocessed. Also clear your browser cache.

Notes

I would highly recommend choosing this method over adding JS inside a template, I'm a big fan of separating the content and logic.

Best Answer

Related Solutions

Magento – Uncaught TypeError: $(…).jqzoom is not a function

Magento – how to call custom jquery function on custom phtml in magento 2

Links

Reference the JS

Add your JS

Loading the new file

Notes

Related Topic