Page 1 of 1

Vertical menu with CTLModuleMaker

Posted: Wed Sep 29, 2010 3:41 pm
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) 

Re: Vertical menu with CTLModuleMaker

Posted: Thu Sep 30, 2010 5:16 pm
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

Re: Vertical menu with CTLModuleMaker

Posted: Thu Sep 30, 2010 6:32 pm
by macke
Thanks alot for the reply, i´ll give it a go and see how it works!

Re: Vertical menu with CTLModuleMaker

Posted: Fri Oct 01, 2010 11:52 am
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??

Re: Vertical menu with CTLModuleMaker

Posted: Fri Oct 08, 2010 5:42 pm
by macke
Is there any solution to this? Would really appreciate if someone could give me a hand here...