Disable product zoom option

[simone79vi]

Hi,

in the page of a product, is it possibile to disable the option to zoom the product?

 

Thank you

[rocky]

To remove the link from the product image, you'll need to edit themes/default-bootstrap/js/product.js and then change lines 260-263 from:

//add a link on the span 'view full size' and on the big image
$(document).on('click', '#view_full_size, #image-block', function(e){
	$('#views_block .shown').click();
});

to:

//add a link on the span 'view full size' and on the big image
//$(document).on('click', '#view_full_size, #image-block', function(e){
//	$('#views_block .shown').click();
//});

Adding the // in front of those lines will remove the link from the big image.
 
To remove the link from the thumbnail images, you'll need to edit themes/default-bootstrap/product.tpl and change lines 125 from:

									<a{if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}[spam-filter]/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}'{literal[spam-filter]{/literal}"{else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"	data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"{/if} title="{$imageTitle}">

to:

									<a{if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}[spam-filter]/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}'{literal[spam-filter]{/literal}"{else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"	data-fancybox-group="other-views" onclick="return false" class="{*fancybox*}{if $image.id_image == $cover.id_image} shown{/if}"{/if} title="{$imageTitle}">

Commenting out the fancybox class and adding the onclick="return false" at the end prevents the links on the thumbnails from loading.

The rest can be done using CSS. For example, change line 35 of themes/default-bootstrap/css/product.css from:

  cursor: pointer;

 to:

/*  cursor: pointer;*/

This will change the cursor from a hand to an arrow when the mouse is over the big image.

 

Then add the following anywhere in product.css:

#thumbs_list_frame a { cursor: default }
#view_full_size .span_link { display: none!important }

This will change the cursor from a hand to an arrow when the mouse is over the thumbnail images and hide the "View larger" link.

[simone79vi]

Perfect!!

You are the best..

But if I update in the future prestashop.. I lost all this changes of css and tpl ?

 

Grazie

[rocky]

Yes, you will lose the changes because you haven't renamed your theme. If you rename your theme and switch to it before upgrading, they won't be lost.

[simone79vi]

Or copy only the css and the other file modified.

Is it important update prestashop ?

[rocky]

Yes, you'll need to upgrade in the future. PrestaShop v1.6.1.9 will include an important fix that will allow it to continue working properly in the latest Google Chrome and other browsers that have deprecated synchronous AJAX calls.

 

You won't be able to upgrade to PrestaShop v1.7 though, since it's a major release that breaks compatibility. You'll need to start over with an all-new theme and modules to use it.