I need to mod Categories in v3.1 Keystone Theme.

stub

I'd like to do 2 things

1) Make Category Menu collapsible. It should be presented in fully collapsed (top level only) mode. clicking on a category opens up that category, showing all the lower categories for the category clicked. Clicking on an opened category, would collapse it again.

2) For 1 top level category, Clicking on the category would show a table something like this....

Clicking on an O would take you directly to Dot Com(sub-category)>Auction(sub-category), for example.

Is this the right place to find a developer which can do this? If not. I'd appreciate being pointed to where I might find such a developer.

stub

Clicking on a top level category would only expand to the next level. If there are any categories, in the expanded list, which have sub-categories these would not be expanded until those categories were clicked on. Just like the top level categories.

I made this correction because after re-reading my message, I was not sure if it was clear whether I was asking to expand ALL sub-categories (including expanding the sub-categories with subcategories). Which was not what I meant.

Still the question of where to look for developers to make these changes, is paramount. My Google searches never gave me any clear-cut resolution for this.

charrondev

Unfortunately I believe the best Vanilla Developers are mostly employees of Vanilla. If you find any in Canada I would love to know. We are hiring for a few roles at the moment.

https://vanillaforums.com/en/careers/

I'd recommend adding the price your willing to pay for these services to your post. That might get some OSS devs here that have experience working with Vanilla interested.

R_J

If you just want to have collapsible categories, you need an average web designer. Somebody who can inspect the html of the source and write some simple Javascript. Here is what is needed for collapsible categories:

• track the click event
• if parent elements ul.CategoryList>li.Item exist, a category has been clicked
• search for class "Depth-X" in that li.Item
• start looping through all siblings, break if you find sibling "li.Depth-X" or "li.Depth-(X-1)". For all siblings li.Depth-(X+1) toggle class Hidden
• 
  

It might be wise to add a toggle icon, but that should be possible by using CSS only. Simply add a pseudo element before li.Item

You can either add that in a pocket (use Pockets plugin) or, if you have more changes, think about creating your own theme. A custom theme like that would need to have three files: one css file, one javascript file and one file containing themes meta information ("addon.json"). So you the that creating a theme which does only sight changes doesn't require much.

If you want to replace the Categories page with the table you have described above, you would need a custom theme.

I'll try my hands on the Javascript I've described above, but not very soon. Somebody might write that few lines of code before I do 😉

R_J

The code below should work (should means it does not), but there is a problem with the nextCategory: it seems not to be a DOM element but I have no clue how to change that. The following code is ugly jQuery. I'm not fluent in Javascript It could be cleaner, I would avoid jQuery, use event delegation and a regex but I wanted to achieve quick results and that's what I can come up with:

// Check for class "Depth-X" in categoryClasses and return X or false
// Should better be done with a regex, I guess...
function getDepth(categoryClasses) {
   var classes = categoryClasses.split(' ');
   for (var i = 0, len = classes.length; i < len; i++) {
       if (classes[i].substr(0,6) == 'Depth-') {
           return classes[i].substr(6,);
       }
   }
   return false;
}

$(function() {
   $('ul.DataList.CategoryList > li.Item').each(function() {
       // Hide all Depth-X, X > 1 categories on load (i.e. all subcategories)
       if (!$(this).hasClass('Depth-1')) {
           $(this).addClass('Hidden');
       }

       // Attach event listener for clicking on categories.
       $(this).click(function(){
           var currentDepth = getDepth(this.getAttribute('class'));
           var nextCategory = this.nextSibling;
           if (nextCategory != null) {
               var nextCategoryDepth = nextCategory.getAttribute('class');
               if (currentDepth < nextCategoryDepth) {
                   nextCategory.classList.toggle('Hidden');
               }
           }
       });
   });
});

Maybe somebody with JS knowledge can tell how var nextCategory = this.nextSibling; has to be changed so that var nextCategoryDepth = nextCategory.getAttribute('class'); and nextCategory.classList.toggle('Hidden'); work as expected?

And from UX side I'd say it really needs to have some visual hints that there are collapsed categories

charrondev

I think we have a collapsable categories addon already (although I'm seeing it's internal now).

I'll see if I can have it moved over the addon directory. It's what you see in use on the ESO Online forums.

Update

I got approval to open source it. It will be a couple of weeks before I can get the source moved to the addons repo, but I can get it put up on the addon directory pretty quickly.

charrondev

Addon uploaded:

https://open.vanillaforums.com/addon/collapsecategories-plugin

It might need a little theming work to look the way you want it. It's an old addon that wasn't particularly widely used on our cloud platform.

stub

Thats really great. I've downloaded it and will try it out this weekend. Thank you very much indeed. It will be a BIG help.