X-Cart forums

[anandat]

It's possible to expand category menu OnClick through some piece of Javascript code ?
I have a long list of root categories so this small modification is needed very badly.

Any one can help me please?

[totaltec]

If I am understanding what you want to do, then this should work for you:
http://jsfiddle.net/jbabey/kSQfy/1/

[anandat]

Thanks Mike for providing the solution. Can you please tell me exactly what code & in which template while & where to use this code to achieve the results?

[totaltec]

That is going to depend on your skin. You are using ideal_comfort so I would make all the changes in that skin directory. You should be a able to copy the code below, and simply paste it into a new template file that you create.

In this case I created: /ideal_responsive/customer/categories.tpl

You would likely create: /ideal_comfort/customer/categories.tpl

I took some time and tested this out, for now you can see it working at my test site: http://trainingpen.com/

I've modified the script to show and hide the div, clicking the link will expand and collapse. I also commented out the unnecessary part that hid other divs.

{*
df14bc9e9dec4a3332552facb2c31eaaf22d39a2, v5 (xcart_4_4_2), 2010-12-17 15:12:37, categories.tpl, aim
vim: set ts=2 sw=2 sts=2 et:
*}
<script type="text/javascript">
{literal}
$(document).ready(function() {
    $('a.title').click(function() {
        var correspondingDiv = $(this).parent().next('div');
        
        if (!correspondingDiv.is(':hidden')) {
            correspondingDiv.hide(150);
            return;
        }
        
        // hide other divs
        //$('.workdiv').hide(150);
        
        // show this one
        correspondingDiv.toggle(150);
    }); 
}); 
{/literal}
</script>
<div>
<a href="#" id="1" class="title" name="1"><h2>Expand Categories</h2></a>
</div>
<div id="workdiv1" class="workdiv" style="display:none">
{if $categories_menu_list ne '' or $fancy_use_cache}
{capture name=menu}

{if $active_modules.Flyout_Menus}

  {include file="modules/Flyout_Menus/categories.tpl"}
  {assign var="additional_class" value="menu-fancy-categories-list"}

{else}

  <ul>
    {foreach from=$categories_menu_list item=c name=categories}
      <li{interline name=categories}><a href="home.php?cat={$c.categoryid}" title="{$c.category|escape}">{$c.category|amp}</a></li>
    {/foreach}
  </ul>

  {assign var="additional_class" value="menu-categories-list"}

{/if}

{/capture}
{include file="customer/menu_dialog.tpl" title=$lng.lbl_categories content=$smarty.capture.menu}
{/if}
</div>

If you feel I have earned it, you can thank me with a PayPal payment to mike@babymonkeystudios.com

[anandat]

Hi Mike,
Thanks a lot for the code. This is the solution I was looking for.
How ever there are small issues.

1)Since the "categories" menu is replaced by link "expand categories" it does not look good & it will tough for the customers to find out that link. The ideal solution would be it should display category menu with 5 categories link & then it should display link "expand categories" or "See More".

2) Also there is one small issue exists. Just click on "expand categories" now click on any category link so you be taken to that particular category page. Now again click to "expand categories" & you will see it will take you to the home page !

Note: This issue does not exists at your demo site.

I am not sure what is the correct way to implement this code but I have done following steps to integrate the code. I am using ideal comfort template.

1) I saved your code at as \skin\common_files\customer\categories_new.tpl
2) I opened skin\ideal_comfort\customer\left_bar.tpl & replaced
the code {include file="customer/categories.tpl"} with {include file="customer/categories_new.tpl"}

I hope it's correct.

[totaltec]

Anandat,
You're welcome. This could certainly be done, but would require more effort. The changes you made sound correct, I don't know why
it is not behaving the same for you. Perhaps try to save categories.tpl as a .bak file, and them place the changes in that file directly? Perhaps there is some Javascript Conflict in the console?

I cannot support you further on this, I think I have taken it far enough for free advice. I think you will need to hire a developer to complete this work for you.