Why the Product Image Disappeared in the TomatoCart Product Info Page

I had received an email from a user several days ago. He complained the product image was disappeared in the product info page.

Intermittently when I view the website (with any browser firefox,google chrome,IE) the large thumbnail picture will cover all the smaller thumbnail pictures or at other times only small thumbnail pictures will be visible.

After testing the issue in his live store, I noticed the product image was loaded very slowly from his web server. The script which is responsible for calculating the width and height of the product image is failed to execute in that the image wasn’t loaded completely. As a result, both the width and height of the image are equal to zero. That’s absolutely wrong.

We have to update the script in order to avoid such wrong calculation. Please apply following modifications for your system code:

Step 1. Go to etc/mojozoom/mojozoom.js in your TomatoCart root directory.

Find the following code snippet:

function makeZoomable(img, zoomSrc, zoomImgCtr, zoomWidth, zoomHeight, alwaysShow, onImgClick) {

Replace it with:

function makeZoomable(img, zoomSrc, zoomImgCtr, zoomWidth, zoomHeight, alwaysShow, onImgClick, thumbWidth, thumbHeight) {

Find following code snippet:

var w = img.offsetWidth;
var h = img.offsetHeight;

Replace it with:

var w = thumbWidth;
var h = thumbHeight;

Step2. Go to templates/bootstrap/content/products/info.php in your tomatocart root directory

– Find following code snippet:

<h1><?php echo $osC_Template->getPageTitle(); ?></h1>

– Add following code snippet before it:

<?php 
    //get the image width and height of the product info image group
    $thumbnail_width = $osC_Image->getWidth('product_info');
    $thumbnail_height = $osC_Image->getHeight('product_info');
?>

– Find following code snippet:

//zoom image
  MojoZoom.makeZoomable(  
    document.getElementById("product_image"),   
    $('product_image').get('large-img'),
    null, 
    270, 
    210, 
    false,
    function(e) {
      if (e.preventDefault) {
        e.preventDefault();
      } else {
        e.returnValue = false;
      }

      var miniImages = $$(".mini");
      var img = $$('.mojozoom_imgctr').getElement('img').get('src');
      var index = 0;

      for (i = 0; i < miniImages.length; i++) {
        if (miniImages[i].get("large-img") == img) {
          index = i;
          break;
        }
      }

      Milkbox.openMilkbox(Milkbox.galleries[0], index); 
    }
  );

– Replace it with:

//zoom image
  MojoZoom.makeZoomable(  
    document.getElementById("product_image"),   
    $('product_image').get('large-img'),
    null, 
    270, 
    210, 
    false,
    function(e) {
      if (e.preventDefault) {
        e.preventDefault();
      } else {
        e.returnValue = false;
      }

      var miniImages = $$(".mini");
      var img = $$('.mojozoom_imgctr').getElement('img').get('src');
      var index = 0;

      for (i = 0; i < miniImages.length; i++) {
        if (miniImages[i].get("large-img") == img) {
          index = i;
          break;
        }
      }

      Milkbox.openMilkbox(Milkbox.galleries[0], index); 
    },
    <?php echo $thumbnail_width; ?>,
    <?php echo $thumbnail_height; ?>
  );

That’s it. After updating the above code, the width and height of product image will always be calculated correctly.

If you can’t update the code by yourself, don’t hesitate to contact us via email support@tomatocart.com to get the technical support. We promise that all of the Arvixe users will get our professional technical support freely. You just need to show us part of your Arvixe host information via email.

Looking for quality TomatoCart Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

Leave a Reply

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


+ 7 = 14

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>