2

I'm not sure if this is possible, but I would really LOVE a solution if anyone can figure it out. The navigation for our page works a little differently to most; when a user clicks on the parent category, the child category opens; when they click on this, a static block reveals a series of small thumbnails which, when clicked, go through to the full product page. This obviously reloads the page which means the navigation starts over again - you have to click 'products' followed by 'shorts' to see the products again.

Now where the tricky part is....

Is there anyway to tell Magento to load the 'products -> shorts -> static block' on specific pages, so that the other menu options are already there if the user wishes to divert to another page, rather than having to click through the menu all over again.

Below is some of my code; I can attach more if needbe:

HTML:

<div id="header-nav" class="skip-content">


    <nav id="nav">
        <ol class="nav-primary">
            <li  class="level0 nav-1 first parent"><a href="https://URL/e-store" class="level0 has-children">e store</a><ul class="level0"></ul><ul class="level0"><li  class="level1 nav-1-1 first parent"><a href="https://URL/e-store/shorts" class="level1 has-children">shorts</a><ul class="level1"><span class="nav-static-block"><div class="shorts-static">
<div class="box"><a href="https://URL.html"> <img onmouseover="this.src='https://URL/media//product-short-002.jpg'" onmouseout="this.src='https://URL/media//product-short-002-bw.jpg'" alt="" src="https://www.URL/media//product-short-002-bw.jpg" height="48px" width="48px" /> </a></div>
<div class="box"><a href="https://URL/design-no-018.html"> <img onmouseover="this.src='https://URL/media//product-short-018.jpg'" onmouseout="this.src='https://URL/media//product-short-018-bw.jpg'" alt="" src="https://URL/media//product-short-018-bw.jpg" height="48px" width="48px" /> </a></div>
<div class="box"><a href="https://URL/design-no-015.html"> <img onmouseover="this.src='https://URL/media//product-short-015.jpg'" onmouseout="this.src='https://URL/media//product-short-015-bw.jpg'" alt="" src="https://URL/media//product-short-015-bw.jpg" height="48px" width="48px" /> </a></div>
<div class="box"><a href="https://URL/design-no-005.html"> <img onmouseover="this.src='https://URL/media//product-short-005.jpg'" onmouseout="this.src='https://URL/media//product-short-005-bw.jpg'" alt="" src="https://URL/media//product-short-005-bw.jpg" height="48px" width="48px" /> </a></div>
<div class="box"><a href="https://URL/design-no-206.html"> <img onmouseover="this.src='https://URL/media//product-short-206.jpg'" onmouseout="this.src='https://URL/media//product-short-206-bw.jpg'" alt="" src="https://URL/media//product-short-206-bw.jpg" height="48px" width="48px" /> </a></div>
<div class="box"><a href="https://URL/design-no-016.html"> <img onmouseover="this.src='https://URL/media//product-short-016.jpg'" onmouseout="this.src='https://URL/media//product-short-016-bw.jpg'" alt="" src="https://URL/media//product-short-016-bw.jpg" height="48px" width="48px" /> </a></div>
<div class="box"><a href="https://URL/design-no-205.html"> <img onmouseover="this.src='https://URL/media//product-short-205.jpg'" onmouseout="this.src='https://URL/media//product-short-205-bw.jpg'" alt="" src="https://URL/media//product-short-205-bw.jpg" height="48px" width="48px" /> </a></div>
<div class="box"><a href="https://URL/design-no-011.html"> <img onmouseover="this.src='https://URL/media//product-short-011.jpg'" onmouseout="this.src='https://URL/media//product-short-011-bw.jpg'" alt="" src="https://URL/media//product-short-011-bw.jpg" height="48px" width="48px" /> </a></div>
<div class="box"><a href="https://URL/design-no-007.html"> <img onmouseover="this.src='https://URL/media//product-short-007.jpg'" onmouseout="this.src='https://URL/media//product-short-007-bw.jpg'" alt="" src="https://URL/media//product-short-007-bw.jpg" height="48px" width="48px" /> </a></div>
<div class="box"><a href="https://URL/design-no-013.html"> <img onmouseover="this.src='https://URL/media//product-short-013.jpg'" onmouseout="this.src='https://URL/media//product-short-013-bw.jpg'" alt="" src="https://URL/media//product-short-013-bw.jpg" height="48px" width="48px" /> </a></div>
<div class="box"><a href="https://URL/design-no-008.html"> <img onmouseover="this.src='https://URL/media//product-short-008.jpg'" onmouseout="this.src='https://URL/media//product-short-008-bw.jpg'" alt="" src="https://URL/media//product-short-008-bw.jpg" height="48px" width="48px" /> </a></div>
<div class="box"><a href="https://URL/design-no-204.html"> <img onmouseover="this.src='https://URL/media//product-short-204.jpg'" onmouseout="this.src='https://URL/media//product-short-204-bw.jpg'" alt="" src="https://URL/media//product-short-204-bw.jpg" height="48px" width="48px" /> </a></div>
</div>

<ul class="level2"></ul></li></ul></li><li  class="level1 nav-1-2 parent"><a href="https://www.URL/e-store/shirts" class="level1 has-children">shirts</a><ul class="level1"><span class="nav-static-block"><div class="shirts-static">
<div class="box"><a href="https://URL/design-no-zubbo.html"> <img onmouseover="this.src='https://URL/media//product-shirts-zubbo.jpg'" onmouseout="this.src='https://URL/media//product-shirts-zubbo-bw.jpg'" alt="" src="https://URL/media//product-shirts-zubbo-bw.jpg" height="48px" width="48px" /> </a></div>
<div class="box"><a href="https://URL/design-no-loopy.html"> <img onmouseover="this.src='https://URL/media//product-shirts-loopy.jpg'" onmouseout="this.src='https://URL/media//product-shirts-loopy-bw.jpg'" alt="" src="https://URL/media//product-shirts-loopy-bw.jpg" height="48px" width="48px" /> </a></div>
<div class="box"><a href="https://URL/design-no-beaker.html"> <img onmouseover="this.src='https://URL/media//product-shirts-beaker.jpg'" onmouseout="this.src='https://URL/media//product-shirts-beaker-bw.jpg'" alt="" src="https://URL/media//product-shirts-beaker-bw.jpg" height="48px" width="48px" /> </a></div>
<div class="box"><a href="https://URL/design-no-das-boober.html"> <img onmouseover="this.src='https://URL/media//product-shirts-boober.jpg'" onmouseout="this.src='https://URL/media//product-shirts-boober-bw.jpg'" alt="" src="https://URL/media//product-shirts-boober-bw.jpg" height="48px" width="48px" /> </a></div>
</div>

<ul class="level2"></ul></li></ul></li><li  class="level1 nav-1-3 last parent"><a href="https://URL/e-store/hats" class="level1 has-children">Hats</a><ul class="level1"><span class="nav-static-block"><div class="hats-static">
<div class="box"><a href="https://URL/design-tillsy-n.html"> <img onmouseover="this.src='https://URL/media//product-hat-n.jpg'" onmouseout="this.src='https://URL/media//product-hat-n-bw.jpg'" alt="" src="https://URL/media//product-hat-n-bw.jpg" height="48px" width="48px" /> </a></div>
<div class="box"><a href="https://URL/design-tillsy-o.html"> <img onmouseover="this.src='https://URL/media//product-hat-o.jpg'" onmouseout="this.src='https://URL/media//product-hat-o-bw.jpg'" alt="" src="https://URL/media//product-hat-o-bw.jpg" height="48px" width="48px" /> </a></div>
</div>

</nav>

renderer.phtml code (that loads the static blocks):

$html = '';

 $children = $menuTree->getChildren();
 $parentLevel = $menuTree->getLevel();
 $childLevel = is_null($parentLevel) ? 0 : $parentLevel + 1;

 $counter = 1;
 $childrenCount = $children->count();

 $parentPositionClass = $menuTree->getPositionClass();
 $itemPositionClassPrefix = $parentPositionClass ? $parentPositionClass . '-' : 'nav-';

foreach ($children as $child) {
$child->setLevel($childLevel);
$child->setIsFirst($counter == 1);
$child->setIsLast($counter == $childrenCount);
$child->setPositionClass($itemPositionClassPrefix . $counter);

$outermostClassCode = 'level'. $childLevel;
$_hasChildren = ($child->hasChildren()) ? 'has-children' : '';

$html .= '<li '. $this->_getRenderedMenuItemAttributes($child) .'>';

$html .= '<a href="'. $child->getUrl() .'" class="'. $outermostClassCode .' '. $_hasChildren .'">'. $this->escapeHtml($this->__($child->getName())) .'</a>';

if (!empty($childrenWrapClass)) {
    $html .= '<div class="'. $childrenWrapClass .'">';
}
 $html .= '<ul class="level' . $childLevel . '">';
 $staticBlock = trim($this->getLayout()->createBlock('cms/block')->setBlockId($child->getId())->toHtml());
if(!empty($staticBlock)){
$html .= '<span class="nav-static-block" style="background:#000; border-top:1px solid #ccc; padding:10px;">';
$html .= $staticBlock;
$html .= '</span>';
}
$html .= '</ul>';

$nextChildLevel = $childLevel + 1;

if (!empty($_hasChildren)) {
    $html .= '<ul class="level'. $childLevel .'">';

    $html .=     $this->render($child, $childrenWrapClass);
    $html .= '</ul>';
}

if (!empty($childrenWrapClass)) {
    $html .= '</div>';
}

$html .= '</li>';

$counter++;
}

return $html;

closed as unclear what you're asking by Jeroen, 7ochem, Amit Bera, hellimac, Klettseb Jan 16 '16 at 15:53

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.