Showing subcategories as simple list on default Prestashop template

[adi_2016]

Hi,

 

please see screenshot bellow

 

As you can see, I am trying to change default subcategories view in order to look like as simple list on default Prestashop template. Can anyone help me with this, I am stuck with this and cant go further.

 

Thank you very much in advance and best regards.
Adi

[rocky]

It should be pretty simple. Just comment out the parts of category that you don't need. For example, change lines 73-99 of themes/default-bootstrap/category.tpl to:

		{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, 'medium_default')|escape:'html':'UTF-8'}" alt="{$subcategory.name|escape:'html':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" />
						{else}
							<img class="replace-2x" src="{$img_cat_dir}{$lang_iso}-default-medium_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" />
						{/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'}*}{$subcategory.name|escape:'html':'UTF-8'}</a></h5>
{*					{if $subcategory.description}
						<div class="cat_desc">{$subcategory.description}</div>
					{/if}
*}				</li>
			{/foreach}
			</ul>
		</div>
        {/if}
		{/if}

Then you comment out the styles you don't want in themes/default-bootstrap/css/category.css and add ones to style it like in your screenshot. For example, replace the subcategories style with the following:

#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;*/
      background: #d6d6d6;
      width: 100%;
      text-align: center; }
     #subcategories ul li h5 { 
        margin: 3px 0; }
     #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*/ bold 14px "Open Sans", sans-serif;
        color: /*#555454*/ #000;
        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; }

[adi_2016]

Hi Rocky,

 

thank you very much for you post which helped me a lot!

 

It is very near to what I am getting at, and I also whish I could hide that "No image available part", but following your suggestions I will try to find that part via Firebug or similar and to figure out how to hite it in order to achieve result from screenshot.

 

All the best!
Adi

[rocky]

Commenting out from <div class="subcategory-image"> to the corresponding </div> should have removed the "No image available" images.