Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Side Menu with less HTML in the page

 
Reply
   X-Cart forums > X-Cart 5 > Dev Questions (X-Cart 5)
 
Thread Tools Search this Thread
  #1  
Old 06-22-2017, 02:53 AM
 
xgarb xgarb is offline
 

eXpert
  
Join Date: Jul 2004
Location: UK
Posts: 263
 

Default Side Menu with less HTML in the page

On our site we have a side menu that looks like this:




This menu (based on the flyout menu I think) is created by taking the whole category structure, creating HTML from this and then hiding via CSS the parts that shouldn't be shown. This means that there is superfluous HTML in the code. We have a lot of categories and depth so that's a lot of HTML!

So.. I've tried to recode the menu but rather than starting with the whole category structure, I take the path of the current location and then add in the siblings of each level to make my array.

Code:
/** * Output menu tree based on path * * @return string */ protected function makeMenuFromCurrentCatID() { $categoryPath = \XLite\Core\Database::getRepo('\XLite\Model\Category')-> getCategoryPath($this->getCategoryId()); // from https://stackoverflow.com/questions/44507936/create-multidimensional-array-from-four-arrays-based-on-parent-id/44522606 $tree = []; $parent = &$tree; // Use `= &` to reference the same location foreach ($categoryPath as $category) { $currentCatSiblings = $category->getSiblings(true); foreach ($currentCatSiblings as $sibling) { $parent[$sibling->getID()] = []; } $parent = &$parent[$category->getID()]; // Use `= &` to reference the deeper location } return $tree; }

Which is used with this twig code

Code:
<ul class="sidemenu menu-tree catalog-categories catalog-categories-tree"> {% for first, firstitems in this.makeMenuFromCurrentCatID() %} <li class="leaf"><a class="topcat" href="{{ this.getCatLinkFromID(first) }}">{{ this.getCatNameFromID(first) }}</a> {% if firstitems is not empty %} <ul class="sidemenu menu-tree sublevel"> {% for second, seconditems in firstitems %} <li><a {{ this.isActiveCategory(second) }} href="{{ this.getCatLinkFromID(second) }}">{{ this.getCatNameFromID(second) }}</a> {% if seconditems is not empty %} <ul class="sidemenu menu-tree sublevel"> {% for third, thirditems in seconditems %} <li><a {{ this.isActiveCategory(third) }} href="{{ this.getCatLinkFromID(third) }}">{{ this.getCatNameFromID(third) }}</a> {% if thirditems is not empty %} <ul class="sidemenu menu-tree sublevel"> {% for fourth, fourthitems in thirditems %} <li><a {{ this.isActiveCategory(fourth) }} href="{{ this.getCatLinkFromID(fourth) }}">{{ this.getCatNameFromID(fourth) }}</a></li> {% endfor %} </ul> {% endif %} </li> {% endfor %} </ul> {% endif %} </li> {% endfor %} </ul> {% endif %} </li> {% endfor %} </ul>

Which all works. However.. I have some questions that I'll put in subsequent posts to keep this readable.
__________________
Core version: 5.5.xx
Reply With Quote
  #2  
Old 06-22-2017, 03:04 AM
 
xgarb xgarb is offline
 

eXpert
  
Join Date: Jul 2004
Location: UK
Posts: 263
 

Default Re: Side Menu with less HTML in the page

First question... How do I improve the Twig code. It really should be recursive rather than the 4 loops that I have.

I tried using Macros from here: https://stackoverflow.com/questions/8326482/how-to-render-a-tree-in-twig but it couldn't make it work.
__________________
Core version: 5.5.xx
Reply With Quote
  #3  
Old 06-22-2017, 03:15 AM
 
xgarb xgarb is offline
 

eXpert
  
Join Date: Jul 2004
Location: UK
Posts: 263
 

Default Re: Side Menu with less HTML in the page

Second question...

The current menu works better when you are in a parent category. Currently when I'm in the Pressure category it shows the immediate children...




but in my new version the children aren't shown (as they aren't in the path)...




I'm not sure if I should somehow add children to the array in this case or maybe the class method should work with parents and children rather than the siblings?
__________________
Core version: 5.5.xx
Reply With Quote
Reply
   X-Cart forums > X-Cart 5 > Dev Questions (X-Cart 5)


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 09:52 PM.

   

 
X-Cart forums © 2001-2020