Vertical menu with CTLModuleMaker

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
Post Reply
macke
Forum Members
Forum Members
Posts: 14
Joined: Fri Feb 08, 2008 7:25 am

Vertical menu with CTLModuleMaker

Post by macke »

Hi all,
I have made a 2-level catalog module using CTLModuleMaker version 1.8.9.3. I´m using CMS Made Simple 1.8.2.

I´ve got a 3-column layout; leftCol, mainCol and a rightCol. I´m trying to accomplish a vertical menu in the left column that acts as a ordinary menu in CMSMS, and at the same time have another module template in the main column that shows the elements with some more information. Attaching an image to make things clearer:

Image (It´s in swedish)

In category list view, it shows the categories. In product list view it highlights the category in the menu and folds out the children elements. And in detail view, it highlights the selected element.

I call the module using:

Code: Select all

{cms_module module="varahus" what="kategori"}
where "kategori" beeing level-1.

This is placed in the {content} of the template.

This is how my module templates looks like.

list_category:

Code: Select all

{* Breadcrum and searchbar *}
<div id="breadcrumSearch">
    <div id="search">
        {search}
    </div>
    <div id="breadcrum">
        <b>Du är här: </b>{varahus_breadcrumbs root="Hem" delimiter=" / "}
    </div>
</div>
{* End Breadcrum and searchbar *}
        
{* Left column *}
<div id="leftCol">
    <div id="menu_vert">
        {if $itemcount > 0}
        <ul>
            {foreach from=$itemlist item="item"}
                <li><a href="{$item->detailurl}"><span>» {$item->name}</span></a></li>
            {/foreach}
        </ul>
        {/if}
    </div>
</div>
{* End Left column *}
        
{* Start main content *}
<div id="middleContent">
    <div id="houseCatalog" class="clearfix">
        <h1>{title}</h1>
        {if $itemcount > 0}
        <ul>
            {foreach from=$itemlist item="item"}
                <li class="{cycle values="category,category last"}">
                    <a href="{$item->detailurl}"><img src="{$item->cat_image->url}" /></a>
                    <h3>{$item->detaillink}</h3>
                    <p>{$item->description}</p>
                </li>
            {/foreach}
        </ul>
        {/if}
    </div>
</div>
{* End main content *}
list_product:

Code: Select all

{* Breadcrum and searchbar *}
<div id="breadcrumSearch">
    <div id="search">
        {search}
    </div>
    <div id="breadcrum">
        <b>Du är här: </b>{varahus_breadcrumbs root="Hem" delimiter=" / "}
    </div>
</div>
{* End Breadcrum and searchbar *}
        
{* Left column *}
<div id="leftCol">
    <div id="menu_vert">
        {if $itemcount > 0}
        <ul>
            {foreach from=$itemlist item="item"}
                <li><a href="{$item->detailurl}"><span>» {$item->name}</span></a></li>
            {/foreach}
        </ul>
        {/if}
    </div>
</div>
{* End Left column *}
        
{* Start main content *}
<div id="middleContent">
    <div id="houseCatalog" class="clearfix">
        <h1>{title}</h1>
        {if $itemcount > 0}
        <ul>
            {foreach from=$itemlist item="item"}
                <li class="{cycle values="category,category last"}">
                    <a href="{$item->detailurl}"><img src="{$item->prod_image->url}" /></a>
                    <h3>{$item->detaillink}</h3>
                    <p>{$item->description}</p>
                </li>
            {/foreach}
        </ul>
        {/if}
    </div>
    
{* get_template_vars *}
</div>
{* End main content *}
As you see I´ve put all three colomns in the module template. Not shure if this is the right way to go...

When I select a category and gets to product list, the left column menu only displays the child elements in the parent. This is where I want all of the level-1 parent elements to display, and the child elements to be shown under associated parent.

I couldn´t find a way to "reach" the level-1 items from the product list template. I´ve tried with different template setups and mockups, but at this point I´m stuck.

I´ve read the FAQ and the help section, searched the forums for any hints but so far only come up with a solution from the FAQ that displays all the elements sorted by parent. This works but the list gets very long.

I hope that I explained the problem well and attached the necessery information to get help, or get pointed in the right direction.

Thanks... (if you read this long) 
User avatar
plger
Forum Members
Forum Members
Posts: 196
Joined: Wed Oct 15, 2008 10:38 am

Re: Vertical menu with CTLModuleMaker

Post by plger »

Try putting your category menu outside of the {content} tag (in your page template or in a global content block).
Provided that the links are not inline, when you click on a category the category menu shouldn't change and the items of this category should replace the content tag.
plger
macke
Forum Members
Forum Members
Posts: 14
Joined: Fri Feb 08, 2008 7:25 am

Re: Vertical menu with CTLModuleMaker

Post by macke »

Thanks alot for the reply, i´ll give it a go and see how it works!
macke
Forum Members
Forum Members
Posts: 14
Joined: Fri Feb 08, 2008 7:25 am

Re: Vertical menu with CTLModuleMaker

Post by macke »

This was easier then I thougt. Very impressed by the flexability of the module, and CMSms itself.

I put the vertical menu in the layout template and left the items template in the {content} as you described.

The call from layout template:

Code: Select all

{cms_module module="varahus" what="kategori" listtemplate="vertical_menu"}
List template "vertical_menu"

Code: Select all

<ul>
	{foreach from=$itemlist item="item"}
		{if $item->is_selected == 1}
			<li class="menuactive menuparent"><a class="menuactive menuparent" href="{$item->detailurl}"><span>» {$item->name}</span></a>
				{cms_module module="varahus" parent=$item->name listtemplate="menu_products"}
			</li>
		{else}
			<li><a href="{$item->detailurl}"><span>» {$item->name}</span></a></li>
		{/if}
	{/foreach}
</ul>
List template "menu_products"

Code: Select all

<ul>
	{foreach from=$itemlist item="item"}
		{if $item->is_selected == 1}
			<li class="currentpage"><h3><span>» {$item->name}</span></h3></li>
		{else}
			<li><a href="{$item->detailurl}"><span>» {$item->name}</span></a></li>
		{/if}
	{/foreach}
</ul>
I didn´t know you could call the module within a module template. Love this feature.

There is one thing I haven´t manage to cope though; breadcrumbs. I´m calling the breadrumbs action from the layout template using this:

Code: Select all

{cms_module module="varahus" action="breadcrumbs" delimiter =" / " root="hem"}
Nothing is beeing displayed, not until you get to details view where this is getting displayed:

Code: Select all

You are here: Lofthus > Fårö 35-29
It disregards the delimiter and root parameters and doesn´t want to display the path until you get to details view??
macke
Forum Members
Forum Members
Posts: 14
Joined: Fri Feb 08, 2008 7:25 am

Re: Vertical menu with CTLModuleMaker

Post by macke »

Is there any solution to this? Would really appreciate if someone could give me a hand here...
Post Reply

Return to “Modules/Add-Ons”