Add links to subcategories images in a custom theme

[thcpolska]

Hello there Prestaheads!
 
I am trying to make a few modifications to a theme, one of those is simply adding links to subcategories thumbnails, because now the link is only in subcategory header text, which can be a bit confusing for some users. I would like the whole subcat image and header text work as a link. 
 
So to the point, I tried few ways to accomplish this by wrapping code that generates thumbnail in a <a href=> tag, the link is visible in the code and it's generated correctly, but it's not making the thumbnail div clickable. 
 
Here is the theme original code:
 

<!-- Subcategories original code -->
                        <div id="subcategories">
                            <h4 class="subcategory-heading">{l s='Subcategories'}</h4>
                            <!-- <div class="subcategory-heading">{l s='Subcategories :'}</div> -->
                            <ul class="subcategories-list row">
                                {foreach from=$subcategories item=subcategory name=subcategory_item}
				<li class="subcategories-item col-xs-cus-12 col-xs-6 col-sm-4 col-lg-3 {if $smarty.foreach.subcategory_item.iteration%3 == 1} first-item {/if}">
				<div class="subcategory-container" {if $subcategory.id_image} style="background:url({$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')|escape:'html':'UTF-8'}) center no-repeat;  min-height:280px; min-width:200px;"{/if}>
                                <h5 class="subcategory-name"><a  href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:80:'...'|escape:'html':'UTF-8'|truncate:350}</a></h5>
                                {if $subcategory.description}
                                <div class="cat_desc">{$subcategory.description}</div>
                                 {/if}
				</div>
                              </li>
			{/foreach}
                      </ul>
                     </div>

This is the code I used to generate link to subcategory that I took from the default presta theme

<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">

I tried to add it in a few different ways, for example:

<!-- Subcategories modified code -->
                        <div id="subcategories">
                            <h4 class="subcategory-heading">{l s='Subcategories'}</h4>
                            <!-- <div class="subcategory-heading">{l s='Subcategories :'}</div> -->
                            <ul class="subcategories-list row">
                                {foreach from=$subcategories item=subcategory name=subcategory_item}
				<li class="subcategories-item col-xs-cus-12 col-xs-6 col-sm-4 col-lg-3 {if $smarty.foreach.subcategory_item.iteration%3 == 1} first-item {/if}">
                                <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">				
                                <div class="subcategory-container" {if $subcategory.id_image} style="background:url({$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')|escape:'html':'UTF-8'}) center no-repeat;  min-height:280px; min-width:200px;"{/if}>
                                <h5 class="subcategory-name"><a  href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:80:'...'|escape:'html':'UTF-8'|truncate:350}</a></h5>
                                {if $subcategory.description}
                                <div class="cat_desc">{$subcategory.description}</div>
                                 {/if}
				</div>
                                </a>
                              </li>
			{/foreach}
                      </ul>
                     </div>

I also tried to wrap it in different ways, but the effect is the same, the link is generated correctly and it is visible in the code, but it's not wrapping around the div. 

 

the page that i'm working on is www.agaterm.pl

 

Any help will be very appreciated.

 

thanks

 

Konrad.