Omega Navigation

[UEP]

Hi,
I'm trying to put the omega navigation on the storefront, however I can't get the child categories to toggle. What am I missing? If I put <mvt:item name="category_tree" /> it doesn't work. I've made sure that the "omega-navigation.css" and "omega-navigation.js" are declared. I made sure the page items are identical. I've tried to manually add the "is-active" class to "x-accordion-category-tree__row" manually with javascript. Nothing works, unless it's on a category page. I've gone through it line by line and there doesn't seem to be any reason why it won't work other pages as the code is the same.

Ideally, I'd like to have the menu on the left side on every page, with additional toggle-able links for other pages and sections of our website, similar to:

https://colossus.mivareadythemes.com...e-coffees.html


If need be, I can hard code the menu links instead of relying on Miva to generate it if that would be simpler, as we only have maybe a dozen links, however it just doesn't work no matter what I try.

Any input would be appreciated.
Thanks,
Nathan

[Nick]

Are there any JavaScript errors on the page?

The Colossus accordion navigation uses JavaScript in the theme.js file, do you know if the JavaScript is there?

What is the URL, I can take a look and give you more information.

[RTHOMASDESIGN]

Are you trying to add a Colossus style menu to Shadows or another ReadyTheme? If so, did you make sure to replicate the template for the nav?

[UEP]

If I take a page where the menu is working, like CTGY, and make a copy, the copy won't show subcategories when you click on the + icon. When I look at the code for the button I get:

<button class="x-accordion-category-tree__toggle c-button u-bg-transparent u-font-tiny" data-hook="accordion-toggle" type="button" aria-label="View More"><span class="u-icon-add"></span></button>

on both pages, exept on the original there is an event listnener, pointing to line 428 of /themes/colossus/ui/js/theme.js, where I find:


422 (function () {
423 'use strict';
424
425 let accordionToggles = document.querySelectorAll('[data-hook="accordion-toggle"]');
426
427 for (let id = 0; id < accordionToggles.length; id++) {
428 accordionToggles[id].addEventListener('click', function (event) {
429 let parent = this.parentElement.closest('li');
430
431 parent.classList.toggle('is-active');
432 });
433 }
434 })();

However both pages are loading theme.js, and both are identical when compared using WinMerge. Does anyone know why the event listener loads on one but not the other?

[lesliekirk]

Nathan, are you able to share a link to the site you are working on?

[UEP]

Unfortunately it's password protected at the moment. All I want to do is put the category tree on the storefront page like it is for the product and category pages. If I wanted to create a page and put the category tree anywhere on it, how would I do it?

[RTHOMASDESIGN]

Still need more information. What ReadyTheme are you using? Shadows? If so, which version?

[UEP]

I guess I'm not sure. I'm using the Colossus ReadyTheme, I guess Shadows is part of it? If you look here:

https://docs.miva.com/readytheme-col...ega-navigation

the page says Colossus, but the title says "Shadows ReadyTheme: Extensions"

How do I find out?

[RTHOMASDESIGN]

Okay, the Omega Navigation refers to the drop down menu in the header of Colossus. You're saying you want to install the category tree on multiple pages correct?

Also, you can find the ReadyTheme version under User Interface > CSS/Javascript resources > Click JavaScript Resources > Check the settings checkbox and then "edit resource". Alternatively, you can view the source code of any page and search for "ReadyThemeVersion".

[RTHOMASDESIGN]

BTW sorry I didn't notice this was posted in the Colossus board! Haha, was a bit busy yesterday. Anyway, this is the script that handles the accordion-style category tree drop down for Colossus:

(function () {
'use strict';

let accordionToggles = document.querySelectorAll('[data-hook="accordion-toggle"]');

for (let id = 0; id < accordionToggles.length; id++) {
accordionToggles[id].addEventListener('click', function (event) {
let parent = this.parentElement.closest('li');

parent.classList.toggle('is-active');
});
}
})();

You'll find it under "jsCTGY" in "theme.js". You could append that to "script.js" to get it working across the board, or create an inline script and assign it to the footer_js resource group.

Hope that helps!
-Ryan

[UEP]

mivaJS.ReadyThemeVersion = '1.0.2'

What I want ideally is to have the category tree menu on the left hand side like it is on the product and category pages, with the page content wrapping around. I can do that, but for whatever reason when I add it to any other page the "+" toggle breaks. The child categories are there, since I can manually inspect the code and add "is-active" to the row and it will expand and show the child categories, but it won't do anything when clicked.

[RTHOMASDESIGN]

The script listed above is what handles the accordion "+" toggle...

By default, for performance reasons most extensions are set to run only on the pages that actually need them. You'll need to run that script on every applicable page. How you go about that is up to you -- I mentioned two methods in the last post.

[UEP]

Sorry Ryan, I didn't see you last post until after I replied. I added the code to the footer_js resource like you suggested, and it's working now. I might change how I approach it later, but I'm on the right track.

My sincere thanks to everybody who chimed in.

-Nathan