Anda di sini: Beranda / E-Commerce / PrestaShop / Bagaimana Membuat Menu Induk Terpilih Ketika Menu Anak Dipilih di Module Blockcategories PrestaShop

Bagaimana Membuat Menu Induk Terpilih Ketika Menu Anak Dipilih di Module Blockcategories PrestaShop

Selasa, 24 November 2009 · Oleh 1 Komentar

Modifikasi berikut ini akan memberikan kemampuan untuk menyorot atau memilih menu induk ketika menu anak dipilih pada module blockcategories dari PrestShop. Modifikasi ini diterapkan untuk modifikasi awal yang dibuat oleh Marghoob Suleman pada topik di Forum Diskusi PrestaShop: [module-modified] categories menu modified. Anda dapat melihat demo hasilnya melalui situs: e-fila.com. Jika Anda ingin mengimplementasikan modifikasi ini, jangan lupa untuk membackup terlebih dulu file-file yang terkait.

  1. Buka file \modules\blockcategories\blockcategories.tpl, lalu timpa semua isinya dengan kode berikut:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

    {if $isCustomDhtml}
<script type="text/javascript" src="{$module_dir}ddsmoothmenu.js"></script>
<link href="{$module_dir}ddsmoothmenu.css" rel="stylesheet" type="text/css" media="all" />
{else}
<script type="text/javascript" src="{$js_dir}tools/treeManagement.js"></script>
{/if}
<!-- Block categories module -->
 
<div id="categories_block_left" class="block">
  <h4>{l s='Categories' mod='blockcategories'}</h4>
  {if $isCustomDhtml}
  <div id="smoothmenu1" class="ddsmoothmenu">
    <ul>
      {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>
  </div>
  {else}
  	<div class="block_content" style="margin:0;padding:0">
		<ul class="tree {if $isDhtml}dhtml{/if}" style="margin:0;padding:0">
		{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>
	</div>	
  {/if}
 
</div>
<!-- /Block categories module -->
  2. Buka file \modules\blockcategories\category-tree-branch.tpl, lalu timpa semua isinya dengan kode berikut ini:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

    <li style="margin:0;padding:0; " {if $last == 'true'}class="last"{/if}>
 
  <!-- Begin of modified by Masino Sinaga, August 16, 2009 -->	
	<a id="menu_{$node.children|@count}" style="padding:5px; padding-right:0;" href="{$node.link|escape:htmlall:'UTF-8'}"
	{if $node.id == $currentCategoryId} class="selected"{/if}{if $node.id == $currentParentId || $node.id == $currentRootId} class="previousselected"{/if}
	title="{$node.desc|escape:htmlall:'UTF-8'}">{$node.name|escape:htmlall:'UTF-8'}</a>
	<!-- End of modified by Masino Sinaga, August 16, 2009 -->
 
	{if $node.children|@count > 0}
 
		<!-- Begin of modified by Masino Sinaga, August 16, 2009 -->
		<ul {if $node.id == $currentCategoryId || $node.id == $currentParentId || $node.id == $currentRootId} class="selected"{/if}>
		<!-- End of modified by Masino Sinaga, August 16, 2009 -->
 
		{foreach from=$node.children item=child name=categoryTreeBranch}
			{if $smarty.foreach.categoryTreeBranch.last}
				{include file=$tpl_dir./category-tree-branch.tpl node=$child last='true'}
			{else}
	        		{include file=$tpl_dir./category-tree-branch.tpl node=$child last='false'}
			{/if}
		{/foreach}
		</ul>
	{/if}
</li>
  3. Buka file \modules\blockcategories\ddsmoothmenu.css, lalu timpa semua isinya dengan kode berikut ini:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

    /*
modified for prestashop
marghoob suleman - marghoobsuleman.com
*/
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
height:auto;
display:inline-block;
 
}
 
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
 
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: block;
width:100%;
float: left;
}
 
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #E9E9E9; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-bottom: 1px dashed #c3c3c3;
border-right: 1px solid #c3c3c3;
border-left: 1px solid #c3c3c3;
color: #374853;
text-decoration: none;
}
 
#smoothmenu1 li {
	padding: 0;
	list-style-position: outside;
	display:block;
}
 
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: block;
background: #FFAA55; /* #E9E9E9; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-bottom: 1px dashed #c3c3c3;
border-right: 1px solid #c3c3c3;
border-left: 1px solid #c3c3c3;
color: #374853;
text-decoration: none;
}
 
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: #374853;
display:block;
}
 
.ddsmoothmenu ul li a:hover{
background: #FFAA55; /* #B9D2E0; /*background of menu items during onmouseover (hover state)*/
text-decoration:none;
display:block;
}
 
.ddsmoothmenu ul li a.previousselected{ 
	font-weight:bold;
	background-color:#FFAA55; /* #0093f0; */ 
}
 
.ddsmoothmenu ul li a.selected{ 
	font-weight:bold;
	background-color:#FF7F00; /* #0093f0; */ 
}
 
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
 
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
 
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
 
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 178px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom:1px dashed #c3c3c3;
display:block;
}
 
/* ######### CSS classes applied to down and right arrow images  ######### */
 
.downarrowclass{
position: absolute;
top: 7px;
right: 7px;
}
 
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
 
/* ######### CSS for shadow added to sub menus  ######### */
 
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
 
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}
 
/* end menu css */
  4. Buka file \modules\blockcategories\ddsmoothmenu.js, dan cari kode ini:

    12
13

    //Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: {down:['downarrowclass', 'modules/blockcategories/right.gif', 23], right:['rightarrowclass', 'modules/blockcategories/right.gif']},

    lalu timpa dengan kode berikut:

    12
13

    //Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: {down:['downarrowclass', '{$module_dir}right.gif', 23], right:['rightarrowclass', '{$module_dir}right.gif']},

    Cari lagi kode yang ini:

    75

    					$targetul.css({top:0+"px", left:(this._dimensions.subulw)+"px", width:this._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime)

    lalu timpa dengan kode berikut:

    75
76

    					//$targetul.css({top:0+"px", left:(this._dimensions.subulw)+"px", width:this._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime)
					$targetul.css({top:0+"px", left:(this._dimensions.subulw)+"px", width:this._dimensions.subulw+'px', display:'block'});

    Cari lagi kode yang ini:

    84

    						this.$shadow.css({overflow:'', width:this._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:this._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)

    kemudian timpa dengan kode berikut:

    84
85

    						//this.$shadow.css({overflow:'', width:this._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:this._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)
						this.$shadow.css({overflow:'', width:this._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px', height:this._dimensions.subulh+'px', display:'block'})

    Cari kode ini:

    89

    				$targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime)

    lalu timpa dengan kode berikut:

    89
90

    				//$targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime)
				$targetul.css({display:'none'});

    Cari lagi kode yang ini:

    94

    					this.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime)

    lalu timpa dengan kode berikut ini:

    94
95
96

    					//this.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime)
					//alert(this.$shadow + " " + this.$shadow.id);
					this.$shadow.css({display:'none'});

    Cari lagi kode ini:

    99

    	$mainmenu.find("ul").css({display:'none', visibility:'visible'})

    lalu timpa dengan kode berikut:

    99

    	$($mainmenu).find("ul").css({display:'none', visibility:'visible'});

Semoga bermanfaat.

Share
Ditempatkan di bawah: PrestaShop Ditag Dengan: , , , , , , , ,

4,866 kali dibacaCetak Artikel Ini Cetak Artikel Ini

Komentar

  1. Hauke mengatakan:
    Thursday, 10 March 2011 pada 21:56:00

    Hi!

    This Code looks amaizing. Im looking for something smaller, but somehow its similar. Do you have an idea (or link) for the following: If someones opens a “+” on the menu (means: opens a “submenu”), all other opened “+” should be closed. so that only one submenu is expanded at each time.
    example

    category1
    – 1.submenu of category1
    – 2.submenu of category1
    – 3.submenu of category1
    category2
    – 1.submenu of category2
    – 2.submenu of category2
    – 3.submenu of category2

    so, if someones clicks on 2. submenu of category1 and later opens the 2.submenu of category2 the stutt from the first one should be closed and only the second category submenus should be visible :)

    sorry for my bad english :)

    hope you can held with ideas, links or something like this! :)

    Reply

Utarakan pikiran Anda

*

Gambar CAPTCHA

*