Jump to content
esterflore1@yhoo.it

prestashop 1.7 subcategories images

Recommended Posts

Hello, 

in prestashop 1.7, in the category page, how can I show the subcategories images under the category image? Now I only have the subcategory list in the left column.

Thanks

Ester

Share this post


Link to post
Share on other sites

detailed step by step guide is here: subcategories on category page

 

go to /themes/classic/templates/catalog/listing/category.tpl 

 

change its code to:

{**
 * 2007-2016 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2016 PrestaShop SA
 * @license   http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
    <div class="block-category card card-block hidden-sm-down">
      <h1 class="h1">{$category.name}</h1>
      {if $category.description}
        <div id="category-description" class="text-muted">{$category.description nofilter}</div>
        <div class="category-cover">
          <img src="{$category.image.large.url}" alt="{$category.image.legend}">
        </div>
      {/if}
    </div>
    <div class="text-xs-center hidden-md-up">
      <h1 class="h1">{$category.name}</h1>
    </div>
		{if isset($subcategories)}
        {if (isset($display_subcategories) && $display_subcategories eq 1) || !isset($display_subcategories) }
		<!-- Subcategories -->
		<div id="subcategories">
			<p class="subcategory-heading">{l s='Subcategories'}</p>
			<ul class="clearfix">
			{foreach from=$subcategories item=subcategory}
				<li>
                	<div class="subcategory-image">
						<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
						{if $subcategory.id_image}
							<img class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category_default')|escape:'html':'UTF-8'}" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />
						{else}
							<img class="replace-2x" src="{$img_cat_dir}{$lang_iso}-default-category_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />
						{/if}
					</a>
                   	</div>
					<h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}</a></h5>
					{if $subcategory.description}
						<div class="cat_desc">{$subcategory.description}</div>
					{/if}
				</li>
			{/foreach}
			</ul>
		</div>
        {/if}
		{/if}
{/block}

and to /themes/classic/templates/assets/css/theme.css file and at the end paste these styles:
 


/* ************************************************************************************************
									Sub Categories Styles
************************************************************************************************ */
#subcategories {
  border-top: 1px solid #d6d4d4;
  padding: 15px 0 0px 0; }
  #subcategories p.subcategory-heading {
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0; }
  #subcategories ul {
    margin: 0 0 0 -20px; }
    #subcategories ul li {
      float: left;
      width: 145px;
      margin: 0 0 13px 33px;
      text-align: center;
      height: 202px; }
      #subcategories ul li .subcategory-image {
        padding: 0 0 8px 0; }
        #subcategories ul li .subcategory-image a {
          display: block;
          padding: 9px;
          border: 1px solid #d6d4d4; }
          #subcategories ul li .subcategory-image a img {
            max-width: 100%;
            vertical-align: top; }
      #subcategories ul li .subcategory-name {
        font: 600 18px/22px "Open Sans", sans-serif;
        color: #555454;
        text-transform: uppercase; }
        #subcategories ul li .subcategory-name:hover {
          color: #515151; }
      #subcategories ul li .cat_desc {
        display: none; }
      #subcategories ul li:hover .subcategory-image a {
        border: 5px solid #333;
        padding: 5px; }

effect:
Ow6c8RU.png

  • Like 1

Share this post


Link to post
Share on other sites

Had to remove names, because of length :) 

 

Update? :)

 

can you share url please? i will change css to support names properly :-)

 

if you want to remove name just remove this:

 

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

Share this post


Link to post
Share on other sites

I copied and pasted suggested script but for some reason is not showing correctly

post-400285-0-73056000-1483746201_thumb.png

Share this post


Link to post
Share on other sites

I copied and pasted suggested script but for some reason is not showing correctly

 

if you copied css styles as it is described in the guide, please clear browser cache - there is a chance that your browser remember old .css file you modified (so dont see the changes you applied)

Share this post


Link to post
Share on other sites

hey no worries, its a common problem

many of us forget to clean browser cache and pulling hair out then ;-)

Share this post


Link to post
Share on other sites

I changed the settings back due to the issues I was having

I have subcategories with rather long descriptions and they were showing the source code

Share this post


Link to post
Share on other sites

I changed the settings back due to the issues I was having

I have subcategories with rather long descriptions and they were showing the source code

exactly as i replied in my previous messages - clear browser cache

your browser remember old css file so in effect you see it without proper layout.

Share this post


Link to post
Share on other sites

Thank you. The cache issue was not in the browser but in prestashop. I was able to clear it and now it is displaying correctly.

Share this post


Link to post
Share on other sites

im not sure about the issue

i checked the page and i dont see there anything strange

Share this post


Link to post
Share on other sites

Hello there,

I saw this post while looking for a solution to my problem => display the parent category image when a sub category doesnt have its own image.

Can someone help me ?

Thanks in advance. :)

 

Nevermind, i found a way ^^

{url entity='categoryImage' id=$category.id_parent name='$category.name'}
Edited by Rob45

Share this post


Link to post
Share on other sites
On 2017/4/14 at 3:36 PM, vekia said:

im not sure about the issue

i checked the page and i dont see there anything strange

Hi Vekia!

When these codes are used to Prestashop version 1.7.2.4, all the buttons are changed to square blocks and the shopping cart looks very strange. Can you please take a look and tell me the solution? I attach here screenshot from my web shop giftify.se. / thanks

01.png

Share this post


Link to post
Share on other sites

Hi there!

With this code i having the same issue like last post, because the img url of the categories points to a wrong directory...

The cod its:

src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category_default')|escape:'html':'UTF-8'}"

 but, for me shows:

src="http://www.URL.com/c/es-default-category_default/quimicos.jpg"

There is not a "c" directory on the root, and the thumbnails on the administrator, in the categories, show the img in a temp directory:

http://www.avencarlink.com/img/tmp/category_10-thumb.jpg?time=1532695241

Any ideas about what could happen?

 

Working with 1.7.3.3

 

Thanks!

Edited by sallen_acs

Share this post


Link to post
Share on other sites

hallo vekia, i have some isue, but your solution only for prestashop 1.7 
can you give me solution for prestashop 1.6.1 ??

thanks before

 

Edited by harrisatria

Share this post


Link to post
Share on other sites

@vekia - thanks a lot for this solution. A couple of issues I've encountered -

first, the category image in your code takes the category cover image, which might have different size than the thumb image that supposed to be shown under the parent category. I changed the category_default into small_default and it seems to work as expected.

The other issue I encounter is that the <div class="cat_desc">{$subcategory.description}</div> pulls into it automatically <p> tags (which are actually rendered in the description). Any way to prevent this?

 

Share this post


Link to post
Share on other sites

Hi vekia!

Thanks your code!

Even if a category has no subcat the Subcategories text is there, what can be the problemo?

Képkivágás.JPG

Share this post


Link to post
Share on other sites

Hi, 

in mobile version of my shop it doesnt show names properly. Can you help me?

Also I want to show 2 rows with product in mobile version, it is possible?

Link: shop.streetbtch.eu

Thanks 

Share this post


Link to post
Share on other sites

@sallen_acs did you manage to solve the problem with the images??? I'm getting the exact same error and I get no images displayed. With the same kind of URLs generated as you got.

Thanks in advance

Share this post


Link to post
Share on other sites

@sallen_acs just in case you still didn't get it right, I found the correct naming for images on Prestashop 1.7.2 (possibly it works on 1.7.3 and higher):

<img class="replace-2x" src="{$urls.base_url}img/c/{$subcategory.id_category}-small_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />
  • Like 1

Share this post


Link to post
Share on other sites
4 hours ago, xarly89 said:

@sallen_acs just in case you still didn't get it right, I found the correct naming for images on Prestashop 1.7.2 (possibly it works on 1.7.3 and higher):


<img class="replace-2x" src="{$urls.base_url}img/c/{$subcategory.id_category}-small_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />

@xarly89 thanks for your answer mate! i solve it time ago, but really i dont remeber how or in what proyect.

In case that your solution will not work, tellme and i try to find it.

Regards

Share this post


Link to post
Share on other sites
On 1/3/2017 at 12:13 AM, vekia said:

 

can you share url please? i will change css to support names properly 🙂

 

if you want to remove name just remove this:

 


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

How to change css to support names properly? :) thanks

 

SOLVED

Edited by yarekyarek
SOLVED

Share this post


Link to post
Share on other sites

I digged the solution out for my question:

use this:

{if $subcategories|count}
            <p class="subcategory-heading">{l s='Subcategories'}</p>
          {/if}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More