Re: Image zoom

If we are able to get an array of the photos, an array of the thumbnails and an array of the large versions of the photos, then I think editing product.show_block_img for the template is the simplest way without hacking any of the other files.

If Nicolas can point to how to get the relevant arrays in PHP then I will happily write the code to integrate magic zoom and magiczoomplus

Thanks for the information Nicolas.

I'll take a look in the next week or so and post what I find.

Nicolas,
We bought Hikashop business version for a client who needs a large e-commerce site. The client is interested in having the product image zooming functionality as Magiczoom.
I followed this thread and tried few things, but I cannot get it working. Magic zooming is working fine outside of Hikashop, but not within a product description.
1) Can you give us an indication of when a similar functionality is available at Hikashop
or
2) Will you be able to advise exactly what modifications are required to get this functionality working (or any other zooming functionality) within Hikashop products description
Or
2)Will Hikashop be able to create a script for us (at a cost) that we use in this site

Thanks for your response in advance.

I have tried MagicZoom in Hikashop and it works fine for a product with no variants.

I have contacted the developer of MagicZoom and he has advised that we can use the API of MagicZoom to reset it. We have to modify Hikashop so that it calls MagicZoom whenever the variant gets reset whenever a variant is called. I have not test had the time to test this and hopefully will get some time over the next week.

The code needed is:

MagicZoomPlus.update();

Fabulous. It looks good. I'll try and see how well it works

No documentation and their template files for Hikashop do not work without modification. e.g. the path to the image folder is hardcoded so if you change it in the Hikashop settings, it loads no images. The example displays a small thumbnail as the image, which is not what is set in the preferences for Hikashop and the image index does not change the image, it uses squeezebox.

All in all I will have to spend some time looking at it and I may in the end use MagicZoom if I can get it to work. Even though more pricey, you get far more functionality and documentation.

I managed to get MagicZoom working on my site ( lillaslavender.com/lv/produkti still work in progress)

What I needed was a bit different - I wanted Magic Zoom to work on Hikashop module.

What I did:

1. Published Magic Zoom module in header position of the site.

2. In HikaShop content module configuration "Parameters for DIV" -> "Type of item layout" I had selected "Image"(In "Parameters for products" "Link to the product page" must be set as "Yes"!). In HikaShop configuration "Display" -> "Views" I filtered by selecting my template name and "Frotend". In this list in column "Views" I found "Product" and then in column "File" corresponding "listing_img".

3. I edited listing_img. The code was:

<div style="height:<?php echo $this->image->main_thumbnail_y;?>px;text-align:center;clear:both;" class="hikashop_product_image">
  <?php if($this->params->get('link_to_product_page',1)){ ?>
    <a href="<?php echo $link;?>" title="<?php echo $this->escape($this->row->product_name); ?>">
  <?php }
    echo $this->image->display(@$this->row->file_path,false,$this->escape($this->row->file_name), '' , '' , $this->image->main_thumbnail_x,  $this->image->main_thumbnail_y);
  if($this->params->get('link_to_product_page',1)){ ?>
    </a>
  <?php } ?>
</div>
<?php
if($this->params->get('show_price')){
  $this->setLayout('listing_price');
  echo $this->loadTemplate();
}

<div style="height:<?php echo $this->image->main_thumbnail_y;?>px;text-align:center;clear:both;" class="hikashop_product_image">
  <?php if($this->params->get('link_to_product_page',1)){ ?>
  <a href="/images/products/large/<?php echo ($this->row->file_path); ?>" class="MagicZoom">
  <?php }
    echo $this->image->display(@$this->row->file_path,false,$this->escape($this->row->file_name), '' , '' , $this->image->main_thumbnail_x,  $this->image->main_thumbnail_y);
  if($this->params->get('link_to_product_page',1)){ ?>
    </a>
  <?php } ?>
</div>
<a class="hikashop_module_product_link" href="<?php echo $link;?>" title="<?php echo $this->escape($this->row->product_name); ?>">
  Details
</a>
<?php
if($this->params->get('show_price')){
  $this->setLayout('listing_price');
  echo $this->loadTemplate();
}

<a href="<?php echo $link;?>" title="<?php echo $this->escape($this->row->product_name); ?>">

<a href=/images/products/large/<?php echo ($this->row->file_path); ?>" class="MagicZoom">

<a class="hikashop_module_product_link" href="<?php echo $link;?>" title="<?php echo $this->escape($this->row->product_name); ?>">
  Details
</a>

Thank you for that Zahorijs.

The hard part is not getting MagicZoon to work (although it does require editing the relevant display).

The hard part is getting it to work on a product page with variants. The first load is always OK, but the selection of variants changes the html on the fly and the javascript is not initialised to cope with the change, and no longer works in the image area. I have worked out the files requiring change, but have not had time to make the changes, as I do not want it to break with upgrades.

I will work something out with Nicolas when I get time, perhaps using a config value to use alternative code for MagicZoom instead of the internal Hilkashop image management.

Hi Nicolas,

I do need variant images, which why I need to spend time working on this.

I believe I need to do three things:
1) Modify the code for product->show_block_img to have the MagicZoom code
2) Modify characteristic.php to re-initialise MagicZoom via API after the variant is changed
3) Modify the helper image.php to have the MagicZoom code for variants

For 2 and 3 I need to work something which does not effect the normal functionality if MagicZoom is not used. I was thinking maybe adding a new param record to hikashop_config and run the MagicZoom code if it's set, otherwise the standard code.

Am I correct in my approach above? And is there any other files you think I need to take into consideration?

Even better.

Thanks for the link

@Nicolas,

I got magiczoomplus working pretty well on my site: heelcrush.com/collection/product/cid-12.html

But variants - OMG its like broken!

... okay so you said about the variants images - removing them from the Product Show view... Man how do you do that? All I got is this stuff and when I try cutting it out it breaks the code >>

<?php
  if(empty($this->element->variants)){
    if(hikashop_level(1) && !empty($this->element->options)){
      $priceUsed = 0;
      if(!empty($this->row->prices)){
        foreach($this->row->prices as $price){
          if(isset($price->price_min_quantity) && empty($this->cart_product_price)){
            if($price->price_min_quantity<=1){
              if($this->params->get('price_with_tax')){
                $priceUsed = $price->price_value_with_tax;
              } else {
                $priceUsed = $price->price_value;
              }
            }
          }
        }
      }
      echo '
      <input type="hidden" name="hikashop_price_product" value="'.$this->row->product_id.'" />
      <input type="hidden" id="hikashop_price_product_'.$this->row->product_id.'" value="'.$priceUsed.'" />
      <input type="hidden" id="hikashop_price_product_with_options_'.$this->row->product_id.'" value="'.$priceUsed.'" />';
    }
  } else {
    foreach ($this->element->variants as $variant) {
      $this->row = & $variant;
      $variant_name = array ();
      if (!empty ($variant->characteristics)) {
        foreach ($variant->characteristics as $k => $ch) {
          $variant_name[] = $ch->characteristic_id;
        }
      }
      $variant_name = implode('_', $variant_name);
      if (!empty ($variant->images)) {
?>

I have now installed http://demo.artetics.com/index.php?option=com_content&view=article&id=123&Itemid=146.

It is only $25 and work like a charm.

The only issue was that the flypage they gave for Hikashop did not handle variants. They went onto my site and fixed it for me

I highly recommend it.

If I will use Magic Toolbox, how do I have to set the images in a product?
Now I set the images in dimensions height = 100 px, width = (max)200 px. Magnifiyng them would give nasty pictures.

Will Hikashop, including Magic Toolbox, automaticly install images in thumbnail 200 x 100 AND in a higher resolution - in such a way that magnifying will result in pictures in a higher resolution?

You should upload a high-res image that looks ok when zooming. Hikashop is well written and will generate smaller images when needed for optimisation, so you need not worry about creating thumbnails etc.

The page will then show the lower-res image and the zoom will show the larger image in a floating box.