Category bar doesn't work when "top" but works fine on "sidebar"

Hey guys,

I have a problem with category titles, I've attached a couple pictures. When it's on "sidebar" it shows up perfect and even shows the current category viewing as bold. I'd love to keep it as is, but when viewed on mobile it doesn't show so I have to use top, I think. But when I click it to "top" it just disappears and isn't visible unless in the "all" section. Please help!

www.thehometownhaunts.com

The top and sidebar behave in two fundamentally different ways.

Top

Presents the categories in a drilldown like fashion. So at the All level you see the top level categories. When you category click you drill down into that specific area of the hierarchy.

Sidebar

Presents the categories in drilldown/outline fashion. You see path of the outline you are drilling into.

Display Behaviour

When the viewport reaches 575px and below the sidebar is hidden and the top is shown, because there isn't enough room to keep the sidebar around.

9 minutes ago, creedon said:

The top and sidebar behave in two fundamentally different ways.

Top

Presents the categories in a drilldown like fashion. So at the All level you see the top level categories. When you category click you drill down into that specific area of the hierarchy.

Sidebar

Presents the categories in drilldown/outline fashion. You see path of the outline you are drilling into.

Display Behaviour

When the viewport reaches 575px and below the sidebar is hidden and the top is shown, because there isn't enough room to keep the sidebar around.

So is there a way to get the Top to function more like the Sidebar where it's always visible to navigate through no matter what category you're in? It seems like it would be a pretty common thing for people to be looking for.

Quote

So is there a way to get the Top to function more like the Sidebar where it's always visible to navigate through no matter what category you're in?

Not natively but with custom code it is possible to get closer.

Please see Store Page List Categories Mega. You'll have to decide if you like they way the categories are presented.

I can tell you after working on the code I can see why, from a technical standpoint, SS decided on the top design that they use. It's relatively easy to present just a few categories at a time instead of them all. My code is by no means perfect!

14 hours ago, creedon said:

Not natively but with custom code it is possible to get closer.

Please see Store Categories Mega. You'll have to decide if you like they way the categories are presented.

I can tell you after working on the code I can see why, from a technical standpoint, SS decided on the top design that they use. It's relatively easy to present just a few categories at a time instead of them all. My code is by no means perfect!

Ok so I installed and linked the twcsl file under "not linked", then I added the "store categories cache" into the main store page header, then above that I added the "store categories mega" code but it still doesn't show categories. Did I miss a step? I don't mind donating after all said and done if this works.

In the store categories cache code change the following...

callback : undefined

...to...

callback : twcSplcm

Enable Filter Visibility.

Let me know how it goes.

I have updated my cited code.

From the changes.

• support for mobile

@creedon - Hopefully you're still providing support on these forums...

I'm trying to do the same thing as HometownHaunts is/was. I've followed the steps exactly as they were laid out, but am not having any luck.

I replaced the callback from undefined to twcSplcm. I assume this goes for all instances of 'undefined', right? I found 4 and replaced them all (a fifth instances is present, but is a comment).

My website is spacerover.com/shop. Im just trying to add it to the left-side navigation, so all the subcategories are permanently showing under 'Shop by Department'.

Thanks.

16 hours ago, rockfusion said:

I replaced the callback from undefined to twcSplcm. I assume this goes for all instances of 'undefined', right?

No. Just this one instance in the store categories cache code.

      /*
      
        callback is a custom function that is called after the categories data
        has been loaded. replace undefined with the name of your custom function
        
        your callback must accept a JavaScript object
        
        */
        
      callback : undefined
   

Let us know how it goes.

Bummer. Still cannot get it to work. I do have some custom CSS to keep the nav menu sticky, will that interfere in any way with this script?

1 hour ago, rockfusion said:

Still cannot get it to work.

The steps for installing the twcSplcm callback code have not been done.

From the read me.

• After you install Store Categories Cache be sure to continue on with the rest of the steps.

The follow on steps can be found in the read me.

16 hours ago, creedon said:

The steps for installing the twcSplcm callback code have not been done.

I've added both the store categories cache and store page list categories mega in the site-wide footer injection code (simply because the per-page injection code editor is tiny and hard work with). The result however is that, after adding the latter, it blanks out my entire shop page.

4 hours ago, rockfusion said:

The result however is that, after adding the latter, it blanks out my entire shop page.

You are almost there. I realize the code box is tiny and frustrating and you have to be really careful when editing. The store page list categories mega needs to be added before the store categories cache code. My read me neglects to mention that. Also it would also be nice if folks get it wrong my code would fail more gracefully. Things to put on my to do list.

Let us know how it goes.

6 hours ago, creedon said:

The store page list categories mega needs to be added before the store categories cache code.

This was it! Thank you so much for your patience and responses. I greatly appreciate your help.

To take it one step further, can I edit the code in any place to make it fully expanded by default?

Edit: Shop By Department is not expanded by default. But All is.

18 hours ago, rockfusion said:

To take it one step further, can I edit the code in any place to make it fully expanded by default?

Find the following line...

                  <details/>

...and change it to...

                  <details open />

I plan to add this as a setting to the next version of my code. I also noticed the spacing is not to my linking for some of the elements so that is also on my list for a future version.

Let us know how it goes.

@creedon - Worked beautifully. Thanks again for all the help.

18 hours ago, CKOnline said:

is there a way to have it only affect the side panel? I want the top navigation to remain default.

I don't understand. The code replaces whatever CATEGORIES TYPE you have chosen in the section editor.

Its one or the other not both.

Are you thinking you want to escentially have both Sidebar and Top at the same time?

Quote

Secondly, how do I remove the arrows?

The following turned out to have some issues. Don't use it! Use my updated code noted below.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .products.collection-content-wrapper .nested-category-children details > summary,
  .products.collection-content-wrapper .nested-category-tree-wrapper details > summary
  
    {
    
      list-style : none;
      
      }
  
  .products.collection-content-wrapper .nested-category-children details > summary::marker, /* Chrome, Edge, Firefox */ 
  .products.collection-content-wrapper .nested-category-tree-wrapper details > summary::-webkit-details-marker /* Safari */
  
    {
    
      display : none;
      
      }
      
  </style>

Let us know how it goes.

I have updated my July 25, 2023 post.

From the changes.

• add option to hide icons
• add option to expand all categories on page load

Let me know how it goes.

@creedon yes, sorry should have clarified. Used css to make both top and side visible. 

Basically, want to know if there is a section of the code that codes for the sidebar so I could remove everything else (ie. code for the top and mobile). I'm kinda new to coding so not sure if that's possible.

I will give your suggestions a go. Thank you 🙂

3 hours ago, CKOnline said:

want to know if there is a section of the code that codes for the sidebar so I could remove everything else

The code doesn't quite work that way. It builds one structure and then adds it where needed in the page.

I can't support this modification as there is a cascade of things that happen when switching between side and top that SS does behind the scenes. My code is intended to attempt to work with the default way SS does things.

In my code find the following line.

$destination.replaceWith ( $element );

Change it to the following.

// $destination.replaceWith ( $element );

Let us know how it goes.

@creedon Thanks for all your help, you're a legend! Figured it all out now 🙂