Jump to content

Subcategories with Block Layered Navigation


Recommended Posts

We added a checkbox sub-categories filter to our block layered navigation with two levels depth.

 

The problem we are facing is that there is no space added for the second level, so categories from the first and second level are align all together. There is also no unique selector that distinguish the parent category from the child category that we could use to style the list.

 

We created a small script that looked for the content of each link element in the list to check if its an integer (our child categories only contains numbers) and then add a new class to style them. It is not a great solution since we have other layered navigation on our site which would not work with this solution.

 

Is this a normal behavior for the block layered navigation module and does anyone found a solution for this problem?

 

We are using Prestashop 1.5.2.0

 

Here is a screenshot in inspect element of a parent and child <li> elements from our navigation.

 

post-410090-0-26147200-1374156419_thumb.jpg

 

Thanks

  • Like 1
Link to comment
Share on other sites

Prestashop 1.5.4.1

 

Hi

 

We had a similar issue. We wanted to display csub-categories and their parents, but not have the parents with a checkbox beside them. It involved a hack to blocklayered.php (can't override modules)and blocklayered.tpl, so that the parents are shown as h4 tags rather than li tags. Styling the h4 then allowed to indent and differentiate between parent and child categories.

 

Cheers

  • Like 1
Link to comment
Share on other sites

Hi

 

In blocklayered.php modify the code to look like below (from line 3114). I know that you shouldn't hard-code values within the code, but if you have a limited number of categories it's reasonable.

 

   case 'category':
 $tmp_array = array();
 if (isset($products) && $products)
 {
  $categories_with_products_count = 0;
				    $prev_parent = 0;

  foreach ($products as $category)
  {
	  $child = 'N';

					    // Change code here to pass back the parent if one present.

					    if ($category['name'] == 'Capacity' || $category['name'] == 'Camping Type' || $category['name'] == 'Tent Range')
					    {
						    $child = 'N';
						    $prev_parent = $category['id_category'];
					    } else {
						    $child = 'Y';
					    }

   $tmp_array[$category['id_category']] = array(
    'name' => $category['name'],
    'nbr' => (int)$category['count_products'], 'child' => $child
   );

   if ((int)$category['count_products'])
    $categories_with_products_count++;

   if (isset($selected_filters['category']) && in_array($category['id_category'], $selected_filters['category']))
    $tmp_array[$category['id_category']]['checked'] = true;
  }

  if ($categories_with_products_count || !Configuration::get('PS_LAYERED_HIDE_0_VALUES'))
   $filter_blocks[] = array (
    'type_lite' => 'category',
    'type' => 'category',
    'id_key' => 0, 'name' => $this->l('Categories'),
    'values' => $tmp_array,
    'filter_show_limit' => $filter['filter_show_limit'],
    'filter_type' => $filter['filter_type']
   );
 }
 break;

 

The key code lines are the reference to $prev_parent and $child variables as the $child variable is included in the $tmp_array passed to the .tpl. file.

 

 

Within blocklayered.tpl from line 93 approx:

    {foreach from=$filter.values key=id_value item=value name=fe}
							 {if $value.child == 'N'}
								  <h4 class="cathead">{$value.name}</h4>
							    {else}
	 {if $value.nbr || !$hide_0_values}
		 <li class="nomargin {if $smarty.foreach.fe.index >= $filter.filter_show_limit}hiddable{/if}">
	  {if isset($filter.is_color_group) && $filter.is_color_group}
	   <input class="color-option {if isset($value.checked) && $value.checked}on{/if} {if !$value.nbr}disable{/if}" type="button" name="layered_{$filter.type_lite}_{$id_value}" rel="{$id_value}_{$filter.id_key}" id="layered_id_attribute_group_{$id_value}" {if !$value.nbr}disabled="disabled"{/if} style="background: {if isset($value.color)}{if file_exists($smarty.const._PS_ROOT_DIR_|cat:"/img/co/$id_value.jpg")}url(img/co/{$id_value}.jpg){else}{$value.color}{/if}{else}#CCC{/if};" />
	   {if isset($value.checked) && $value.checked}<input type="hidden" name="layered_{$filter.type_lite}_{$id_value}" value="{$id_value}" />{/if}
	  {else}
	   <input type="checkbox" class="checkbox" name="layered_{$filter.type_lite}_{$id_value}" id="layered_{$filter.type_lite}{if $id_value || $filter.type == 'quantity'}_{$id_value}{/if}" value="{$id_value}{if $filter.id_key}_{$filter.id_key}{/if}"{if isset($value.checked)} checked="checked"{/if}{if !$value.nbr} disabled="disabled"{/if} />
	  {/if}
	  <label for="layered_{$filter.type_lite}_{$id_value}"{if !$value.nbr} class="disabled"{else}{if isset($filter.is_color_group) && $filter.is_color_group} name="layered_{$filter.type_lite}_{$id_value}" class="layered_color" rel="{$id_value}_{$filter.id_key}"{/if}{/if}>
	   {if !$value.nbr}
	   {$value.name|escape:html:'UTF-8'}{if $layered_show_qties}<span> ({$value.nbr})</span>{/if}
	   {else}
	   <a href="{$value.link}" rel="{$value.rel}">{$value.name|escape:html:'UTF-8'}{if $layered_show_qties}<span> ({$value.nbr})</span>{/if}</a>
	   {/if}
	  </label>
	    </li>
	 {/if}
	 {/if}

    {/foreach}

 

Style your h4 tag in the global.css for your theme:

form#layered_form div div ul {overflow: visible !important; max-height: 700px;}
h4.cathead {margin: 10px 0 5px 0; font-weight: bold;}
h4.catline {margin: 0 0 0 0; padding: 0;}
.layered_subtitle {font-weight: bold; text-transform: uppercase;}

 

You should be good to go. Remember to force compilation of template cache to refresh the theme in order to see your changes.

 

Cheers

  • Like 1
Link to comment
Share on other sites

  • 8 months later...
  • 2 years later...

Bump. Any idea how to get this working on Prestashop 1.6.11 ? Changing the files does not seem to have any effect (after clearing the cache and force recompilation).

 

This or any other technique would be really helpful! 

 

Thanks

 

 

EDIT: I even get no errors after changing the code.. Any help would be appreciated!

Edited by JackiiBE (see edit history)
Link to comment
Share on other sites

  • 6 months later...
  • 1 year later...

HI

here's the solution for PS 1.6.x.x

1°) file /modules/blocklayered/blocklayered.php into fonction function getFilterBlock()

line 2679 replace :
case 'category':
    $tmp_array = array();
    if (isset($products) && $products)
    {
        $categories_with_products_count = 0;
        foreach ($products as $category)
        {
            $tmp_array[$category['id_category']] = array(
                'name' => $category['name'],
                'nbr' => (int)$category['count_products']
            );

            if ((int)$category['count_products'])
                $categories_with_products_count++;

            if (isset($selected_filters['category']) && in_array($category['id_category'], $selected_filters['category']))
                $tmp_array[$category['id_category']]['checked'] = true;
        }
        if ($categories_with_products_count || !Configuration::get('PS_LAYERED_HIDE_0_VALUES'))
            $filter_blocks[] = array (
                'type_lite' => 'category',
                'type' => 'category',
                'id_key' => 0, 'name' => $this->l('Categories'),
                'values' => $tmp_array,
                'filter_show_limit' => $filter['filter_show_limit'],
                'filter_type' => $filter['filter_type']
            );
    }
    break;

by :
case 'category':
    $tmp_array = array();
    $tmp_prod = $products;
    foreach ($products as &$category) {
        foreach ($tmp_prod as $cat) {
            if ($cat['id_category'] == $category['id_parent']) {
                $category['isChildren'] = true;
            }
        }
    }
    if (isset($products) && $products)
    {
        $categories_with_products_count = 0;
        foreach ($products as &$category)
        {
            $tmp_array[$category['id_category']] = array(
                'name' => $category['name'],
                'nbr' => (int)$category['count_products']
            );

            if ((int)$category['count_products'])
                $categories_with_products_count++;

            if (isset($selected_filters['category']) && in_array($category['id_category'], $selected_filters['category']))
                $tmp_array[$category['id_category']]['checked'] = true;
            if (isset($category['isChildren']))
                $tmp_array[$category['id_category']]['isChildren'] = true;
        }
        if ($categories_with_products_count || !Configuration::get('PS_LAYERED_HIDE_0_VALUES'))
            $filter_blocks[] = array (
                'type_lite' => 'category',
                'type' => 'category',
                'id_key' => 0, 'name' => $this->l('Categories'),
                'values' => $tmp_array,
                'filter_show_limit' => $filter['filter_show_limit'],
                'filter_type' => $filter['filter_type']
            );
    }
    break;

2°) File /themes/theme/modules/blocklayered/blocklayered.tpl

Replace :
<li class="nomargin {if $smarty.foreach.fe.index >= $filter.filter_show_limit}hiddable{/if} col-lg-12">
by:
<li class="nomargin {if $smarty.foreach.fe.index >= $filter.filter_show_limit}hiddable{/if} {if isset($value.isChildren) && $value.isChildren}isChildren{/if} col-lg-12">

and Replace :
<li class="nomargin {if $smarty.foreach.fe.index >= $filter.filter_show_limit}hiddable{/if}">
by :
<li class="nomargin {if $smarty.foreach.fe.index >= $filter.filter_show_limit}hiddable{/if} {if isset($value.isChildren) && $value.isChildren}isChildren{/if}">

3°) File /themes/theme/css/modules/blocklayered/blocklayered.css

Add :
#layered_block_left ul li.isChildren {
    padding-left: 20px;
}

4°) clear all cache PS and Browser

5°) Enjoy

@++ Loulou66

Edited by loulou66 (see edit history)
Link to comment
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
×
×
  • Create New...