How Do I Allow The Product Images To Be Clickable?

[TimPenner]

Hey there!

 

Pretty new to Prestashop, but I think I'm getting the hang of it. However, I can't figure out how to make the main product images clickable instead of using the product title/text or Quick View. We don't want the Quick View options to come over the top, so instead, we'd prefer to just allow the products/images to be clicked.

 

Basically the theme has a hover option that zooms into the image and changes the colour a bit. That's fine, but I'd like to click in on the whole thing to go to the item page.

 

 

Any suggestions?

 

Tim

 

I'm on  1.6.0.14 and use a theme called Bazien.

 

 

[shacker]

site url?

[TimPenner]

http://majesticfilatures.us/shop/en/

[shacker]

edit the product-list.tpl of your theme, find the images, and add the href like 

 

<a class="product_img_link" href="{$productd.link|escape:'htmlall':'UTF-8'}" title="{$productd.name|escape:'htmlall':'UTF-8'}" itemprop="url">

<img class="replace-2x img-responsive" src="{$link->getImageLink($productd.link_rewrite, $productd.id_image, $imageh)|escape:'htmlall':'UTF-8'}" alt="{if !empty($productd.legend)}{$productd.legend|escape:'htmlall':'UTF-8'}{else}{$productd.name|escape:'htmlall':'UTF-8'}{/if}" title="{if !empty($productd.legend)}{$productd.legend|escape:'htmlall':'UTF-8'}{else}{$productd.name|escape:'htmlall':'UTF-8'}{/if}" width="{$imagesizeh|escape:'htmlall':'UTF-8'}" itemprop="image" />

</a>

[TimPenner]

 

edit the product-list.tpl of your theme, find the images, and add the href like 

 

<a class="product_img_link" href="{$productd.link|escape:'htmlall':'UTF-8'}" title="{$productd.name|escape:'htmlall':'UTF-8'}" itemprop="url">

<img class="replace-2x img-responsive" src="{$link->getImageLink($productd.link_rewrite, $productd.id_image, $imageh)|escape:'htmlall':'UTF-8'}" alt="{if !empty($productd.legend)}{$productd.legend|escape:'htmlall':'UTF-8'}{else}{$productd.name|escape:'htmlall':'UTF-8'}{/if}" title="{if !empty($productd.legend)}{$productd.legend|escape:'htmlall':'UTF-8'}{else}{$productd.name|escape:'htmlall':'UTF-8'}{/if}" width="{$imagesizeh|escape:'htmlall':'UTF-8'}" itemprop="image" />

</a>

 

Thanks Shacker! I added this in but it seems to have no effect on the clickability. The page seems to react the same way still.... this is the code here. I replaced the appropriate code with what you gave me. Anything I'm missing?

 

<!-- Products list -->

<div class="nova-list">

<div class="nova-product">

<ul{if isset($id) && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}">

{foreach from=$products item=product name=products}

{math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}

{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineTablet assign=totModuloTablet}

{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineMobile assign=totModuloMobile}

{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}

{if $totModuloTablet == 0}{assign var='totModuloTablet' value=$nbItemsPerLineTablet}{/if}

{if $totModuloMobile == 0}{assign var='totModuloMobile' value=$nbItemsPerLineMobile}{/if}

<li class=" ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-6 col-md-4{else} col-xs-12 col-sm-6 col-md-4{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">

<div class="product-container" itemscope itemtype="http://schema.org/Product">

<div class="left-block">

<div class="item-product-image-box">

<a class="product_img_link" href="{$productd.link|escape:'htmlall':'UTF-8'}" title="{$productd.name|escape:'htmlall':'UTF-8'}" itemprop="url">

              <img class="replace-2x img-responsive" src="{$link->getImageLink($productd.link_rewrite, $productd.id_image, $imageh)|escape:'htmlall':'UTF-8'}" alt="{if !empty($productd.legend)}{$productd.legend|escape:'htmlall':'UTF-8'}{else}{$productd.name|escape:'htmlall':'UTF-8'}{/if}" title="{if !empty($productd.legend)}{$productd.legend|escape:'htmlall':'UTF-8'}{else}{$productd.name|escape:'htmlall':'UTF-8'}{/if}" width="{$imagesizeh|escape:'htmlall':'UTF-8'}" itemprop="image" />

            </a>

 

{if isset($product.new) && $product.new == 1}

<a class="new_prod" href="{$product.link|escape:'html':'UTF-8'}">

<span class="new-label-product">{l s='New'}</span>

</a>

{/if}

{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}

<a class="sale-prod" href="{$product.link|escape:'html':'UTF-8'}">

<span class="sale-label-product">{l s='Sale'}</span>

</a>

{/if}

</div>

{hook h="displayProductDeliveryTime" product=$product}

{hook h="displayProductPriceBlock" product=$product type="weight"}

</div>

[webplus]

Hi,

 

the link doesn't work becase it's "overlapped" by this element.

<div class="product-hover-box"></div>

If you will find it in tpl file and delete it, the link should work. From what I see, it shouldn't have any negative effect, but there may be better way of solving the issue (css tuning), the author of your theme would tell you better.

Edited February 24, 2016 by webplus (see edit history)

[TimPenner]

Hi,

 

the link doesn't work becase it's "overlapped" by this element.

<div class="product-hover-box"></div>

If you will find it in tpl file and delete it, the link should work. From what I see, it shouldn't have any negative effect, but there may be better way of solving the issue (css tuning), the author of your theme would tell you better.

 

You guys are amazing! Thank you so much! This was definitely the issue. 

 

As it turns out, you can remove the "Quick View" option in the theme module, however it leaves the "product-hover-box" coding in the product-home-1.tpl file. Once I hid that coding it allowed the image to be clickable!

 

THANK YOU!!

 

Tim