/   /   /  Magento 2 Create quick custom product zoom (Cloud Zoom)

Note:

For more extensions and themes visit our store

Magento 2 Create quick custom product zoom (Cloud Zoom)


Magento 2 is coming with great zoom effect in product page view , in this tutorial we will try to  explain how you can customize the zoom behavior in product page , 

Ok , first you need create you own module in magento 2 (you can saerch 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 :

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

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

  1.  
  2. <?xml version="1.0"?>
  3. <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
  4.          <preference for="Magento\Catalog\Block\Product\View\Gallery" type="Ibnab\CloudZoomy\Block\Product\View\Gallery"/>
  5. </config>
  6.  
  7.  

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 :
  1.  
  2. protected $_template = 'Ibnab_CloudZoomy::product/view/gallery.phtml';
  3.  
  4.  

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

  1.  
  2. var config = {
  3.     map: {
  4.         '*': {
  5.           ibnabzoom:       'Ibnab_CloudZoomy/js/cloud-zoom.1.0.2'
  6.         }
  7.     }
  8. }
  9.  
  10.  

Yes for using in gallery,phtml :

  1.  
  2. <?php 
  3. $typeGallery = $this->getConfigValue('ibnab_cloud_config/general/enabledisable');
  4. $jsonGallery =  $block->getGalleryImagesJson();
  5. $arrayJsonGallery = json_decode($jsonGallery, true);
  6. ?>
  7. <div class="gallery-placeholder">
  8.         <?php 
  9.               if(isset($arrayJsonGallery[0]) && isset($arrayJsonGallery[0]['img']) && isset($arrayJsonGallery[0]['full'])):
  10.         ?>
  11.         <a href="<?php echo $arrayJsonGallery[0]['full']; ?>"  class = 'cloud-zoom' id='zoom1'rel=""  >
  12.             <img src="<?php echo $arrayJsonGallery[0]['img'];?>"  title="<?php echo $arrayJsonGallery[0]['caption']?>"  />
  13.         </a>                
  14. <div class="more-views">
  15.     <ul>
  16.     <?php $i=0 ?>
  17.    <?php foreach ($arrayJsonGallery as $_image): ?>
  18.         <li>
  19.          <a href='<?php echo $_image['full']; ?>' class='cloud-zoom-gallery' title='Thumbnail <?php echo $i=$i+1; ?>'
  20.          rel="useZoom: 'zoom1', smallImage: '<?php echo $_image['img']; ?>' ">
  21.         <img src="<?php echo $_image['thumb']; ?>" alt = "<?php echo $_image['caption'] ?>"/></a>
  22.         </li>
  23.     <?php endforeach; ?>
  24.     </ul>
  25. </div>                    
  26.         <?php 
  27.           endif;
  28.         ?>
  29. </div>
  30.         <script>
  31.             require([
  32.                 'jquery',
  33.                 'ibnabzoom',
  34.                 'mage/apply/main',
  35.                 'galleryList'
  36.             ], function ($, ibnabzoom, mage, gallery) {    
  37.             });
  38.             
  39.         </script>
  40.  
  41.  

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

You can explore our free extension Magento 2 Quick Cloud Zoom

Comments

Related Posts

make your store more efficient

Solving problems. With open source technology. Professional results. That’s what makes Ibnab your best choice

IBNAB is a company made of a group of professionals whose work is providing secure open source solutions. Our company strives for reaching magnificent results with each experience and provides professional open source solutions that cover every part of the business process.

Newsletter