Tags/topics: 
product images
Product Display
cloud zoom
Product variations
product views
2
Answers
Vote up!
0
Vote down!

Cloud Zoom in Product Display

It works fine if you attach pictures to the attributes in a product variation.

If you try to use it for the Product display it writes it into the wrong region with the rest of the products fields instead of its own.

<div class="container-24 grid-14 prefix-1 clearfix">
</div>
<div class="container-24 grid-8 prefix-1">
</div>

It is inserting it into grid-8 with everything else, instead of its proper div, grid-14 (empty) which completely kills the layout

The only way that ive been able to get it to go into the correct div, is if i add all my images to the product variation, instead of the product display. I dont need different pictures for each variation.

Asked by: Erik Olsen
on July 26, 2014

2 Answers

Vote up!
0
Vote down!

OK i fixed it... since the field_images is technically, now in the node content and not the product variation; the view template needed editing. I replaced this...

  <div class="container-24 grid-14 prefix-1 clearfix">
    <?php print render($content['product:field_images']); ?>
  </div>
  <div class="container-24 grid-8 prefix-1">
    <div<?php print $content_attributes; ?>>
      <?php
        // We hide the comments and links now so that we can render them later.
        hide($content['comments']);
        hide($content['links']);
        print render($content);
      ?>
    </div>
  </div>

with this...

  <div class="container-24 grid-14 prefix-1 clearfix">
    <?php print render($content['field_images']); ?>
  </div>
  <div class="container-24 grid-8 prefix-1">
    <div<?php print $content_attributes; ?>>
      <?php
        // We hide the comments and links now so that we can render them later.
        // Hide the field_images because we rendered them already
        hide($content['comments']);
        hide($content['links']);
        hide($content['field_images']);
        print render($content);
      ?>
    </div>
  </div>
Answer by: Erik Olsen
Posted: Jul 28, 2014
Vote up!
0
Vote down!

I tried the above fix and it works well for the Product Display, but it breaks the Product Variation image display.

I fixed it by changing the above code in node--product--type.tpl.php as follows:

  <?php if (!$field_images): ?>
  <div class="container-24 grid-14 prefix-1 clearfix">
    <?php print render($content['product:field_images']); ?>
  </div>
  <div class="container-24 grid-8 prefix-1">
    <div<?php print $content_attributes; ?>>
      <?php
        // We hide the comments and links now so that we can render them later.
        // Hide the field_images because we rendered them already
        hide($content['comments']);
        hide($content['links']);
        hide($content['product:field_images']);
        print render($content);
      ?>
    </div>
  </div>
  <?php else: ?>
  <div class="container-24 grid-14 prefix-1 clearfix">
    <?php print render($content['field_images']); ?>
  </div>
  <div class="container-24 grid-8 prefix-1">
    <div<?php print $content_attributes; ?>>
      <?php
        // We hide the comments and links now so that we can render them later.
        hide($content['comments']);
        hide($content['links']);
        hide($content['field_images']);
        print render($content);
      ?>
    </div>
  </div>
  <?php endif; ?>
Answer by: ViEffe
Posted: May 11, 2016