Categories
CMS Magento Mastering Development

Update Magento2 Catalog Images on Swatch Selected

Basically i written my own gallery page so when ever a configurable product with color swatches is available , it is not showing different color images when user selects that particular swatch.

    <?php
/**
 * 
 * 
 */

/**
 * Product media data template
 *
 * @var $block 
 */
$gallery_images = json_decode($block->getGalleryImagesJson());
$_product = $block->getProduct();
$videoFile=$_product->getData('agreement_file');
$videoThumb=$_product->getData('product_video_thumbnail');


    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $storeManager = $objectManager->get('\Magento\Store\Model\StoreManagerInterface');
    $baseUrl=$storeManager->getStore()->getBaseUrl();

$parseVideoUrl=$baseUrl.'pub/media/catalog/product/file/'.$videoFile;
$thumbnailUrl=$baseUrl.'pub/media/catalog/product/thumb_file/'.$videoThumb;


?>

<div id="mgallery_images" class="row">
    <?php foreach($gallery_images as $gallery_image): ?>
    <div class="col-sm-6">
        <div class="product-image-grid">
            <a href="<?php echo $gallery_image->full; ?>" class="m-products-gallery" data-fancybox="images" data-width="2048" data-height="1365">
    <img src="<?php echo $gallery_image->img; ?>" />
 </a>
        </div>
    </div>
    <?php endforeach; ?>
</div>

<div class="easyzoom easyzoom--overlay easyzoom--with-thumbnails">
     <?php foreach($gallery_images as $gallery_image): 

         if($gallery_image->isMain=='1'){ ?>
               <div class="main_image"><a href="<?php echo $gallery_image->full; ?>">
                    <img src="<?php echo $gallery_image->full; ?>"  id="zoom_05" data-zoom-image='<?php echo $gallery_image->full; ?>' alt="product-details" /></a>

                </div>
              <div id="video_product" class="embed-responsive embed-responsive-16by9" style="display: none;">

                           <!-- <iframe class="embed-responsive-item" src="" id="video_final" wmode="transparent" frameborder="0" allowfullscreen="0" ></iframe> -->
                 <!--  <video class="embed-responsive-item" controls>
                      <source src="<?php echo $parseVideoUrl; ?>" id="video_final" type="video/mp4">
                     Your browser does not support the video tag.
                  </video>  -->

                  <video
    id="video_final"
    class="video-js embed-responsive-item"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="<?php echo $thumbnailUrl; ?>"
    data-setup="{}"
  >
    <source src="<?php echo $parseVideoUrl; ?>" type="video/mp4" />
    
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
    </p>
  </video>


                       </div>
            <?php  }  

              endforeach; 

              if (!$_product->getIsSalable()): ?>
                     <div class="out-of-stock-wrapper ptop pleft"><span>Sold Out</span></div>
              <?php endif; ?>
</div>
      
<ul class="thumbnails" id="gallery_01">
    <?php 
     foreach($gallery_images as $gallery_image): ?>
        <li>  
          <?php 
              if($gallery_image->mediaType=='external-video'){ ?>
                <a href="<?php echo $gallery_image->videoUrl.'?controls=0&showinfo=0'; ?>" id="<?php echo $gallery_image->mediaType; ?>" class="elevatezoom-gallery" data-update="" data-image="<?php echo $gallery_image->full; ?>" data-zoom-image="<?php echo $gallery_image->full; ?>"><img src="<?php echo $gallery_image->thumb; ?>" /></a>
          <?php } else { ?>           
                  <a href="#" id="<?php echo $gallery_image->mediaType; ?>" class="elevatezoom-gallery active" data-update="" data-image="<?php echo $gallery_image->full; ?>"  data-zoom-image="<?php echo $gallery_image->full; ?>"><img src="<?php echo $gallery_image->thumb; ?>" /></a>      
          <?php  }  ?>
        </li>
    <?php endforeach; ?>
    <?php if($videoFile){?>

      <li> 
 
         <a href="<?php echo $parseVideoUrl; ?>" id="external-video" class="elevatezoom-gallery" data-update="" data-image="<?php echo $thumbnailUrl; ?>" data-zoom-image="<?php echo $thumbnailUrl; ?>"><img src="<?php echo $thumbnailUrl; ?>" /></a>
        </li>

   <?php  } ?>
</ul>
</div>
<script type="text/javascript">
require(['jquery', 'fancybox','easyzoom','ezpluszoom'], function($){

/* $('[data-fancybox="images"]').fancybox({
    afterLoad : function(instance, current) {
        var pixelRatio = window.devicePixelRatio || 1;

        if ( pixelRatio > 1.5 ) {
            current.width  = current.width  / pixelRatio;
            current.height = current.height / pixelRatio;
        }
    }
});*/

$(document).ready(function(){
  
   if($(window).innerWidth() >= 768) {
              $(".easyzoom--with-thumbnails").hide();
              $(".thumbnails").hide();
              $("#mgallery_images").show();
                
            } else {
              
               $("#mgallery_images").hide();
               $(".easyzoom--with-thumbnails").show();
               $(".thumbnails").show();
            }

  });

$(window).resize(function(){
          
            if($(window).innerWidth() >= 768) {
              $(".easyzoom--with-thumbnails").hide();
              $(".mgallery_images").show();
                
            } else {
               $(".mgallery_images").hide();
               $(".easyzoom--with-thumbnails").show();
            }
        });

 $('[data-fancybox]').fancybox({
  protect: true,
  fitToView:false
});

 $("[data-fancybox]").fancybox({
 thumbs : {
        autoStart : true,
    },
  hash            : false,
  loop            : true,
  keyboard        : true,
  toolbar         : true,
  animationEffect : false,
  arrows          : true,
  clickContent    : true
});</script>

Here i am showing 4 image grid for desktop view and vertical thumbnails on mobile devices…I got problem with configurable swatches. How can i make it work with swatch options as well? please help me on this.

Leave a Reply

Your email address will not be published. Required fields are marked *