1

I Need to display product image gallery to my custom .phtml file so I can display it anywhere. I tried to get block using below code

$block = $objectManager->create('\Magento\Catalog\Block\Product\View\Gallery');

But then some jquery error comes. like "setoptions" not defined.

Please give me a perfect solution for this.

6

Please check with below url -

first you need create you own module in magento 2 (you can search in google) , in ibnab we created extension with name Ibnab_CloudZoomy , Magento 2 system use the Block Magento\Catalog\Block\Product\View\Gallery inside Magento_Catalog Module , and if you go to vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml you can find the related template of this block :

<container name="product.info.media" htmlTag="div" htmlClass="product media" after="product.info.main">
            <block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="product/view/gallery.phtml"/>
        </container>

Yes we rewrite this block and push our custom template , the easy technique is to use (app/code/Ibnab/CloudZoomy/etc/frontend/di.xml) :

Yeah now we can create our own block class and push own template , you can copy past Magento\Catalog\Block\Product\View\Gallery inside Ibnab\CloudZoomy\Block\Product\View\Gallery and add attribute :

protected $_template = 'Ibnab_CloudZoomy::product/view/gallery.phtml';

Now the block system is rewrited and related to our template , we can customise function of block or content of template , of create template inside :

app/code/Ibnab/CloudZoomy/view/frontend/templates/product/view/gallery.phtml

you can get content of this template from original template in vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml . I cloud zoom extesnion we use the file cloud-zoom.1.0.2.js we added to path app/code/Ibnab/CloudZoomy/view/frontend/web/js/cloud-zoom.1.0.2.js and we pushed inside requirejs-config.js in path app/code/Ibnab/CloudZoomy/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
          ibnabzoom:       'Ibnab_CloudZoomy/js/cloud-zoom.1.0.2'
        }
    }
}

Yes for using in gallery.phtml :

<?php 
$typeGallery = $this->getConfigValue('ibnab_cloud_config/general/enabledisable');
$jsonGallery =  $block->getGalleryImagesJson();
$arrayJsonGallery = json_decode($jsonGallery, true);
?>
<div class="gallery-placeholder">
        <?php 
              if(isset($arrayJsonGallery[0]) && isset($arrayJsonGallery[0]['img']) && isset($arrayJsonGallery[0]['full'])):
        ?>
        <a href="<?php echo $arrayJsonGallery[0]['full']; ?>"  class = 'cloud-zoom' id='zoom1'rel=""  >
            <img src="<?php echo $arrayJsonGallery[0]['img'];?>"  title="<?php echo $arrayJsonGallery[0]['caption']?>"  />
        </a>                
<div class="more-views">
    <ul>
    <?php $i=0 ?>
   <?php foreach ($arrayJsonGallery as $_image): ?>
        <li>
         <a href='<?php echo $_image['full']; ?>' class='cloud-zoom-gallery' title='Thumbnail <?php echo $i=$i+1; ?>'
         rel="useZoom: 'zoom1', smallImage: '<?php echo $_image['img']; ?>' ">
        <img src="<?php echo $_image['thumb']; ?>" alt = "<?php echo $_image['caption'] ?>"/></a>
        </li>
    <?php endforeach; ?>
    </ul>
</div>                    
        <?php 
          endif;
        ?>
</div>
        <script>
            require([
                'jquery',
                'ibnabzoom',
                'mage/apply/main',
                'galleryList'
            ], function ($, ibnabzoom, mage, gallery) {    
            });

        </script>

you can add configuration or anything you want to more customise your image zoom inside product page view .

https://www.ibnab.com/en/blog/magento-2/magento-2-create-quick-custom-product-zoom-cloud-zoom

i hope its very helpful to you.

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.