[MODULE] Block Categories - Change it to support default Vertical Superfish Menu

October 27, 2012

Hello,

I'm sharing with you very simple small tip how you can add to block_categories_menu default supperfish vertical menu from the block_top_menu. You learn a basic functionality and to fit it with your theme you might continue to work with your css files. The basic idea of this small tip is that you don't need to buy or upload any new files. We use the files that we already have in system. This works for new Prestashop 1.5.x.

/modules/blockcategories/category-tree-branch.tpl

@line 28

#1 tip: to disable or turn off onmouseover tooltip block categories <a> tag link remove this: title="{$node.desc|escape:'htmlall':'UTF-8'}"

<a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if}>{$node.name|escape:'htmlall':'UTF-8'}</a>

#2 tip: to show names of categories instead of description in onmouseover tooltips block categories <a> tag change to: title="{$node.name|escape:'htmlall':'UTF-8'}"

<a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if} title="{$node.name|escape:'htmlall':'UTF-8'}">{$node.name|escape:'htmlall':'UTF-8'}</a>

---

/modules/blockcategories/blockcategories.tpl

@line 31

add new class "sf-vertical" after "sf-menu":

<ul class="tree sf-menu sf-vertical clearfix sf-js-enabled sf-shadow">

---

/modules/blocktopmenu/css/superfish-modified.css

add these lines at the end of file:

/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/

.sf-vertical, .sf-vertical li {
width: 200px;
background: transparent url(../img/bg_blocktopmenu.png) repeat 0 0; /* change this if you want to play with background color */
/*background: #999;*/
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
left: 200px; /* match ul width */
top: 0;
}

/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/

/* hover arrow direction for modern browsers*/
.sf-vertical a:focus > .sf-sub-indicator,
.sf-vertical a:hover > .sf-sub-indicator,
.sf-vertical a:active > .sf-sub-indicator,
.sf-vertical li:hover > a > .sf-sub-indicator,
.sf-vertical li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** this will remove margin-left from global.css to display submenu ***/
#categories_block_left li ul {margin-left:0 !important;}

December 9, 2012

Very useful. Thank you.

January 18, 2013

Thx !

Edited February 24, 2013 by eloddevil (see edit history)

February 4, 2013

danke my friend

February 24, 2013

Thanks a lot for sharing. I was looking for something like this. Thanks again

February 25, 2013

Thx !

Hi Friend,

Can u provide me the modified files as I am unable to understand exactly what I have to modify to make this kind of module.

Thanks

June 7, 2013

Hello,

I'm having problems in editing the file

/modules/blockcategories/blockcategories.tpl

I cannot find in it the line <ul class="tree sf-menu sf-vertical clearfix sf-js-enabled sf-shadow"> but what I find is only

<ul class="tree {if $isDhtml}dhtml{/if}">

.

Is it because I'm using the last version of Prestashop 1.5.4.1? Can anyone help me?

Thank you

June 17, 2013

Very useful. Thanks

June 24, 2013

i did as you said but it doesn't work... actually the css name does not change at all.. even if i changed it in the file.. need help plz...

June 24, 2013

i just needed off the cache and its there thanks a lott

July 3, 2013

Take a look on my menu: http://addons.prestashop.com/en/front-office-features-prestashop-modules/81[spam-filter]vertical-menu.html

July 7, 2013

...............

Edited February 26, 2014 by Sissel (see edit history)

September 13, 2013

I want this for 1.4 ------- please help

December 13, 2013

Tnx a lot, it's great

January 15, 2014

really thanks i was searching the web almost 7hours for free module which can do this for me

February 22, 2014

Thanks! Work with 1.5.6.1

May 8, 2014

In 1.6 there are few block categories file:

blockcategories.tpl

{*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 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/afl-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-2014 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
{if $blockCategTree && $blockCategTree.children|@count}
<!-- Block categories module -->
<div id="categories_block_left" class="block">
	<h4 class="title_block">{if isset($currentCategory)}{$currentCategory->name|escape}{else}{l s='Categories' mod='blockcategories'}{/if}</h4>
	<div class="block_content">
		<ul class="tree {if $isDhtml}dhtml{/if}">
		{foreach from=$blockCategTree.children item=child name=blockCategTree}
			{if $smarty.foreach.blockCategTree.last}
				{include file="$branche_tpl_path" node=$child last='true'}
			{else}
				{include file="$branche_tpl_path" node=$child}
			{/if}
		{/foreach}
		</ul>
		{* Javascript moved here to fix bug #PSCFI-151 *}
		<script type="text/javascript">
		// <![CDATA[
			// we hide the tree only if JavaScript is activated
			$('div#categories_block_left ul.dhtml').hide();
		// ]]>
		</script>
	</div>
</div>
<!-- /Block categories module -->
{/if}

blockcategories_top.tpl

{*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 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/afl-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-2014 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}

<!-- Block categories module -->
<div id="categories_block_top">
	<div class="category_top">
		<div class="list">
			<ul class="tree {if $isDhtml}dhtml{/if} sf-menu sf-js-enabled clearfix">

			{foreach from=$blockCategTree.children item=child name=blockCategTree}				

				{if $smarty.foreach.blockCategTree.last}
					{include file="$branche_tpl_path" node=$child last='true'}
				{else}
					{include file="$branche_tpl_path" node=$child}
				{/if}

				{if isset($blockCategTree.thumbnails) && $blockCategTree.thumbnails|count > 0}
					<div id="category-thumbnails">
					{foreach $blockCategTree.thumbnails as $thumbnail}
						<div>{$thumbnail}</div>
					{/foreach}
					</div>
				{/if}
			
				{if ($smarty.foreach.blockCategTree.iteration mod $numberColumn) == 0 AND !$smarty.foreach.blockCategTree.last}
			</ul>
		</div>
	</div>

	<div class="category_footer" style="float:left;clear:none;width:{$widthColumn}%">
			<div style="float:left" class="list">
			<ul class="tree {if $isDhtml}dhtml{/if}">
				{/if}
				{/foreach}
			</ul>
		</div>
	</div>
	<br class="clear"/>
</div>
<!-- /Block categories module -->

where do I make the changes?

Edited May 8, 2014 by kin0kin (see edit history)

June 25, 2014

hi

in case someone need more professional vertical mega menu

http://www.estyle.in/prestashop/index.php

http://store1.in/index.php

More details here

http://www.prestashop.com/forums/topic/326234-mega-menu-amazon-style/?do=findComment&comment=1679379

October 8, 2014

In 1.6 there are few block categories file:

blockcategories.tpl

{*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 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/afl-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-2014 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
{if $blockCategTree && $blockCategTree.children|@count}
<!-- Block categories module -->
<div id="categories_block_left" class="block">
	<h4 class="title_block">{if isset($currentCategory)}{$currentCategory->name|escape}{else}{l s='Categories' mod='blockcategories'}{/if}</h4>
	<div class="block_content">
		<ul class="tree {if $isDhtml}dhtml{/if}">
		{foreach from=$blockCategTree.children item=child name=blockCategTree}
			{if $smarty.foreach.blockCategTree.last}
				{include file="$branche_tpl_path" node=$child last='true'}
			{else}
				{include file="$branche_tpl_path" node=$child}
			{/if}
		{/foreach}
		</ul>
		{* Javascript moved here to fix bug #PSCFI-151 *}
		<script type="text/javascript">
		// <![CDATA[
			// we hide the tree only if JavaScript is activated
			$('div#categories_block_left ul.dhtml').hide();
		// ]]>
		</script>
	</div>
</div>
<!-- /Block categories module -->
{/if}

blockcategories_top.tpl

{*
* 2007-2014 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 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/afl-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-2014 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}

<!-- Block categories module -->
<div id="categories_block_top">
	<div class="category_top">
		<div class="list">
			<ul class="tree {if $isDhtml}dhtml{/if} sf-menu sf-js-enabled clearfix">

			{foreach from=$blockCategTree.children item=child name=blockCategTree}				

				{if $smarty.foreach.blockCategTree.last}
					{include file="$branche_tpl_path" node=$child last='true'}
				{else}
					{include file="$branche_tpl_path" node=$child}
				{/if}

				{if isset($blockCategTree.thumbnails) && $blockCategTree.thumbnails|count > 0}
					<div id="category-thumbnails">
					{foreach $blockCategTree.thumbnails as $thumbnail}
						<div>{$thumbnail}</div>
					{/foreach}
					</div>
				{/if}
			
				{if ($smarty.foreach.blockCategTree.iteration mod $numberColumn) == 0 AND !$smarty.foreach.blockCategTree.last}
			</ul>
		</div>
	</div>

	<div class="category_footer" style="float:left;clear:none;width:{$widthColumn}%">
			<div style="float:left" class="list">
			<ul class="tree {if $isDhtml}dhtml{/if}">
				{/if}
				{/foreach}
			</ul>
		</div>
	</div>
	<br class="clear"/>
</div>
<!-- /Block categories module -->

where do I make the changes?

This would be great if someone would help for 1.6.

January 27, 2015

Hello,

I'm sharing with you very simple small tip how you can add to block_categories_menu default supperfish vertical menu from the block_top_menu. You learn a basic functionality and to fit it with your theme you might continue to work with your css files. The basic idea of this small tip is that you don't need to buy or upload any new files. We use the files that we already have in system. This works for new Prestashop 1.5.x.

/modules/blockcategories/category-tree-branch.tpl

@line 28

#1 tip: to disable or turn off onmouseover tooltip block categories <a> tag link remove this: title="{$node.desc|escape:'htmlall':'UTF-8'}"
<a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if}>{$node.name|escape:'htmlall':'UTF-8'}</a>
#2 tip: to show names of categories instead of description in onmouseover tooltips block categories <a> tag change to: title="{$node.name|escape:'htmlall':'UTF-8'}"
<a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if} title="{$node.name|escape:'htmlall':'UTF-8'}">{$node.name|escape:'htmlall':'UTF-8'}</a>
---

/modules/blockcategories/blockcategories.tpl

@line 31

add new class "sf-vertical" after "sf-menu":
<ul class="tree sf-menu sf-vertical clearfix sf-js-enabled sf-shadow">
---

/modules/blocktopmenu/css/superfish-modified.css

add these lines at the end of file:
/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/

.sf-vertical, .sf-vertical li {
width: 200px;
background: transparent url(../img/bg_blocktopmenu.png) repeat 0 0; /* change this if you want to play with background color */
/*background: #999;*/
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
left: 200px; /* match ul width */
top: 0;
}

/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/

/* hover arrow direction for modern browsers*/
.sf-vertical a:focus > .sf-sub-indicator,
.sf-vertical a:hover > .sf-sub-indicator,
.sf-vertical a:active > .sf-sub-indicator,
.sf-vertical li:hover > a > .sf-sub-indicator,
.sf-vertical li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** this will remove margin-left from global.css to display submenu ***/
#categories_block_left li ul {margin-left:0 !important;}

Will this work on PS 1.6+

March 23, 2015

Thank you for your sharing..

But this is not working in prestashop_1.6.0.13 could you please help me on this...

[MODULE] Block Categories - Change it to support default Vertical Superfish Menu

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Important Information