dropdown speedbar

DBK Web Builder · #1 04-29-2014, 08:07 AM

Hi

I wanted to add a drop down menu to my speed bar. With Phil's help I was successful - here is a link

http://www.i-fiberoptics.com/xcart/home.php#link (still in development but that part works)

Now I'm trying to do it on another site ... but it's not working.

I have this code in tabs.tpl

<code>
<ul id="flexmenu1" class="flexdropdownmenu">
{foreach from=$pages_menu item=p name=page}
{if $p.show_in_menu eq 'Y' && $p.orderby gte "100" && $p.orderby lte "199" }
<li><a href="pages.php?pageid={$p.pageid}">{$p.title|amp} </a></li>
{/if}
{/foreach}
</ul>
... three more lists here

<ul id="flexmenu4" class="flexdropdownmenu">
{foreach from=$pages_menu item=p name=page}
{if $p.show_in_menu eq 'Y' && $p.orderby gte "400" && $p.orderby lte "499" }
<li><a href="pages.php?pageid={$p.pageid}">{$p.title|amp} </a></li>
{/if}
{/foreach}
</ul>

{if $speed_bar}
<div class="tabs{if $all_languages_cnt gt 1} with_languages{/if} monitor">
<ul>

{foreach from=$speed_bar item=sb name=tabs}
{strip}
<li{interline name=tabs}>
<a href="{$sb.link|amp}"{if $sb.title eq "Cemetery Memorials"} data-flexmenu="flexmenu1" {elseif $sb.title eq "Support"} data-flexmenu="flexmenu2" {elseif $sb.title eq "Purchase"} data-flexmenu="flexmenu3" {elseif $sb.title eq "About Us"} data-flexmenu="flexmenu4" {/if}>
{$sb.title}
<img src="{$ImagesDir}/spacer.gif" alt="" /></a>
<div class="t-l"></div><div class="t-r"></div>
</li>
{/strip}
{/foreach}

</ul>
</div>

</code>

I also copied over the flexmenu.css and flexmenu.js - they are in a folder in customer/dropmenu

BUt it's not working on the new site

http://www.watertownmemorialcompany.com/

I even went so far as to copy over the WHOLE skin and common_files from the IFO site and its's still not working.

If I look at the CSS in firebug - the <ul> are there but they are before the link code.

Do you think I need to add something somewhere else in the source to make this work ? I'm not sure what {interline} is doing.

Phil - if you see this - do you remember changing anything else ?

Thanks

DonnaNJ

totaltec · #2 04-29-2014, 08:21 AM

Well the good news is that your CSS and JS appear to be loading correctly.

Thanks for actually providing reference links to look at!

The current html output looks like:

Code:

<ul id="flexmenu2" class="flexdropdownmenu">
																	</ul>
<ul id="flexmenu3" class="flexdropdownmenu">
																	</ul>

Your posted code uses an array named $pages_menu. I don't think this value is getting assigned to smarty by PHP. You can determine this by using webmaster mode and looking at the assigned variables. You could also wrap your added code in an if statement: {if $pages_menu} {/if} and see if the <ul> sections show up. Also remember that the orderby of the pages needs to be within the defined ranges.

I use this particular trick all the time, pretty cool that Phil does too.

I am pretty sure you are not getting the array set in PHP. Especially since you copied over the whole skin. All signs point to this. Check if it is set and get back to us.

-Mike

DBK Web Builder · #3 04-29-2014, 09:16 AM

There are there - I posted the last two -= I added another page.. i also notcied at the bottom before the </body>

there is this
<ul id="flexmenu4" class="flexdropdownmenu jqflexmenu" style="visibility: visible; z-index: 1005; left: -435px; top: 35px; display: none;"> There are files in flexmenu4 There are files in flexmenu4 There are files in flexmenu4 There are files in flexmenu4 There are files in flexmenu4 There are files in flexmenu4 There are files in flexmenu4 There are files in flexmenu4
<li>
<a href="http://www.watertownmemorialcompany.com/testimonials.html">Testimonials</a>

</li>

There are files in flexmenu4
<li>

</ul>
<ul id="flexmenu1

AND if I actually HOVEr on the about - some text I wrote in the loop shows up

but the link - does not ... and I have the extra link !

hmmm ....

any thing else I can look at ?

thanks

Donna

7 => Array (11)
pageid => "11"
filename => "page_003.html"
title => "Testimonials"
level => "E"
orderby => "410"
active => "Y"
language => "en"
show_in_menu => "Y"
meta_description => ""
meta_keywords => ""
title_tag => ""
8 => Array (11)
pageid => "12"
filename => "page_016.html"
title => "Page16"
level => "E"
orderby => "420"
active => "Y"
language => "en"
show_in_menu => "Y"
meta_description => ""
meta_keywords => ""
title_tag => ""

totaltec · #4 04-29-2014, 10:05 AM

Yes I see that now, those extra <ul> tags near the body.

is it possible that you can post the entire template file?
Use code and /code tags surround with [] like[/code]

Whatever is happening is pretty strange! I'm now guessing something is wrong with the template.

DBK Web Builder · #5 04-29-2014, 10:08 AM

This is the tabs.tpl .... is that what you want ?

<code>

{if $pages_menu} There is something in the pages menu

<ul id="flexmenu1" class="flexdropdownmenu">
{foreach from=$pages_menu item=p name=page}
{if $p.show_in_menu eq 'Y' && $p.orderby gte "100" && $p.orderby lte "199" }
<li><a href="pages.php?pageid={$p.pageid}">{$p.title|amp} </a></li>
{/if}
{/foreach}
</ul>

<ul id="flexmenu2" class="flexdropdownmenu">
{foreach from=$pages_menu item=p name=page}
{if $p.show_in_menu eq 'Y' && $p.orderby gte "200" && $p.orderby lte "299" }
<li><a href="pages.php?pageid={$p.pageid}">{$p.title|amp} </a></li>
{/if}
{/foreach}
</ul>

<ul id="flexmenu3" class="flexdropdownmenu">
{foreach from=$pages_menu item=p name=page}
{if $p.show_in_menu eq 'Y' && $p.orderby gte "300" && $p.orderby lte "399" }
<li><a href="pages.php?pageid={$p.pageid}">{$p.title|amp} </a></li>
{/if}
{/foreach}
</ul>

<ul id="flexmenu4" class="flexdropdownmenu">
{foreach from=$pages_menu item=p name=page}
There are files in flexmenu4
{if $p.show_in_menu eq 'Y' && $p.orderby gte "400" && $p.orderby lte "499" }
<li><a href="pages.php?pageid={$p.pageid}">{$p.title|amp} </a></li>
{/if}
{/foreach}
</ul>

<br/>
{/if}

{if $speed_bar}
<div class="tabs{if $all_languages_cnt gt 1} with_languages{/if} monitor">
<ul>

{foreach from=$speed_bar item=sb name=tabs}
{strip}
<li{interline name=tabs}>
<a href="{$sb.link|amp}"{if $sb.title eq "Cemetery Memorials"} data-flexmenu="flexmenu1" {elseif $sb.title eq "Support"} data-flexmenu="flexmenu2" {elseif $sb.title eq "Purchase"} data-flexmenu="flexmenu3" {elseif $sb.title eq "About Us"} data-flexmenu="flexmenu4" {/if}>
{$sb.title}
<img src="{$ImagesDir}/spacer.gif" alt="" /></a>
<div class="t-l"></div><div class="t-r"></div>
</li>
{/strip}
{/foreach}

</ul>
</div>

</code>

totaltec · #6 04-29-2014, 10:27 AM

Replace tabs.tpl (make a backup of course) with the following code:

Code:

{*
8ec8b858917c921a726e2197071ce74d020e5ead, v1 (xcart_4_6_0), 2013-04-02 16:43:59, tabs.tpl, random
vim: set ts=2 sw=2 sts=2 et:
*}

{if $pages_menu} Hello there is a pages menu
<ul id="flexmenu1" class="flexdropdownmenu">
{foreach from=$pages_menu item=p name=page}
{if $p.show_in_menu eq 'Y' && $p.orderby gte "100" && $p.orderby lte "199" }
there are items in flexmenu1
<li><a href="pages.php?pageid={$p.pageid}">{$p.title|amp} </a></li>
{/if}
{/foreach}
</ul>

<ul id="flexmenu2" class="flexdropdownmenu">
{foreach from=$pages_menu item=p name=page}
{if $p.show_in_menu eq 'Y' && $p.orderby gte "200" && $p.orderby lte "299" }
there are items in flexmenu2
<li><a href="pages.php?pageid={$p.pageid}">{$p.title|amp} </a></li>
{/if}
{/foreach}
</ul>

<ul id="flexmenu3" class="flexdropdownmenu">
{foreach from=$pages_menu item=p name=page}
{if $p.show_in_menu eq 'Y' && $p.orderby gte "300" && $p.orderby lte "399" }
there are items in flexmenu3
<li><a href="pages.php?pageid={$p.pageid}">{$p.title|amp} </a></li>
{/if}
{/foreach}
</ul>

<ul id="flexmenu4" class="flexdropdownmenu">
{foreach from=$pages_menu item=p name=page} 
{if $p.show_in_menu eq 'Y' && $p.orderby gte "400" && $p.orderby lte "499" }
there are items in flexmenu4
<li><a href="pages.php?pageid={$p.pageid}">{$p.title|amp} </a></li>
{/if}
{/foreach}
</ul>

<br/>
{/if} 

{*{if $speed_bar}
  <div class="tabs{if $all_languages_cnt gt 1} with_languages{/if} monitor">
    <ul>

      {foreach from=$speed_bar item=sb name=tabs}
         {strip}
			<li{interline name=tabs}>
				<a href="{$sb.link|amp}">
					{$sb.title}
					<img src="{$ImagesDir}/spacer.gif" alt="" />
				</a>
				<div class="t-l"></div><div class="t-r"></div>
			</li>
		{/strip}
      {/foreach}

    </ul>
  </div>
  <div class="tabs-mobile">

    <select name="mobileTabs" id="mobileTabs">
        <option value="">{$lng.lbl_quick_menu}</option>
        {foreach from=$speed_bar|@array_reverse item=sb name=tabs}
          {strip}
            <option value="{$sb.link|amp}">
	      {$sb.title}
	    </option>
          {/strip}
        {/foreach}
      </select>
    <script type="text/javascript">
      $(function (){ldelim}
          $("#mobileTabs").val('1');  
          $("#mobileTabs").change(function(e) {ldelim}
              window.location.href = $(this).val();
          {rdelim});
      {rdelim});
    </script>
  </div>
{/if}*}

All I have done is comment out the existng tabs menu for now, to get it out of our way. Then I moved you test words inside the if statements, so they will only show up if those conditions are met.

I think what may be going on is that the static pages don;t actually exist, the way you had your test words placed would cause them to show as long as the $pages_menu existed, and loop for each item in $pages_menu.

This should bring to the surface what is truly going on.

You can see on my test site: http://trainingpen.com that the <ul> tags are showing up, but there are no <li> tags inside them, because the if statement conditions are not being met.

Perhaps the associated javascript files are playing havoc with the output, since there are no <li>s.

To troubleshoot this, I would remove the links to the CSS and JS temporarily, then edit the .tpl to only show one flexmenu. Ensure that the pages orderby is within the range you specify, then see what the html output is. Get the html output working correctly, then add your JS and CSS back in.

totaltec · #7 04-29-2014, 10:28 AM

P.S. did you get my PM?

DBK Web Builder · #8 04-29-2014, 11:35 AM

Oh that made the nav go away altogether - so you are right something is missing

But it works on the other site - there must be another change that I am missing.

We' ll post it here when we figure it out !

PhilJ · #9 04-29-2014, 01:01 PM

Quote:

Phil - if you see this - do you remember changing anything else ?

Hi Donna, maybe skin/common_files/customer/service_head.tpl

Quote:

totaltec · #10 04-29-2014, 01:46 PM

OK! We got it figured out. The final working code:

Code:

{if $pages_menu} 
  <ul id="flexmenu1" class="flexdropdownmenu">
    {foreach from=$pages_menu item=p name=page}
      {if $p.show_in_menu eq 'Y' && $p.orderby gte "100" && $p.orderby lte "199" }
        <li><a href="pages.php?pageid={$p.pageid}">{$p.title|amp} </a></li>
      {/if}
    {/foreach}
  </ul>
  <ul id="flexmenu2" class="flexdropdownmenu">
    {foreach from=$pages_menu item=p name=page}
      {if $p.show_in_menu eq 'Y' && $p.orderby gte "200" && $p.orderby lte "299" }
        <li><a href="pages.php?pageid={$p.pageid}">{$p.title|amp} </a></li>
      {/if}
    {/foreach}
  </ul>
{/if}

{if $speed_bar}
  <div class="tabs{if $all_languages_cnt gt 1} with_languages{/if} monitor">
    <ul>
      {foreach from=$speed_bar item=sb name=tabs}
        {strip}
          <li{interline name=tabs}>
            <a href="{$sb.link|amp}"{if $sb.title eq "Cemetery Memorials"} data-flexmenu="flexmenu1" {elseif $sb.title eq "Support"} data-flexmenu="flexmenu2" {elseif $sb.title eq "Purchase"} data-flexmenu="flexmenu3" {elseif $sb.title eq "About Us"} data-flexmenu="flexmenu4" {/if}>
              {$sb.title}
              <img src="{$ImagesDir}/spacer.gif" alt="" /></a>
              <div class="t-l"></div><div class="t-r"></div>
          </li>
        {/strip}
      {/foreach}
    </ul>
  </div>
{/if}

A key part is that the speed bar menu is linked to the pages menu, based on the name of the speed bar item and the position value of the page.