0

I have a code to load all the gallery images of a product in category, it will work but the problem is that will load ALL gallery images for products in the category (list.phtml) so will increase server load.

<?php $_images = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages(); ?>
<?php if($_images){?>
    <?php $getimagegalleryresize=0; foreach($_images as $_image){ $getimagegalleryresize++; if($getimagegalleryresize>=2 && $getimagegalleryresize<=5): ?>

           <a class="link" href="<?php echo $_product->getProductUrl(); ?>">  <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->adaptiveResize(275,394); ?>" data-src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->adaptiveResize(275,394); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php $this->htmlEscape($_image->getLabel());?>" /><?php  endif; } ?> </a>
    <?php } ?>

I have this code on hover-div so together with jquery-cycle plugin will loop the gallery images from 0-5. The problem is that all images will be loaded on page so if i have 30 products multiple by 5 images each the server will need to load 150 images to prepare them for execute on hover.

What i need is that the category will load 30 products normally with main image and only when user hovers and keep mouseon at the product main_image it will start loading the rest of gallery images. Should i do this through Jquery.load or Ajax and if so , i cannot understand what the load-page.php should include. Anyone can help on this?i am trying so hard but i am not so good in PHP,Ajax and i want to learn.

EDIT:Based on Pankaj and other infos i believe that i should write a module for the ajaxcall instead of trying to load just a loadpage.php. I have created the module and tested url , also test on hover and is working ok. However the controller is empty, just console log "received data ok" so how to make it load the rest of the gallery images?

Here is IndexController.php

    Package_Module_IndexController extends Mage_Core_Controller_Front_Action {
            public function getdataAction(){
                if($data = $this->getRequest()->getPost("key")){

//here starts my tests trying to load product somehow?
                   $_product = Mage::getResourceModel('catalog/product_collection')->toOptionArray();
        $product_id = $this->getRequest()->getParam('id');
        $_product = Mage::getModel('catalog/product')->load($product_id);
        echo Mage::helper('catalog/image')->init($_product, 'small_image');

                }else{
                    echo "unable to receive data !";
                }
            }

        }

And here is my jquery ajax function on hover on list.phtml:

  <span class="hover-image">
<script>
jQuery.ajax({
    url: "http://works/www.devet3est.com/testing/index/getdata",
    type: "POST",
    data: {key: 'value'},
    success: function(response){
        console.log(response);
        return response;
        result = response;  
        jQuery('.hover-image').html(response);

    }
});
</script>


    </span>

EDIT2 reason: cannot getdata of product from controller

I am not sure if the problem is the data type i use for jquery.ajax script (taken from another topic here) or the indexcontroller.php. I am pasting the full experimental indexcontroller.php with lot of garbage but i am trying at least to get some real data from product, even name/price etc then i will continue with gallery images.

<?php class Package_Module_IndexController extends Mage_Core_Controller_Front_Action {
 public function _prepareLayout()
    {
        return parent::_prepareLayout();
    }

    public function getCurrentCategory()
    {       
        return $this->_registry->registry('current_category');
    }

    public function getCurrentProduct()
    {       
        return $this->_registry->registry('current_product');
    }   
        public function getdataAction(){
            if($data = $this->getRequest()->getPost("key")){
             $post = $this->getRequest()->getPost();
     $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($post));

                $_product = Mage::getModel('catalog/product')->setStoreId(Mage::app()->getStore()->getId());
        $_product = $_product->load(Mage::app()->getRequest()->getParam('pid'));

        Mage::register('current_product', $_product );
        Mage::register('product', $_product);




             $productId  = (int) $this->getRequest()->getParam('id');
      $productName  = (int) $this->getRequest()->getParam('name');

      $_product = Mage::getModel('catalog/product')->getId(); 
        $product_name= Mage::getModel('catalog/product')->getName();
        $_product = Mage::getModel('catalog/product');
        $productAttrs = Mage::getResourceModel('catalog/product_attribute_collection');

      $images = [];
    $_product = Mage::getModel('catalog/product')->load(5545);
    foreach ($_product->getMediaGalleryImages() as $image):

        $images[] = Mage::helper('catalog/image')->init($_product, 'image', $image->getFile())->resize(100, 100);

    endforeach;
    echo 'testing at least to check if controller is connected OK gives DATA';
   return $product_name;  
return $images; 
 $post = $this->getRequest()->getPost();
     $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($post));
$response = $wrap->renderView();
        $this->getResponse()->setBody($response);
        $result = "success";
$this->getResponse()->setBody(Mage::helper('core')->jsonEncode($result));
exit;
            }else{
                echo "unable to receive data !";
            }
        }

    }
1

To optimize the speed, You can perform the following steps:

  • Create one JS function to call on hover on product Inage and Pass Product SKU as argument.
  • Create Ajax call to one Ajax Controller Action
  • In Ajax action Load Product and Fetch all the product images and pass response as HTML from action.
  • Insert the Response HTML in Gallery images div with unique ID as "gallery_image_{SKU}"
  • Apply check in JS function if images are there don't make Ajax call again.

Below linnks give you more understaing about ajax call:

How do i call a controller function in ajax?

https://stackoverflow.com/questions/19383188/module-and-ajax-call

http://javascriptsolution.com/call-magento-controller-using-ajax/

Hope this help!!

Updated: You can Load Images Like below. $images will contain complete image galleries path.

    $images = [];
    $product = Mage::getModel('catalog/product')->load(2);
    foreach ($product->getMediaGalleryImages() as $image):

        $images[] = Mage::helper('catalog/image')->init($product, 'image', $image->getFile())->resize(100, 100);

    endforeach;

Here you can also create Img tag in php and pass that Html code in response.

  • thank you, from what i understand i need to create module so i have started. I have created the module configl and controller and call it via jquery ajax inside my list.phtml but i do not understand what i should write inside IndexController.php to get all the gallery images once the ajax is called. Can you give example to start?i will update my question to add IndexController.php contents, module works ok so no need to add config.xml etc. – laxanorizo Feb 22 '18 at 16:29
  • I have updated my answer. – Pankaj Pareek Feb 22 '18 at 17:19
  • issue is that indexcontroller.php will always display nothing for image,price,name etc.if i try even to echo product_name it will not give any result. If i write something like echo 'test'; then it will display it iso they are connected with the controller. What do you think?Kindly have a look on my indexcontroller.php on the part "//here starts my tests trying to load product somehow?" How to make it understand that same product loads this controller and needs to send back gallery images through Ajax?must be doing something wrong.. – laxanorizo Feb 22 '18 at 17:33
  • Don't echo anything. add code like return $images; exit; then you will get data in ajax – Pankaj Pareek Feb 22 '18 at 18:00
  • you are right about the return $value i am still learning. But no matter what i do it will not load data from the product that i trigger the Ajax call.On list.phtml i have a hover on the main image and inside that div i paste the jQuery.ajax. Controller connects ok cause if i write something dummy inside the indexcontroller.php will display on hover inside main image.But no way to get product's data, i want at least to get _name to make sure it returns data. Does it need a special method to load the product inside the controller and then call the data?I – laxanorizo Feb 23 '18 at 9:45

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.