Fórum OpenCart Brasil

[Felipe Calife]

Manoel, muito obrigado por mais essa contribuição.
Não achei um zoom legal nem em foruns internacionais.

Mas estou com um problema aqui para os seres pensantes:

Não sei se acontece com vocês, mas quando tiro o ponteiro do mouse de cima da imagem principal do produto para o lado direito (para o lado do zoom), como se quisesse clicar no botão comprar, por exemplo, o zoom continua cobrindo os links.
Só quando direciono o ponteiro do mouse para baixo da imagem principal primeiro é que consigo depois ir para o botão comprar.

1- Acontece com vocês?
2- como resolver isso?

Agradeço a todos pela ajuda de sempre.

[netogb1]

instalei módulo e fico funcionando, só que ao passar o mause sobre o menu superior, ao descer o submenu a imagem fica cobrindo o mesmo.

[MArk_H0ppus]

Bom dia a todos,

na Versão 1.5.3.1, no arquivo product.tpl ao invés de :

Código: Selecionar todos

<script type="text/javascript"><!--
$('.fancybox').fancybox({cyclic: true});
//--></script>

está na linha 335 como :

Código: Selecionar todos

<script type="text/javascript"><!--
$('.colorbox').colorbox({
	overlayClose: true,
	opacity: 0.5
});
//--></script> 

funcionou corretamente no meu opencart 1.5.3.1,

Obrigado pela dica !!

[MArk_H0ppus]

Manoel, muito obrigado por mais essa contribuição.
Não achei um zoom legal nem em foruns internacionais.

Mas estou com um problema aqui para os seres pensantes:

Não sei se acontece com vocês, mas quando tiro o ponteiro do mouse de cima da imagem principal do produto para o lado direito (para o lado do zoom), como se quisesse clicar no botão comprar, por exemplo, o zoom continua cobrindo os links.
Só quando direciono o ponteiro do mouse para baixo da imagem principal primeiro é que consigo depois ir para o botão comprar.

1- Acontece com vocês?
2- como resolver isso?

Agradeço a todos pela ajuda de sempre.

instalei módulo e fico funcionando, só que ao passar o mause sobre o menu superior, ao descer o submenu a imagem fica cobrindo o mesmo.

Bom dia,

para que isso não ocorra, configure as options da seguinte maneira :

Código: Selecionar todos

<script type="text/javascript">
   $(document).ready(function(){
      $(".jqzoom").jqzoom({
         zoomType: 'standard',
	 position: 'right',
	 showEffect: 'show', // <<<<<<<<-------------- ao invés de fadeout coloque somente show
         hideEffect: 'hide', // <<<<<<<<<-------------- e ao invés de fadeout coloque hide
         fadeoutSpeed: 'slow',
         title: true,
         lens: true,
         zoomWidth: 400,
         zoomHeight: 400,
         preloadText: 'Carregando'
      });
   });
</script>

no meu opencart versão 1.5.3.1 (entrem e vejam o exempo : www.infoitech.com.br)resolveu, espero que resolva para vcs também !!

[johnnymorrison]

Amigos, não estou conseguindo colocar na versão 1.5.4.1, esse não serve? Não acho as opções pois o meu template é modificado, vou colocar aqui as infos do código product.tpl se alguém puder me ajudar, ficarei muito agradecido.

Código: Selecionar todos

<?php echo $header; ?>
<?php echo $column_left; ?>

<div id="right-column">

<div id="content">

<div class="page-title"><?php echo $heading_title; ?></div>

<?php echo $content_top; ?>
 
<div class="product-info">
    <?php if ($thumb || $images) { ?>
    

<div class="imagecol">
      
<?php if ($thumb) { ?>
      <div class="image"><div class="image-child"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="colorbox" style="display:block; background-image:url('<?php echo $thumb; ?>'); background-position:center center;"></a></div></div>

<?php } ?>
      <?php if ($images) { ?>
      <div class="image-additional">
        <?php foreach ($images as $image) { ?>
 <div class="small-image"><div class="small-image-child"><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" style="display:block; background-image:url('<?php echo $image['thumb']; ?>'); background-position:center center;"></a></div></div>
 <?php } ?>
<div class="clear"></div>
      </div>
      <?php } ?>
    </div>
<?php } ?>
    



<div class="productcol">
      
<div class="product-details">
<ul>
        <?php if ($manufacturer) { ?>
        <li><span><?php echo $text_manufacturer; ?></span> <b><a href="<?php echo $manufacturers; ?>"><?php echo $manufacturer; ?></a></b></li>
        <?php } ?>
        <li><span><?php echo $text_model; ?></span> <b><?php echo $model; ?></b></li>
        <li><span><?php echo $text_stock; ?></span> <b><?php echo $stock; ?></b></li>
        <?php if ($tags) { ?><li><span><?php echo $text_tags; ?></span> <?php foreach ($tags as $tag) { ?> <b><a href="<?php echo $tag['href']; ?>"><?php echo $tag['tag']; ?></a></b>, <?php } ?></li>  <?php } ?>
 
</ul>
</div>
     




<?php if ($price) { ?>
     <div class="price-container">
     <div class="price">
        <?php if (!$special) { ?>
        <div class="price-amount"><?php echo $price; ?></div>
        <?php if ($tax) { ?>
        <span class="price-tax"><?php echo $text_tax; ?> <?php echo $tax; ?></span>
        <?php } ?>

        <?php } else { ?>
        <div class="price-amount"><?php echo $special; ?></div>
        <span class="price-old"><?php echo $price; ?></span> 
        <?php } ?>
     </div><!--price ends-->

        <?php if ($points) { ?>
        <span class="reward"><small><?php echo $text_points; ?> <?php echo $points; ?></small></span> <br />
        <?php } ?>
        <?php if ($discounts) { ?>
        <br />
        <div class="discount">
          <?php foreach ($discounts as $discount) { ?>
          <?php echo sprintf($text_discount, $discount['quantity'], $discount['price']); ?><br />
          <?php } ?>
        </div>
        <?php } ?>

     </div><!--price-container ends--> 
<?php } ?>
<div class="clear"></div>

<?php if ($review_status) { ?>
      <div class="review">
          <div class="reviews-stars"><img src="catalog/view/theme/eliteshop/image/stars-<?php echo $rating; ?>.png" alt="<?php echo $reviews; ?>" /></div> <div class="reviews-number"><?php echo $reviews; ?></div>
      </div>
<div class="clear"></div>
      <?php } ?>


       <?php if ($options) { ?>
      <div class="options">
       
        <?php foreach ($options as $option) { ?>
        <?php if ($option['type'] == 'select') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
          <select class="styled-select" name="option[<?php echo $option['product_option_id']; ?>]">
            <option value=""><?php echo $text_select; ?></option>
            <?php foreach ($option['option_value'] as $option_value) { ?>
            <option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
            <?php if ($option_value['price']) { ?>
            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
            <?php } ?>
            </option>
            <?php } ?>
          </select>
        </div>

        <?php } ?>
        <?php if ($option['type'] == 'radio') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
          <?php foreach ($option['option_value'] as $option_value) { ?>
          <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
          <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
            <?php if ($option_value['price']) { ?>
            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
            <?php } ?>
          </label>

          <?php } ?>
        </div>
        <br />
        <?php } ?>
        <?php if ($option['type'] == 'checkbox') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
          <?php foreach ($option['option_value'] as $option_value) { ?>
          <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
          <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"> <?php echo $option_value['name']; ?>
            <?php if ($option_value['price']) { ?>
            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
            <?php } ?>
          </label>

          <?php } ?>
        </div>
        <br />
        <?php } ?>
        <?php if ($option['type'] == 'text') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
          <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" />
        </div>


 <?php if ($option['type'] == 'image') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
            <table class="option-image">
              <?php foreach ($option['option_value'] as $option_value) { ?>
              <tr>
                <td style="width: 1px;"><input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td>
                <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td>
                <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
                    <?php if ($option_value['price']) { ?>
                    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                    <?php } ?>
                  </label></td>
              </tr>
              <?php } ?>
            </table>
        </div>
        <br />
        <?php } ?>


        <?php } ?>
        <?php if ($option['type'] == 'textarea') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
          <textarea name="option[<?php echo $option['product_option_id']; ?>]" cols="33" rows="5"><?php echo $option['option_value']; ?></textarea>
        </div>
        <?php } ?>

        <?php if ($option['type'] == 'file') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
          <input type="button" value="<?php echo $button_upload; ?>" id="button-option-<?php echo $option['product_option_id']; ?>" class="button">
          <input type="hidden" name="option[<?php echo $option['product_option_id']; ?>]" value="" />
        </div>
        <?php } ?>

        <?php if ($option['type'] == 'date') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
          <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="date" />
        </div>
        <?php } ?>

        <?php if ($option['type'] == 'datetime') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
          <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="datetime" />
        </div>
        <?php } ?>

        <?php if ($option['type'] == 'time') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
          <input type="text" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['option_value']; ?>" class="time" />
        </div>
        <?php } ?>

        <?php } ?>
      </div><div class="clear"></div>
      <?php } ?>
      

<div class="misc-links1">
<a onclick="addToWishList('<?php echo $product_id; ?>');"><?php echo $button_wishlist; ?></a> &nbsp;&nbsp;&nbsp;&nbsp; <a onclick="addToCompare('<?php echo $product_id; ?>');"><?php echo $button_compare; ?></a>
</div>


<div class="cart">

<div class="quantity"><?php echo $text_qty; ?>
          <input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" />
          <input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" /><br />        
</div>

        <input type="button" value=" " id="button-cart" />
        <?php if ($minimum > 1) { ?>
        <div class="minimum"><?php echo $text_minimum; ?></div>
        <?php } ?>
</div>
      



    </div><!--productcol ends-->
  </div><!--product-info ends-->



<div class="product-description">
<div class="trigger-title"><a href="#"><?php echo $tab_description; ?></a></div>
  <div>
  <?php echo $description; ?>
  </div>
</div><!--product-description ends-->





<?php if ($attribute_groups) { ?>
<div class="trigger-title"><a href="#"><?php echo $tab_attribute; ?></a></div>
<div class="toggle_container">
    <table class="attribute">
      <?php foreach ($attribute_groups as $attribute_group) { ?>
      <thead>
        <tr>
          <td colspan="2"><?php echo $attribute_group['name']; ?></td>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($attribute_group['attribute'] as $attribute) { ?>
        <tr>
          <td><?php echo $attribute['name']; ?></td>
          <td><?php echo $attribute['text']; ?></td>
        </tr>
        <?php } ?>
      </tbody>
      <?php } ?>
    </table>
</div>
  <?php } ?>





  <?php if ($products) { ?>
  <div id="related">
    <div class="trigger-title"><a href="#"><?php echo $tab_related; ?></a></div>
<div class="toggle_container">

      <?php foreach ($products as $product) { ?>
<div class="box-container">

  <div class="box-preloader">

     <a class="box-image" href="<?php echo $product['href']; ?>" style="background-image:url('<?php echo $product['thumb']; ?>'); background-position:center center;">

          <span class="box-title"><span><?php if( strlen( $product['name'] ) < 23 ) { echo $product['name']; } else { echo substr( $product['name'],0,21 )."..."; } ?></span></span>
    

     </a><!--box-image ends-->

<div class="box-bottom">
          <span class="box-add-to-cart"><a onclick="addToCart('<?php echo $product['product_id']; ?>');"> </a></span>
          <div class="box-rating"><img class="rating-stars" src="catalog/view/theme/eliteshop/image/stars-<?php echo $product['rating'] . 'a.png'; ?>" alt="Rating" /></div>          
 <div class="clear"></div>
 </div><!--box-bottom ends-->

  </div><!--box-preloader -->
</div><!--box-container ends-->
<?php } ?>

    </div>
  </div><!--related ends-->
<div class="clear"></div>
  <?php } ?>





<?php if ($review_status) { ?>
 <div id="reviews-container">
 <div class="trigger-title"><a href="#"><?php echo $tab_review; ?></a></div>
 <div class="toggle_container">
    <div id="review"></div>
    <h6 id="review-title"><?php echo $text_write; ?></h6>
    <small><?php echo $entry_name; ?></small><br />
    <input type="text" name="name" value="" />
    <br />
    <br />
    <small><?php echo $entry_review; ?></small><br />
    <textarea name="text" cols="40" rows="4" style="width: 60%;"></textarea><br />
    <span style="font-size: 11px;"><?php echo $text_note; ?></span><br />
    <br />
    <b><?php echo $entry_rating; ?></b> <span><?php echo $entry_bad; ?></span>&nbsp;
    <input type="radio" name="rating" value="1" />
    &nbsp;
    <input type="radio" name="rating" value="2" />
    &nbsp;
    <input type="radio" name="rating" value="3" />
    &nbsp;
    <input type="radio" name="rating" value="4" />
    &nbsp;
    <input type="radio" name="rating" value="5" />
    &nbsp; <span><?php echo $entry_good; ?></span><br />
    <br />
    <small><?php echo $entry_captcha; ?></small><br />
    <input type="text" name="captcha" value="" />
    <br />
    <img src="index.php?route=product/product/captcha" alt="" id="captcha" /><br />
    <br />
    <div class="buttons">
      <div class="right"><a id="button-review" class="button"><span><?php echo $button_continue; ?></span></a></div>
    </div>
    </div>
</div><!--reviews-container ends-->
  <?php } ?>





<?php echo $content_bottom; ?>
</div><!--content ends-->


<script type="text/javascript"><!--
$('#button-cart').bind('click', function() {
	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();
			
			if (json['error']) {
				if (json['error']['option']) {
					for (i in json['error']['option']) {
						$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
					}
				}
			} 
			
			if (json['success']) {
				$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/eliteshop/image/close.png" alt="" class="close" /></div>');
					
				$('.success').fadeIn('slow');
					
				$('#cart-total').html(json['total']);
				
				$('html, body').animate({ scrollTop: 0 }, 'slow'); 
			}	
		}
	});
});
//--></script>
<?php if ($options) { ?>
<script type="text/javascript" src="catalog/view/javascript/jquery/ajaxupload.js"></script>
<?php foreach ($options as $option) { ?>
<?php if ($option['type'] == 'file') { ?>
<script type="text/javascript"><!--
new AjaxUpload('#button-option-<?php echo $option['product_option_id']; ?>', {
	action: 'index.php?route=product/product/upload',
	name: 'file',
	autoSubmit: true,
	responseType: 'json',
	onSubmit: function(file, extension) {
		$('#button-option-<?php echo $option['product_option_id']; ?>').after('<img src="catalog/view/theme/default/image/loading.gif" class="loading" style="padding-left: 5px;" />');
		$('#button-option-<?php echo $option['product_option_id']; ?>').attr('disabled', true);
	},
	onComplete: function(file, json) {
		$('#button-option-<?php echo $option['product_option_id']; ?>').attr('disabled', false);
		
		$('.error').remove();
		
		if (json['success']) {
			alert(json['success']);
			
			$('input[name=\'option[<?php echo $option['product_option_id']; ?>]\']').attr('value', json['file']);
		}
		
		if (json['error']) {
			$('#option-<?php echo $option['product_option_id']; ?>').after('<span class="error">' + json['error'] + '</span>');
		}
		
		$('.loading').remove();	
	}
});
//--></script>
<?php } ?>
<?php } ?>
<?php } ?>
<script type="text/javascript"><!--
$('#review .pagination a').live('click', function() {
	$('#review').fadeOut('slow');
		
	$('#review').load(this.href);
	
	$('#review').fadeIn('slow');
	
	return false;
});			

$('#review').load('index.php?route=product/product/review&product_id=<?php echo $product_id; ?>');

$('#button-review').bind('click', function() {
	$.ajax({
		url: 'index.php?route=product/product/write&product_id=<?php echo $product_id; ?>',
		type: 'post',
		dataType: 'json',
		data: 'name=' + encodeURIComponent($('input[name=\'name\']').val()) + '&text=' + encodeURIComponent($('textarea[name=\'text\']').val()) + '&rating=' + encodeURIComponent($('input[name=\'rating\']:checked').val() ? $('input[name=\'rating\']:checked').val() : '') + '&captcha=' + encodeURIComponent($('input[name=\'captcha\']').val()),
		beforeSend: function() {
			$('.success, .warning').remove();
			$('#button-review').attr('disabled', true);
			$('#review-title').after('<div class="attention"><img src="catalog/view/theme/default/image/loading.gif" alt="" /> <?php echo $text_wait; ?></div>');
		},
		complete: function() {
			$('#button-review').attr('disabled', false);
			$('.attention').remove();
		},
		success: function(data) {
			if (data['error']) {
				$('#review-title').after('<div class="warning">' + data['error'] + '</div>');
			}
			
			if (data['success']) {
				$('#review-title').after('<div class="success">' + data['success'] + '</div>');
								
				$('input[name=\'name\']').val('');
				$('textarea[name=\'text\']').val('');
				$('input[name=\'rating\']:checked').attr('checked', '');
				$('input[name=\'captcha\']').val('');
			}
		}
	});
});
//--></script> 
<script type="text/javascript"><!--
$('#tabs a').tabs();
//--></script> 
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-timepicker-addon.js"></script> 
<script type="text/javascript"><!--
if ($.browser.msie && $.browser.version == 6) {
	$('.date, .datetime, .time').bgIframe();
}

$('.date').datepicker({dateFormat: 'yy-mm-dd'});
$('.datetime').datetimepicker({
	dateFormat: 'yy-mm-dd',
	timeFormat: 'h:m'
});
$('.time').timepicker({timeFormat: 'h:m'});
//--></script> 

</div><!-- right-column ends-->

</div><!--container ends-->

<div class="clear"> </div>

<?php echo $footer; ?>

[lucianopoa]

Para a versão 1.5.5.1 coloque o seguinte trecho dentro de um arquivo xml (vqmod) ou em um novo:

<file name="catalog/view/theme/*/template/product/product.tpl">
<operation>
<search position="after"><![CDATA[
<?php echo $content_bottom; ?></div>
]]></search>
<add><![CDATA[
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/jqzoom/css/jquery.jqzoom.css" />
<script src="catalog/view/javascript/jquery/jqzoom/js/jquery.jqzoom-core-pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".jqzoom").jqzoom({
showEffect: 'show',
hideEffect: 'hide',
fadeoutSpeed: 'slow',
title: true,
lens: true,
zoomWidth: 400,
zoomHeight: 400,
preloadText: 'Carregando'
});
});
</script>
]]></add>
</operation>
</file>

<file name="catalog/view/theme/*/template/product/product.tpl">
<operation>
<search position="replace" index="1"><![CDATA[
class="colorbox">
]]></search>
<add><![CDATA[
class="jqzoom">
]]></add>
</operation>
</file>

[rickgodoy]

Pessoal,

Apenas para informar que consegui fazer funcionar a extensão do link abaixo na loja 1.5.5.1 sem problemas, está funcionando perfeitamente!

http://www.opencart.com/index.php?route ... earch=zoom

Abs,

Rickgodoy

[redeaqui]

Uso fancybox e estar funcionando perfeito até uma certa parte, porem as imagens não estão dando zoom, e observei o link da imagem da janela pop é a imagem da pasta cache e o certo seria da pasta imagem.
Como posso fazer consertar isto, quando clicar na imagem ela ampliar